Often overlooked in the final stages of a web development, caching involves pre-compiling pages and assets with the goal of keeping the web-server as idle as possible, having to do less work in order to deliver a page to a user, thereby (often dramatically) speeding up load times.
Let’s take a look at several common caching techniques and compare some of the common metrics between cached and non-cached pages.
There are two places in this process where we can save the resulting data to help speed things up the next time it’s requested: after the page is created (object caching) and when assets arrive to the user (browser caching).
Page / Object Caching
Page caching works by storing the compiled page in quickly accessed RAM, a web server running an object cache will remain effectively idle when serving a page that’s been cached. One of the commonly used pieces of caching software is Memcached.
Memcached is a distributed memory caching system which helps to speed up database driven websites such as all WordPress powered websites. Memcached speeds up these websites by caching database requests and objects into RAM to be rapidly served to users rather than making constant requests to the database. Memcached was developed for use on the popular blogging system LiveJournal but has since been adopted by the likes of Facebook, YouTube & Wikipedia in order to reduce their resource usage and optimise the delivery of their website to users.
The browser cache is another temporary storage location to help websites load faster. A website will indicate to your web browser to store static files such as images and style sheets in it’s own cache so if you ever browse the website or another page from the site again in the future all static elements are already in your web browser so you don’t have to download them again.
When the website indicates to the browser that it needs to store a certain image in it’s cache it will also provide an expiry time for this image so that if the image changes in the future the old version will get replaced.
This is why when changes are made to your website you will be told to clear your cache in order to see the changes as some of these files can be stored for a considerable time and you will need to manually expire them in the cache. We will use varying caching lengths for different assets and different websites dependent on the frequency in which they will need to be updated.
As a demonstration we turned off both object and browser caching on one of our recent more complex client websites, Linear Consulting. Then we ran the Google page speed insights tool to get a basic overview of the performance decrease. The results are obvious, caching has improved the score of the website considerably.
Does caching have you thinking? Contact us to chat all things web design!