CODEWITHSUNDEEP
amazon-web-servicesamazon-s3amazon-cloudfrontcache-control
Richard Kacerek
Richard Kacerek

Reputation: 137

AWS CloudFront Leverage browser caching

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

Upvotes: 11

Views: 11272

Answers (2)

Mateusz Przybylek
Mateusz Przybylek

Reputation: 5855

Paddez's answer is right, I would like to add if you want to quickly setup caching for a browser, you have two ways:

  1. Directly on files level:

    In S3 select files -> Edit metadata -> Add system defined "Cache-Control" = max-age=86400

    This is proper setup, but require changing every file separately. enter image description here

  2. For specific pattern / all files

    In CloudFront -> Behaviors -> Edit/Add behavior with pattern -> Response headers policy -> Create new -> Create proper security headers, and focus on Custom headers -> Add "Cache-Control" = max-age: 86400

    IMO best way to quick setup browser cache for all files. enter image description here

I am surprised why it is so hidden in aws. Should be clickable in console, but UX in aws is not the best one.

Upvotes: 1

Paddez
Paddez

Reputation: 908

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

Upvotes: 18

Related Questions