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?
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
- Grab a copy of CloudBerry Explorer, install and open it.
- 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.
- 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
- 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.
- Click the OK button. after which, wait for a moment for the Cache header to be processed.
- 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.
Using Amazon CORS Configuration
Another way of specifying cache for s3 images is the use of Cross-Origin Resource Sharing(CORS) Configuration for Bucket using the MaxAgeSeconds Element. set it to the duration of cache in seconds. say you want to cache the images for a month, the below CORS configuration should work.
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>2592000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
Navigate to your bucket properties, under permission, click on Edit CORS Configuration, copy and save the above code in the textarea.
- Another option to consider is the use of this PHP script by Lalit to upload and set HTTP headers.
Aside, Bucket and Cloudberry explorer, there is S3 Browser a freeware Windows client for Amazon S3 and Amazon CloudFront.
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.