What is website caching?

If you’ve visited a website previously and then return to the same website the chances are that the subsequent times you visit the website after the first visit, it will load much faster. This is because of caching.

So what is website caching?

Caching is the process of storing copies of website files in a cache or temporary storage location, so that future requests for that data can be served faster. Both web browsers such as Google Chrome or Firefox and the webserver make a cache to ensure the website performs faster.

If you’re implementing caching properly your website visitors will not only love the faster experience but with this improved performance comes with improved conversions. A conversion, for example, is an online sale, a booking confirmation, a lead generation request or a general enquiry, depending on the website and what they’re selling.

Types of Web Caching

Caching consists of two different types: browser caching and server caching.

1. Browser Caching

Browser caching, which is also called client-side caching, is where the web browser application performs caching processes.

How it works is that when you visit a website, the web browser doesn’t just need to retrieve all the content on the page that you are seeing, like images and text, it also needs to download a bunch of other things (resources), such as Javascript files, CSS (Cascading Style Sheets), fonts, etc.

Browser caching works in a clever way by storing many of these resources/files for a time period (which can be configured), so that they don’t need to be downloaded again when someone visits your website for a subsequent time.

This means that the first time someone visits a website it will be slightly slower(we’re talking seconds here) as the web browser is requesting and downloading these needed resources. The next time that same person hops onto your site there will be a distinct decrease in load time, meaning that the site will load faster.

2. Server Caching

Websites and web applications are hosted on servers. On these servers, we can also take advantage of technologies and settings to setup server caching.

Server caching is another technique to make your website or web application faster. Server caching can be more complex to set up and configure than web browser caching.

In a nutshell, this is how it works: when website visitors request to view a specific page on a website, the webserver then processes this request. After the first request is completed by any user, the server will then remember this request so that next time it gets the same request it can deliver the same result or data to the website and much faster.

Benefits of caching

The clear benefit of caching is that we’re able to provide users with a faster loading website and provide the user with a great user experience where they don’t need to wait for the website to load.

This applies to websites that are loaded both on desktop devices and mobile devices such as mobile phones and tablets.

Another big benefit that many people overlook or aren’t aware of is that search engines such as Google and Bing also give preference to websites that load really quickly when it comes to ranking higher Search Engine Results Pages. The improved speed contributes to your improved SEO score of your website. This can be crucial to obtaining higher traffic to your website and ultimately better conversions and more money to your bottom line.

Is caching effective?

Many people ask us about the effectiveness of caching and if it should be implemented on their website.

The aim of caching is to speed up your website and reduce load speeds, for both your website visitors and search engines. This is a clear advantage and therefore yes, caching is definitely effective. The shaved offloading time can have a direct impact on your website’s performance, especially with heavy traffic loads and improve your SEO rankings.

It’s important to remember, caching needs to be implemented correctly and properly for it to be effective. Applying caching rules on the web browser or implementing caching technology on the server in the wrong way can also be counterproductive and detrimental to your website and business. Only experienced web developers should be trusted with the implementation of caching solutions on websites and web applications.

Are there any downsides to caching?

If the website goes through a lot of changes then there is a chance that the user will see the old version instead of the updates. With client-side caching the browser might load an old version of the CSS, Javascript or images. What we do to get around this is to append a query string after the filename which is normally used to pass extra information to pages. So this tricks the browser in thinking that it’s a different file and loads it.

For example:

/css/style.css?v=2

Anything after the question mark is the query string. Putting any random text after it would work as long as the end URL looks different:

So “/css/style.css” is not the same as “/css/style.css?v=2” and the browser will load the updated style.css file.

Alternatively, the user will have to do a cache refresh (ctrl+f5 on windows) or wait for the cache to eventually expire.

Server-side caching all depends on how it’s implemented and where it’s stored. It might take a script to clear the cache, deleting a folder on the file server or clearing a database table. If the website is on a CDN then you have to use that service’s control panel to force each endpoint to update with the latest files and clear the cache.

When should caching NOT be used?

There’s no reason not to use client-side caching because why redownload the images, CSS and Javascript if it’s going to remain the same?

Server-side validation, on the other hand, means you have dynamic content and you want to be careful what exactly you cache. You could be caching complex statistics and graph data that only change once a month. This could take several minutes to generate, which you don’t want your user to wait for, caching this makes sense.

But what if that data is updated frequently then caching the end result is not an option because some users will see the outdated results. In this scenario, caching isn’t the solution and you’ll have to find a different way to present this to the user.

We’ve seen in different projects that we’ve taken over that many inexperienced developers rely on server-side caching far too often. This is because they can’t efficiently write queries and source code to solve the problems, but turn to cache the data on the server to make it load faster (but not correctly).

But what if my content changes?

We know what you may be thinking: caching has many benefits to make my website load in a super-fast response time, but what if I have caching enabled and I publish new items or my content changes, then what? Will these new changes not be cached and therefore not unseen to website visitors? Don’t worry! Caching systems that are set up properly are able to deal with these types of scenarios. Not only does caching systems consist of ways to store data for speedy display but they are also capable of emptying the cache when certain criteria are met. The cache can then be regenerated once the cache has been emptied.

Last but not least…

Caching is a very sophisticated technology that increases the speed in which your website or web application can load, without requiring additional processing power. Implementation of caching can be tricky and needs to be done properly. Once done it will result in faster load times and reduce the strain on your server.

A faster website or web app means that your users will love browsing around and Search Engines will also appreciate this loading speed, giving you a boost on your SEO score.

If you’re wanting to make your website load faster through caching but don’t know how? We can help!

Don't forget to share this post!
About
Having been established in 2005, in Cape Town, South Africa, Elemental is primarily focused on providing web development services and digital marketing campaigns.