How to setup cache header for cloudfront so Google Pagespeed recognizes it?

Question

I'm serving static content from S3 and through Cloudfront. However, Google Pagespeed flags that as cache-header is not specified so I go to my cloudfront settings and changed it.

Once the distribution is deployed. Google Pagespeed still doesn't recognize that.

I also add cache-control to the object on S3. When I hit the object directly from S3 I can see the response header but when I hit using cloudfront URL I don't see the cache-control header.

Here's the response I get

Accept-Ranges:bytes
Age:641
Connection:keep-alive
Content-Length:44715
Content-Type:image/png
Date:Fri, 17 Jul 2015 18:39:50 GMT
ETag:"e0b19573b90781f60f8865705c80f11d"
Last-Modified:Fri, 17 Jul 2015 17:50:27 GMT
Server:AmazonS3
Via:1.1 (CloudFront)
X-Amz-Cf-Id:
X-Cache:Hit from cloudfront

Answer 1

Based on the age of the HTTP response headers you provided, it looks like the object has been in cache for 641 seconds. It maybe the case that you added the Cache-Control headers to S3 after the object has been cached. I would recommend invalidating the object and making your request again. You should notice that your X-Cache header will be a Miss, meaning CloudFront went to your origin.

Once the distribution is deployed. Google Pagespeed still doesn't recognize that.

CloudFront does not modify your Cache-Control headers. Those values only impact how long CloudFront caches objects.

Answer 2

I'm having the same problem. It's been a while since you posted, but in case someone has a similar problem... I think the cache control that Toy was setting was the cache used by CloudFront. It appears that headers need to be added to the S3 objects individually (can be done recursively with the command line).