How to use browser caching with Amazon S3?

Question

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?

Answer 1

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

---

Go to the Properties tab and click on Metadata.

---

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

Answer 2

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

Answer 3

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.

Answer 4

I just got lucky with this question. Actually, when uploading files in Bucket you should see SET DETAILS in the upload window.

Click it and go through it. You'd end up with an option to SET METADATA for the files.

There are other ways too. This might help you.