I get a lot of consulting gigs having to do with Google Page Speed – basically an assessment on how fast a website loads on a browser. You might be curious why this is important if you haven’t worked with SEO or Web Development. The thing is you don’t even need to be a techie to know why this is so crucial in almost every aspect of running an online business.
I remember working for a start up back in the 90s and being part of a meeting having to do with this subject. I barely knew how to write some HTML back in those days, I was such a noob. Anyway, back in those days SEO was still really finding its place in terms of job title.
Alright – went off tangent there. So the greatest variable in visitor engagement isn’t the UI, it’s bells and whistles nor is it an awesome product or service. It’s Page Speed. Hey, if you’re site loads like a big glob of molasses – then what’s the point. A slow network would make it even worse
So Google Page Speed is in huge demand right now.
Yeah, there is way too much to cover in one post so I’m going to focus on this one:
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.
Yeah, what’s this all about. If you’re an advanced developer, this is a piece of cake when it comes to translating this in laymens terms. So let’s break it down.
Expiry Date or Maximum Age
So you know when you visit any random site for a second time or in a frequent manner, it just seems to load faster than some other sites? Well this because everything about the (data, components, elements) is saved onto your computer. So the next time you visit the site, your local browser knows. It’s for of like recalling a past event you are familiar with.
So how do we set this kind of recall or familiarization in the eyes of your browser or computer?
Well we have to dig in deep into the matrix – yeah I call it the matrix. What I mean is your .htaccess file.
The .htaccess File
It looks exactly like it says and can be found in your root directory, except you’ll find a “.” prepended before the file name. This is a server file that your server communicates with.
Here’s the magic recipe
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ##
So if you don’t update your images much you could set them to expire after 1 year. That’s what “access 1 year” means. And “access 1 month” – yeah you guessed it, this file type will expire in 1 month. So if you got some javascript that isn’t updated much you can set these to any desired period of time to expire. This is pretty cool, it gives you control over your sites assets and it improves user experience. This is good for your business.
Something super important to note – you can only set expiry’s on files that sit on your server.
This is something that I learned after some research. No one really really makes mention of this in a blog or forum post. So you can’t set an expiry date on a file that’s sitting on a CDN (content delivery network). Yeah this makes everyone a bit sad – makes me, the project manager and the client a bit bummed because this is all you have to report. You have to man up and explain this tech stuff and say look we can’t cache those URLs. All you gotta do is show them this post and you’re gravy.