19

I get the following on gtmetrix.com:

Leverage browser caching E (55) 52% Server High What does this mean? The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources: http://mysite.s3.amazonaws.com/profile.png (expiration not specified) http://mysite.s3.amazonaws.com/circle.player.css (expiration not specified) http://mysite.s3.amazonaws.com/main.js (expiration not specified) http://mysite.s3.amazonaws.com/not.the.skin.css (expiration not specified) http://cdn-images.mailchimp.com/embedcode/slim-321711.css (expiration not specified)

I'm guessing the mailchimp files can't be modified. But how do I specify a browser cache for Amazon S3 Cloudfront files?

Improve this question

3 Answers 3

Reset to default
29

Via Amazon Management Console, select your file (or folder).

enter image description here

Go to the Properties tab and click on Metadata.

enter image description here

Finally, add Cache-Control to its header and save.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Manually? One by one? What if you have thousands of files? What if you want to update these values?
Then you should definitely use the AWS CLI: docs.aws.amazon.com/cli/latest/reference/s3
you can add this to an entire folder in a bucket and it'll update all the contained objects
don't forget to also add the Expires header
Expires header is ignored if max-age is set. Source: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires
12

You can specify header parameter with the s3cmd! while uploading files to s3.

eg :

s3cmd sync LOCAL_DIRECTORY s3://BUCKET[/PREFIX] --add-header=Cache-Control:max-age=3153600
Improve this answer

1 Comment

It may be worth mentioning that this is also possible using AWS CLI Tool's S3 Command: aws s3 sync $LOCAL s3://$REMOTE --cache-control "max-age=3153600"
8

When you store files to s3. You can set custom headers which will be send to the client. In this case, you can set an Expires header for your files.

Cloudfront works a little bit differently as it depends on your origin.

Improve this answer

5 Comments

There are two consoles: S3 Management Console, which is the useful one and Cloudfront console. Can you say how the header is set in one of these? I don't see any place for header info.
For s3 files you would go to properties -> metadata section for each file you want to update. Cloudfront takes headers from the origin.
Thanks. Are there any examples of what key/value should be used to control browsing caching?
There are a couple you could look at. Expires takes a date, usually a far future one. However, if you make changes, you will likely need to version the filename. Otherwise returning users may keep the old version. Other headers to look at are Cache-Control and Last-Modified
Manually? One by one? What if you have thousands of files? What if you want to update these values?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.