“Leverage browser caching”

I was looking at Google Pagespeed Insights results today for my website today. And I got this feedback:

Leverage browser caching

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Leverage browser caching for the following cacheable resources:

Then there was a list of resources that are static that could use this caching.

So I look and see, it’s mostly images. My site is now very image heavy.

I do a lookup to see what the current headers look like for a particular image:

artlung$ curl -X HEAD -i https://artlung.com/blog/wp-content/uploads/2018/02/feature-smiley-500x498.jpeg
Warning: Setting custom HTTP method to HEAD with -X/--request may not work the
Warning: way you want. Consider using -I/--head instead.
HTTP/1.1 200 OK
Date: Thu, 01 Mar 2018 15:07:15 GMT
Server: Apache/2.4.29
Last-Modified: Tue, 27 Feb 2018 15:19:04 GMT
ETag: "2255-56633259f7a31"
Accept-Ranges: bytes
Content-Length: 8789
Content-Type: image/jpeg

My website is hosted on Apache, and because I’m on a shared host the way to add HTTP headers is to add them via .htaccess. I could do this for all manner of resources, but images is what I’m comfortable changing right now. So I add some Apache configuration. I need ExpiresByType for each image Mimetype and ExpiresActive to turn it on. And the whole thing to be set only IfModule mod_expires.c is available. It’s a standard module, typically though.

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# All Images
ExpiresByType image/x-icon "access plus 2 days"
ExpiresByType image/gif "access plus 2 days"
ExpiresByType image/png "access plus 2 days"
ExpiresByType image/jpg "access plus 2 days"
ExpiresByType image/jpeg "access plus 2 days"
</IfModule>

Easy enough. After this change, here’s what the headers send back:

HTTP/1.1 200 OK
Date: Thu, 01 Mar 2018 15:09:56 GMT
Server: Apache/2.4.29
Last-Modified: Tue, 27 Feb 2018 15:19:04 GMT
ETag: "2255-56633259f7a31"
Accept-Ranges: bytes
Content-Length: 8789
Cache-Control: max-age=172800
Expires: Sat, 03 Mar 2018 15:09:56 GMT
Content-Type: image/jpeg

Note the addition of Cache-Control and Expires headers because of the configuration change I made. Note that those changes went into effect immediately because that’s how Apache is configured.

This is a nice change and now Google PageSpeed no longer squawks about images not having expiry headers sent, and repeat visitors may have some of my images in cache. This is a nice change.

I could add this for JavaScript and CSS files as well, and I may for sites which change less, but I’ve been doing so much development on this site right now I’d rather not.

Read more:

1. Google Pagespeed Insights
2. ExpiresActive
3. ExpiresByType