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.

When a page is requested by a user, a web server will assemble the page from several locations to gather database information and page structure information before sending it back to the user in the form of a complete web page. The user’s browser then processes the page and requests any of the assets required to display it correctly; including style sheets, javascript, images, fonts etc.

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.

Browser Caching

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.

An Example

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!