When a visitor comes to your site the first time, the static images are downloaded from Amazon S3 servers and get saved inside his browser’s cache.
Now if that same person visits your site again sometime in future, his browser will make another GET request to Amazon S3 asking for a fresh copy of the web images.
Since the images stored on Amazon S3 haven’t changed since his last visit, Amazon servers will return a 304 Not Modified header response indicating that there’s no need to download images again.
So far so good. That 304 response prevented the visitor’s browser from downloading the same data again (thus saving you money) but there’s another problem – Amazon S3 also charges you for every GET request so each time a browser asks Amazon if images have changed since last visit, that question itself adds to your bill even if the answer is “no”.
While the cost for GET requests is small (just 1 ¢ per 10,000 requests), they can quickly add-up if you have have a popular site or if your website design uses too many images. For instance, every page on www.labnol.org has about 25 static images served from S3.
To control this cost, you need a mechanism that will prevent browsers from sending the GET request if the file already exists in their cache. This can be easily done by setting appropriate Cache-Control and Expires headers at the time of uploading the files on to Amazon S3.
Cache-Control is like instructing the browser whether to make any requests to Amazon S3 or not before a given period. So if you set
Cache-Control max-age=864000 for your S3 images, the web browsers will not request that file from S3 storage until the next 10 days (
Other than saving money, your site will also load relatively faster because the visitor’s browser will reuse images, logos and other static files from the cache without making any new request to Amazon S3.
To set the appropriate Cache-Control headers for files hosted on Amazon S3, you can either use the Bucket Explorer client (cost $50) or upload files manually via this PHP script written by Lalit Patel who is also the inspiration behind this article.
Before: <link href="http://files.labnol.org/main.css?v=2" ../> After: <link href="http://files.labnol.org/main.css?v=3" ../>
Change the version from 2 to 3 and visitors browser will make a fresh GET request to Amazon S3 for the latest version of the S3 file.