AWS CloudFront Leverage browser caching

amazon-web-services amazon-s3 amazon-cloudfront cache-control
Richard Kacerek picture Richard Kacerek · Mar 12, 2017 · Viewed 8.4k times · Source

does anyone know how to set up CloudFront Caching correctly? I've got a Jekyll website in S3 and CloudFront set up like this:

Path Pattern: Default (*)

Minimum TTL: 86400
Maximum TTL: 604800
Default TTL: 86400

But when I use Pingdom.com or PageSpeed Insights I get a message:

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources

Answer

Paddez picture Paddez · Mar 12, 2017

The TTL you've configured within CloudFront is in relation to CloudFront's internal caching, and not on a per browser level.

Essentially, you are telling CloudFront to keep the file in it's Edges for a minimum of 86400 seconds etc.

To communicate a maximum/minimum TTL to a browser, you need to add a Cache-Control HTTP header to the requested file.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html

Related questions

Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

I'm receiving the following error on a couple of Chrome browsers but not all. Not sure entirely what the issue is at this point. Font from origin 'https://ABCDEFG.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing …

Read More
When to use Amazon Cloudfront or S3

Are there use cases that lend themselves better to Amazon cloudfront over s3 or the other way around? I'm trying to understand the difference between the 2 through examples.

Read More
What client tools are available to manage Amazon S3 and CloudFront?

I just started using the Amazon S3 and Amazon CloudFront. What proper client tools are out there that I can use to manage my account? Like uploading files etc. Yes I am a developer, but, I am pressed for time, …

Read More