Faster Asset Loading With Cache-Control
My side project (Virtual Playbill) is an image-heavy application, and I used YSlow to find a few quick performance wins. The first ‘F’ I got was for No Expires Headers:
What is an Expires Header?
When a web server receives a request it adds some metadata to the response in the form of HTTP headers. Headers are key-value pairs that tell the browser information about the file it has received, such as how big it is (
Content-Length), what kind it is (
Content-Type), and how long the browser should cache the response (
In the case of Virtual Playbill, all the images are served from AWS Simple Storage Service (S3), and there are a couple of ways to add headers.
1. Tedious Manual Addition
You can add headers manually to a single asset stored in S3 using the metadata section:
But I have more than a hundred files to change (yawn).
2. Write a Nodejs Script using
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
Still.. I don’t want to have to run this script every time I upload a new file (yawn)…
3. Add Headers Every Time You Upload
1 2 3 4 5 6 7 8 9 10 11 12
No matter how you add the Cache-Control header, the result is amazing:
For more information about HTTP headers and the browser cache, check out these useful resources: