AWS CloudFront Leverage browser caching
Asked Answered
L

2

11

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

Lu answered 12/3, 2017 at 12:39 Comment(0)
C
18

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

Cumulous answered 12/3, 2017 at 12:59 Comment(0)
T
1

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.

Tum answered 11/7, 2024 at 7:52 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.