Static resources have cache control max-age of zero seconds
Closed this issue · 3 comments
All static resources currently have cache control max-age of zero seconds.
Take the museum banner image on the home page for example:
> curl https://www.hope4cheetahs.org/static/media/CCF_Cheetah_Museum.5679c3ef.jpg --head
HTTP/2 200
content-type: image/jpeg
content-length: 153240
date: Tue, 04 Aug 2020 17:18:38 GMT
last-modified: Thu, 30 Jul 2020 08:36:14 GMT
etag: "5679c3effd9b34df4a83b206c30ad9ae"
x-amz-server-side-encryption: AES256
cache-control: public, must-revalidate, max-age=0
accept-ranges: bytes
server: AmazonS3
via: 1.1 2bedbeaa49b4a77447d30097858cb81a.cloudfront.net (CloudFront), 1.1 efbeb233fac0fa18daed0fe0f5975c2f.cloudfront.net (CloudFront)
x-amz-cf-pop: SEA19-C2
x-cache: Miss from cloudfront
x-amz-cf-pop: SFO20-C1
x-amz-cf-id: zpS7A-hbNsYveZ-G7z0H9pRmKPtUAPTQg6vDeF3GXzkKUA0ZIjWrog==
age: 20
The cache-control key-value pair specifies the caching behavior. Currently it has:
cache-control: public, must-revalidate, max-age=0
We could consider changing the cache-control value to be something like:
Cache-Control: public, max-age=604800, immutable
More information on cache-control here.
UPDATE:
Due to the cache invalidation technique employed by Amplify, the browser is forced to check for updates for resource on every update -
The first time you deploy your site, the Amplify Console versions all assets to create unique references for each file. These references are deployed to our origin and are made available to our CDN cache, which has a very high TTL. We set cache-control headers on all static asset metadata to force the browser to check for asset updates on every request.
A simple analysis within Firefox's debug console reveals this:
As the user jumps from one page to another within the site, the shared resources (i.e. .css, .js, logo.svg) return HTTP 304 for the browser, meaning no updates are required for those resources. However, it still takes time for the browser to initiate the check for those.
Perhaps the best solution that offers the best balance is to put a short cache expiration period on all static resources. This could be in minutes, or to one to a few hours.
Other related articles:
- https://aws.amazon.com/blogs/mobile/aws-amplify-console-supports-instant-cache-invalidation-and-delta-deployments/
- https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html
- https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#ExpirationDownloadDist
This one is exactly spot on:
https://forums.aws.amazon.com/thread.jspa?threadID=306225
Reopening this since it's not fixed.