If you’ve visited a website previously and then returned 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 web server 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 improved conversions. A conversion, for example, is an online sale, a booking confirmation, a lead generation request, or a general inquiry, depending on the website and what they’re selling.
Types of web caching
Back in the early days of the Internet, when terms like “surfing the net” were cool, and before the invention of devices like smartphones, believe it or not, things were quite different in the land of URL structures (I know who would’ve thought!).
When people used to use web browsers like Netscape Navigator and Internet Explorer (yuck!), there were no slugs in URLs. Almost all URLs were ugly and not user-friendly at all. The use of “GET parameters”, also known as query strings, was the flavour of the day. If you don’t know what GET parameters are, don’t worry, as luckily they’ve been almost entirely eliminated.
Essentially, GET parameters are a bunch of variables that are embedded in a URL’s structure to request certain data and resources to load that page.
For example:
Old school method using GET parameters
https://www.elemental.co.za/our-work/?projectID=8afdj28ak
Vs
Modern URLs using slugs:
https://www.elemental.co.za/our-work/heineken-mobile-web-app-development
Using slugs makes the URL much sleeker and easier to read and understand. It also describes what the page is about, which is a huge improvement compared to old school GET parameters. There are other benefits from an SEO point of view, but we’ll discuss more on that later.
So we’ve mostly transitioned away from these very encrypted-looking URLs to more wordy slugs, but why should you care, you may ask? Good question! We’ll reveal this below.
The complex structure of urls and slugs
Caching consists of two different types: browser caching and server caching.
- 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.
- 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 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 on both 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 the improved SEO score of your website. This can be crucial to obtaining higher traffic to your website and, ultimately, better conversions and more money for 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 that caching needs to be implemented correctly and properly for it to be effective. Applying caching rules to 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 into thinking that it’s a different file and loading 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 looked 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, delete a folder on the file server, or clear 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 re-download the images, CSS and Javascript if they’re 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 they can 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 make content changes? Will these new changes not be cached and therefore not unseen by website visitors? Don’t worry! Caching systems that are set up properly are able to deal with these types of scenarios. Not only do 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 it has been emptied.
Last, but not least…
Caching is a very sophisticated technology that increases the speed at 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 to your SEO score.
