One of the key indicators of whether your site will do well in Google search results, is your site’s speed.
The faster your site is able to load, the better Google will rank you.
Why you might ask? Well Google’s reasoning is that a reader is eager to get to the answer they are looking for. If Google sends a reader to your site, they want to make sure that the reader will get the answer as quickly as possible.
A tool that Google provides developers is PageSpeed Insights.
The tool is super simple to use. You type in the URL of a web page you’re working on and it returns a score of how Google thinks it’ll perform on either a mobile or desktop devices for readers.
The score is broken down by several different metrics. I won’t be going into the details of the metrics in this article. Instead, I just wanted to highlight a single metric that I want to address in this article—static asset cache policy.
Image are hosted on AWS S3
While my site is hosted on Netlify, the images are hosted in a public AWS S3 bucket. The reason for this is my site has been a static site for a very long time.
To store images or assets in the Git repo and have it regenerated every time a build is kicked off is a bit too intense.
As such, I’ve chosen to put all my images on an Amazon S3 bucket and this allows me to easily take my site and host it on different hosting providers while the assets are in the same place.
What does setting a cache policy do?
When a reader visits your site, the server—in this case AWS S3—can tell the reader’s browser how long it should temporarily store a static asset such as an image.
The benefit of this is, the next time the reader visits your site, your page will load up much faster because instead of fetching the asset again from the server, it can retrieve it from its cache.
How do I add a cache policy to an asset on AWS S3?
According to Google, to set the cache policy of an asset you’ll want to,
Configure your server to return the
Cache-ControlHTTP response header
The value you’ll want to set the Cache-Control to will be max-age= with a value in seconds.
So the final header response would look something like this,
Cache-Control: max-age=31536000
31536000 being the equivalent to a year in seconds,
60 seconds * 60 minutes * 24 hours * 365 days = 31536000
Google suggests that you should, “cache immutable static assets for a long time, such as a year or longer”.
Which translates to if you’ve got an image or something that rarely changes, then cache it for a very long time like a year or longer. This might be a company logo or a portrait image of yourself on your about page.
Navigate to the asset you’d like to add a cache policy to
In the AWS console, navigate to S3, then select the bucket in which has the resource you’d like to add the cache policy to.
Select the asset by clicking on the name.
Add the cache policy to the properties
Once your asset is selected, click on the Properties tab.
You’ll be present with several properties, but you’ll want to select the Metadata property.
Doing so will expand the Metadata property which will allow you to edit the assets Metadata. You’ll want to select the Add Metadata link.
You’ll be presented with a dropdown of the various Metadata options. Selecting the dropdown you should see Cache-Control as the first option. Select Cache-Control and then another field beside it will appear.
Here you’ll define the value of max-age=. Remember this value is defined in seconds.
Once you’ve provided a value, you’ll want to click the Save button to update the asset with the new Metadata.
Congrats! Now you’ve set a cache policy to a static asset hosted on AWS S3.
You might see a slight bump in PageSpeed Insights score
Once you’re done setting a cache policy to each of the static assets for a page on your site, you can head back to PageSpeed Insights to recheck your site’s page performance.
You might see a slight bump in your score.
I did after setting the policy, but to be honest, it wasn’t that much of a bump. I checked a few different times and there was a few instances where the number actually dropped. So I would take the score with a grain of salt.
I think the best rule of thumb when using this tool as an assessment to your website, is to keep in mind what sort of tweaks you can make to enhance the readers’ experience. Don’t fall prey to tweaking for the sake of squeezing out every last bit of bump in the score.
Instead use your energy and time continuing to write valuable things for your readers and publishing consistently to your site.