Caching is a specific tool used to improve the performance of a site. One important aspect of improved performance is quicker loading times – the holy grail of websites! Quicker site loading leads to happier users, happier search engine benchmarks and ultimately improved sales.
Complex sites and speed
Modern websites are built to be dynamic. Instead of a static site that is fixed and can’t be changed without changing the core code, dynamic site like those that are built using WordPress can change in many circumstances. The dynamic bit means that without changing code you can edit a page and change the text in the footer, save and see that result. It is the power behind page builders, themes, plugins and all of those incredible components we use everyday.
This is all incredible and vital to running a modern business online but also has the impact that every time a visitor accesses your website, the server that runs the website has to do a lot of heavy lifting to put those components together. A bit like Lego it has to get the header block, body content block, footer block, menu, image blocks etc. and then combine them all before sending them across the internet to your computer where it is downloaded and displayed. The more components, the longer it takes.
Caching – the best of dynamic and static websites combined
What if instead of having to build the Lego masterpiece each time, you built it once, stored it in a separate box and then the next person who asked for that masterpiece didn’t have to wait for you to build it because it had already been constructed?
Welcome to the power of caching.
Server caching – Static files from dynamic files
When you activate caching for the first time the server still has to build the website like it did as if there was no caching involved. The benefit comes to every visitor from then on. The server stores the fully built page in the cached memory and displays this to anyone else who asks.
This is far quicker and also puts less load on the server. You are instantly improving how well your server could perform under pressure and speeding up the site for every user from then on.
Local Caching
Local caching, or browser caching, is slightly different to server caching. When your server cached page is sent through the internet your browser then downloads that page and all of the images and other assets that make the page work before displaying it. Where a page could be about kilobytes in size, a single image could easily be larger than that.
Browser caching means that the first time anyone visits your page, everything is downloaded to the computer and then stored. This would mean that the next time they visit the page only the cached page has to be downloaded and all the other assets like images can just be loaded from your local cache without any downloading again!
Object Caching
Object caching is a type of server caching but instead of caching an entire page only certain components are cached. The benefit of this can be seen on modern websites where every page might share a single footer design.
If that footer was cached as part of a full page then only that page would benefit. If you cached the footer on its own as an object then every page that uses the same footer would benefit from the cached footer regardless of where it was originally cached from. This is incredibly powerful and works far better in a lot of cases than full page caching. The downside is that improperly implemented object caching can break sites more easily than full page caching.
Combining files into one
Websites are made up of multiple files that make them work. A page might contain the code that makes it work plus the multiple CSS or styling files that make it look the way it does alongside some Javascript files which could add some fun functionality to the page.
When you visit a site we have to download those files and then save them to the local browser cache. Combining all those files into a single style file and a single Javascript file can lead to much more efficient transfer of data.
It is important to note that traditionally loading multiple files from a server would lead to slower sites while the computer downloaded each file one at a time. This isn’t necessarily the case on modern sites that use HTTP/2 where multiple files can be downloaded simultaneously.
Potential issues with caching
Caching is incredibly powerful and is one of the best ways to improve the performance of your website. That being said, there are a few things that can happen when implementing caching that might seem like issues. First, we need to understand that the benefits of caching far outweigh the issues that will follow.
Changed content
What happens if I change the content on my page after it has been cached? Quite rightly this could lead to the changed content being ignored and the old content still showing up. There are numerous techniques that caching systems use to help with this and techniques you may have come across in the past.
Have you ever been told to “force refresh”, press “control + f5” or “command + shift + r” in your browser? These techniques all refer to reloading a site without the local cached files and to instead download fresh copies from the web server.
Another thing you might see is a delay in content showing up to end users. This often happens when caching systems periodically check for changed content and then rebuild the cache as needed. The benefit of this is that the server will automatically update the content over time. It also has the benefit that if you save a page in WordPress multiple times in a few minutes that the cache isn’t rebuilt every time which can happen if you choose to rebuild the cache every time content changes.
Broken Pages
Sometimes when you change parts of your theme or add or remove a new plugin this can actually break your page when using caching. This is often because the cached page relied on something that you’ve changed and as a result you get broken pages.
Usually caching systems allow you to forcibly clear the cache and rebuild it. This should generally fix the issue. If you still have issues after clearing the server cache, the issue might be because a locally cached version of a changed file is causing a conflict. The browser cache will usually refresh itself after a period of time which can vary greatly from site to site. A good developer should be able to take most types of caching into account when building new functionality to prevent this from causing issues when new code is released.
Summary
Caching is incredibly powerful and is easily one of the most important tools available to improve the speed and performance of your website. When used correctly it can make your site feel like it’s been installed on a premium server.
Whether you have managed hosting that comes with caching included or intend to implement caching on a non-managed host it is worth thinking about the best way to achieve the best results.