Ultimate Guide For Setting Cache On Amazon s3 Static Files

I have been working hard to improve this blog loading speed and overall site performance. one of the method adopted was to move all my blog media files majority of which are images to my Amazon S3 bucket. which in turn are distributed by Cloudflare CDN.

Afterward, i did some testing using Google PageSpeed Insights and GTmetrix Website Speed and Performance Optimization tools. Performance score for the former was ranging from 68 – 80 and that of the latter was page speed of 84% and YSlow 64%

One of the contributing factor to this low performance score was due to the absent of expiry date or a maximum age in the HTTP headers for my static resources especially images served from Amazon S3. Unlike the images served by my main web host, the images over at Amazon weren’t getting served with any expires headers at all. Below are screenshot of Google PageSpeed Insights and GTmetrix Performance result spotting caching absent.

What is browser caching?

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images. Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.
This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.

Why cache Amazon S3 images

• Reduction in Amazon S3 Bill – One of the criteria use by Amazon s3 in calculating your bill is the number of GET request to your files. though it relatively cheap, if you run a high traffic site, those little cent per GET request can quickly accumulate. setting caching will reduce the number of request to images in your s3 bucket which in turn significantly reduce your bill.
• Fast website loading speed – Aside the reduction in bill, it also significantly increase website loading speed.
  Say you set cache control Header for s3 images to expire in 3 months time. when a user visit your website, the static images are downloaded from Amazon S3 servers and get saved inside his browser’s cache. if that person is to visit your site, rather than download the images again, the browser uses the images it has cached.

To fully understand the concept of caching, i suggest your read Caching Tutorial by Mark Nottingham.

Setting cache for Amazon s3 Images

Reading Google pageSpeed insights on leverage browser caching, Google said they prefer Expires (for example “Expires, Fri, 30 Oct 1998 14:19:41 GMT”) over Cache-Control: max-age (for example “Cache-Control: max-age=3600”) because it is more widely supported.

• The use of Amazon s3 third-party applications

  After some frantic Googling, i stumbled on Bucket Explorer with a comprehensive tutorial on How to Set Cache Control Header for Amazon S3 Object. though it has lots of cool s3 feature, i was put off because it wasn’t free. i wasn’t ready to spend $69.99. this led me to searching for a freeware and eventually settled for CloudBerry Explorer Freeware.

  How to set s3 HTTP headers via CloudBerry Explorer

  1. Grab a copy of CloudBerry Explorer, install and open it.
  2. Next is adding your Amazon S3 account. click on File -> Amazon S3, Add a display name of your choice followed by your s3 Access and Secrete keys.
     
  3. Say you want to set cache for all images in a given bucket or folder, navigate to the bucket, right-click and select Set HTTP Headers
     
  4. Click on the Add button, in Http Header, select either Cache-Control or Expires. mind you, Google recommend we use latter, though the former is OK.

     if you chose Cache-Control, specify in seconds, when the cache should last. say we want the images to be cache for one month (60x60x24x30) which is 2592000 secs.
     

     if you chose Expires, specify the Date and time you want the cache to expire.

     

  5. Click the OK button. after which, wait for a moment for the Cache header to be processed.
  6. To confirm if it works, navigate to any image in your bucket, repeat step 3 to view the image HTTP header or use this nifty HTTP header checker tool.
     

Aside, Bucket and Cloudberry explorer, there is S3 Browser a freeware Windows client for Amazon S3 and Amazon CloudFront.

• Another option to consider is the use of this PHP script by Lalit to upload and set HTTP headers.

If you have any contribution as regard setting up HTTP headers for Amazon s3 static resources, or you have a question to add, feel free to drop a comment, we’ll love to hear from you.