Back in March last year I wrote a blog post about website page speed loading and how it was increasingly a ranking factor for search engines.
A year on from that post, website page speed loading has become an even more important aspect of optimising for search engine traffic.
Did you know that a 1 second delay in your page loading could reduce your page views by 11% and can reduce your conversion rate by up to 7%?
There are many aspects that control how fast a website page loads and some of these were covered in my post last year but in this one, I wanted to discuss the idea of caching and“expires headers” which can make a big difference to how Google and other search engines view your site.
What is a cache?
You may have heard the tale of Captain Scott of the Antarctic and the famous quote of his companion Lawrence Oates:
“I am just going outside and may be some time”
before disappearing out into a blizzard never to return. You may not know, however, that Captain Scott (who died 29th March 1912) and his group had been stuck due to the poor conditions only a mere 11 miles from a cache of food which may have saved them.
Henry Bowers (1883 – 1912) [Public Domain]
The word “cache” is a 19th Century word derived from the French “Cacher” meaning “to hide” (source) it means a “collection of items of the same type stored in a hidden or inaccessible place” it is sometimes used to refer to a hidden cache of food or weaponry but in modern times you are most likely to hear it in the context of computing where it refers to a collection of files, programme instructions or data held for fast retrieval by the computer system.
People are generally most familiar with the word when it is used to refer to a web browser cache and it is this that I am going to talk more about here.
The Browser Cache Thingamajig
When you type a website URL (domain name) into your browser’s address bar, the first thing that the browser must do is look up the IP address to locate the files and data for the website that it refers to.
This is done by referencing a DNS (Domain Name System) server that “resolves ” that URL and points the browser to the correct location of the website files. Your browser then sends a request to the web server saying“ I want the files, images and scripts for this webpage please” (not in quite so many words) and the web server will then start sending these to the browser.
Browsers are clever though and if you have visited this particular web page before, it might still have some of the files, scripts and images stored in its cache. It is far quicker to load these up from a local store than to request and download them from the web server. Loading the files from the web server requires the browser and server to talk to each other which takes time and relies on the speed and latency in the connection between them. Therefore, if a browser has the files locally, it will not download them again from the web server before loading the web page up and displaying it to the user.
You may have experienced the effects of this yourself – have you ever been speaking to somebody on the phone or via Skype or a similar service talking about a website that you and the other person are both looking at only to realise that one of you is seeing different information?
“Try clearing your browser cache”
is often the solution that is suggested in these situations and for good reason because you may be seeing files and data stored in your browser’s cache rather than the latest version that resides on the web server.
“Those that do not remember the past are condemned to repeat it”
said George Santayana and at the time he probably wasn’t thinking about browser caching but it leads nicely on to me talking about the need for the currency of information.
What if your browser is storing images, data and instructions from a web page that are no longer up to date? The information has changed on the web server but the version that the user is shown in the browser window is different and now out of date?
This can cause a problem just as big, if not bigger, than that of slow loading web pages so what can we do about it? What we can do is set some rules for the lifespan of different types of file or data that will be stored by the browser in its cache.
For example, if we specify that certain elements, say *.png images, have a lifespan of 1 week before they are likely to change, then the browser will know that if it has .png images from a particular webpage that are more than 1 week old, it will need to load them again from the web server. Similarly, if the .png images in the browser cache are less than the specified 1 week old, the browser knows it can use the faster option of loading up the locally stored copies.
It is a balancing act between webpage speed through caching and the currency of the webpage and if no lifespan is specified for an element of a webpage it could potentially be kept in the browser cache and used over and over until such time as you clear that cache.
If you are still with me at this point and not yet thinking about wandering off into the nearest blizzard never to return… then read on for an explanation of Expires Headers.
How to Use Expires Headers
Put simply, expires headers tell the browser whether they should download a specific file from the server or whether they should load it from the browser’s cache. You can use these to specify a rule for individual files or for types of files. The idea is that if a browser and server know the lifespan of a particular type of file, they then have to talk to each other less in order to render the complete web page. The fewer requests that a browser has to make (and the fewer responses required from the server), the faster the web page can load up. Specifying a caching policy for the elements of a website is sometimes referred to as leveraging the browser cache.
The rules are specified in your htaccess file which resides on the web server and is one of the first things that will be read when a browser requests a webpage. They should be written in the format below:
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg”accessplus 1 year”
ExpiresByType image/gif”accessplus 1 year”
ExpiresByType image/png”accessplus 1 year”
ExpiresByType image/webp”accessplus 1 year”
ExpiresByType image/svg+xml”accessplus 1 year”
ExpiresByType image/x-icon”accessplus 1 year”
# Video
ExpiresByType video/mp4″accessplus 1 year”
ExpiresByType video/mpeg”accessplus 1 year”
# CSS, JavaScript
ExpiresByType text/css”accessplus 1 month”
ExpiresByType text/javascript”accessplus 1 month”
ExpiresByType application/javascript”accessplus 1 month”
# Others
ExpiresByType application/pdf”accessplus 1 month”
ExpiresByType application/x-shockwave-flash”accessplus 1 month”
</IfModule>
This example shows images being given a lifespan of 1 year and javascript files a lifespan of 1 month.
Be very careful if you edit your htaccess file because it is very easy to take your whole website down if you make a mistake!
Proper use of expires headers can reduce the number of requests that a browser must make to load up any given web page and they help to ensure that the user is seeing the most up to date version of that web page. Search engines prefer sites that have properly defined Expires Headers rules over those that do not because, in general, those with the rules specified will load up quicker(ina like for like comparison).
Have you leveraged browser caching for your website? It is a simple case of placing code similar to the above example into your htaccess file (or asking your web developer to do so on your behalf). In fact, the above code will work for most websites and can be copied and pasted into your htaccess file – just adjust the lifespan of each type of file to suit the frequency with which they will change on your website.
Not yet convinced that the merits of page speed are worth the effort? Why not have a look at this excellent infographic from our friends over at Hosting Tribunal.
