At FatLab, our web hosting offering provides clients several types of caching to aid in website performance.
What is Website Caching
Caching is where we save a web page to memory to retrieve it quicker than if the server has to process each request.
Processing a web page is difficult, especially when working with a CMS like WordPress. Each time a visitor to your site requests a page, a series of events needs to happen, and each of these takes time.
Now granted, we are talking milliseconds here, but they add up, and the final result is that a site visitor could be waiting several seconds, or worse, many seconds, for a web page to render within their browser fully.
What Happens When a Web Page is Requested
In a super simplistic mode, when a user requests a page from a website, the following things have to happen:
- The request has to be recognized, but the server
- A look-up has to be done to see if what is being requested is available on the server. Assuming that the request is good and the server has the requested resources, then the real work begins.
- The server will begin to process the page, going through each line of markup.
- Some stuff will be sent directly to the browser, such as HTML and text.
- Some stuff will require that database queries be run; this may pull images, text, and more markup, all of this then needs to be processed, and the results must be sent to the user’s browser.
- Other files need to be gathered, such as Javascript files, style sheets, and images - these need to be sent to the user’s browser.
A single web page could have hundreds if not thousands of things; it must process before the user receives everything they need to see a web page.
Oh, and we are not done yet. Remember step 6 above, where other files are gathered, such as images, style sheets, and javascript?
Each of those has to be downloaded by the user and processed by their browser. Some of these might not even be hosted on the same server, and therefore the user’s browser now must make connections to multiple servers all over the globe to render a single web page.
Caching to the Rescue
To speed this up, we use caching. So instead of making the server work so hard for every request, caching is s method by which we run this process once and then save the results to memory.
Awesome right? The entire page is no longer “processed” but sent in whole to the user’s browser, and now all they have to do is download things like images, javascript, and style sheets; we even have caching methods for those, but we won’t go into that right now.
Caching to the Rescue: TLDR
So, in short, caching allows us to run the slower process of putting the whole web page together and sending it to the visitor’s browser only once; then, for future requests, send an already processed copy from memory…. Fast.
How Typical Caching Works (WordPress)
Server-level Caching
This is where the processed page is stored in memory for super quick retrieval without doing all the stuff I described above. There are several technologies used for this, such as Memcache or Varnish.
Page Caching
This is where a processed page is stored on the hard drive as HTML, ready to be sent to the user (or to server-level caching) when requested.
Page Caching and Server-Level Caching Working Together
These typically work in tandem. In the case of WordPress, a plugin will typically create the page cache before a user even requests it; this way, it is already processed and sitting there wing to jump into action when requested.
Server-level caching then holds copies of these pages after they have been requested.
Full-Page Edge Caching
Becoming more widely available, though has been around for many years, is full-page edge caching offered by Cloudflare and other CDN providers.
Full-Page edge caching is when the cached version of the page HTML is stored on the CDN instead of using the server. This can greatly increase performance because it utilizes a CDN to deliver the webpage and only occasionally requests it from the main web server.
This means for the bulk of the traffic to any given page, all the assets are being delivered from high-speed optimized servers around the globe and not just the primary web server, which can rarely compete in terms of performance.
Caching Efficiency
There is also some cool stuff that goes on here; for example, at the server level, caching is managed by the server’s memory, so it holds the most requested pages and may drop a seldom requested page from memory.
This means it is constantly cycling the cached pages for the most efficiency. Popular pages are quick, while less popular pages may take just a few milliseconds longer. The more traffic a site gets, the more efficient this becomes.
The Advantages of Website Caching
The advantages should be clear now; the server doesn’t have to work as hard to create a webpage and send it to the visitor’s browser, so it loads more quickly.
A quicker web page keeps your attention on a website, and Google and other search engines even reward faster sites/pages with higher rankings.
A faster website feels better to the end user, we are an impatient species, and the smoothness of a fast-loading website cannot be denied.
The Challenges Website Caching
Can you see the problem here? I just told you that we process the page once, save it to memory, and then send that copy repeatedly.
But what if the content changed? The power of using a CMS like WordPress is that it allows website owners to change content quickly.
What good is it if you change content, important content, and the server is still sending out old copies of a web page without the latest/greatest content? It’s not good at all, and in fact, it can be very frustrating. We call this a “stale” cache.
Clear the Cache, Duh… Maybe
The obvious answer to the challenge is to clear the cache, but that might not be as easy as it sounds.
Above, I mentioned that we often use more than one type of caching; this means a copy of any web page may reside in multiple places, meaning they all have to be cleared.
In the case of page caching in WordPress, the page cache is typically cleared each and every time a page is saved, then there are (or should be) processes in place that send a signal to the server-level caching to also clear that same page from memory so it can be reprocessed.
This isn’t always the case, though, and it’s frustrating when content does not seem to update.
There are also situations, like news posts, for example, where even if caching is working on the individual post, meaning the system clears all caches each time it is updated, that same news post may be listed in multiple places on the website.
For example, a home page with an “Our Latest News” section lists news posts. Changes to the individual post may not update the home page because it has its own cached copy.
Solving the Challenges of Caching
As someone who supports websites, I think educating clients on why we use caching is essential.
Everyone seems obsessed with page speed these days, and explaining that caching is a major part of performance usually justifies it.
However, that doesn’t always curtail the frustration when clients make rapid changes to web pages, and people report that they can’t see them.
As I stated earlier, caching will typically be cleared for each updated page, but it may not clear the cache for all pages in the site. This is typically solved by a function allowing the entire cache to be cleared manually… a button that sometimes says “clear cache.”
The catch here is that the site administrator must remember to push this button after making site changes, which can be tough to do.
Wrapping it up
Caching is a great performance tool that helps improve the user expense of visitors to any site; it also aids in search engine rankings. However, a trade-off may include extra steps for content administrators.
