Website caching and full-page caching are techniques to speed up the load time of websites. It is a very common practice that is used almost everywhere because of the massive gains it brings to website performance. Caching works by making the webserver much more efficient at doing its job. Full-page caching is a more advanced form of caching so to understand full-page caching let’s begin with normal caching and build from there.
Joe’s Auto-Parts Shop – A Static Web Site
Imagine Joe. He’s a guy that owns and runs a large warehouse full of car parts. At the front of the warehouse is a counter where customers arrive to buy his parts. When a customer arrives to buy some parts the transaction follows this procedure:
- The customer hands Joe a list of car parts.
- Joe fetches the 1st part and puts it on the counter.
- Joe fetches the 2nd part and puts it on the counter.
- And so on until the end of the list.
- The customer pays and leaves.
So how does this apply to a static website?
A static website is one that does not use any databases, PHP scripts, or any other programs. Think of a simple website that is only HTML pages and images. Joe and his warehouse represent the parts of this simple website like this:
- The warehouse is the physical server.
- Joe is the webserver software e.g. Apache
- The car parts are the files that make up a website e.g. images and HTML files.
The procedure for serving this simple site is:
- A browser requests a web page from Apache running on the server.
- Apache reads the 1st file from the disk and sends it to the browser.
- Apache reads the 2nd file from the disk and sends it to the browser.
- And so on until it has fetched everything.
- The browser displays the completed webpage.
This setup works fine for small websites but quickly fails under pressure.
Joe Gets Busy – Caching Saves The Day
Joe’s system works well until he starts to get busy. So busy in fact that he is spending most of his time walking from the counter and into the warehouse that and he can’t keep up with all the new customers.
Joe could buy an extra warehouse and employ someone else to work there to meet the extra demand. But this is costly and doesn’t maximize the resources he already has. Instead, Joe thinks about how he could make his process more efficient in the warehouse he has.
Joe realizes that 90% of the parts he is fetching for customers are one of only 10. So he decides to keep those 10 parts under the counter where he can grab them straight away when someone asks for them. He can now serve the majority of customer requests straight from the counter without a trip into the warehouse. This is much faster.
Caching does something very similar on a webserver. Just like Joe’s walk back into the warehouse, the slowest action when serving static files is loading the file from the storage device. What caching does is to keep the most frequently requested files in RAM where they can be accessed thousands of times faster than reading them from storage.
This type of caching works great for images and other static files but WordPress is a dynamic website with PHP scripts and database.
Enter full-page caching.
Joe’s Life Gets Complicated – PHP, Databases, and Caching
A new Toyota workshop opens in the same town as Joe and they use Joe to supply the spare parts. This is great for Joe except for one problem, Toyota only order parts by their Toyota part number. They give Joe a huge catalog so he can look up the Toyota part numbers and match them to the parts in his warehouse whenever he receives an order from them.
But this makes Joe slow again.
Anytime he has to look up the Toyota part in the catalog it takes him a long time. Even if it’s one of the parts under the counter he can’t just reach for it because he first has to lookup the Toyota part number in the catalog. His old system of keeping the 10 most requested parts under the counter is still helping but the new catalog lookups are now the big bottleneck.
Joe thinks about this again and comes up with a solution. He notices that most of the Toyota orders are one of only a small group. So he writes out a cheat sheet of the most common Toyota part numbers and their corresponding parts and he tapes it to the countertop.
Now he doesn’t need to use the catalog for most of the Toyota orders, he can glance at the cheatsheet and convert the Toyota part number almost instantly into a part he can fetch.
WordPress sites have a similar problem to Joe. WordPress builds every webpage when it is requested by the browser. The HTML pages that your browser loads don’t exist until you ask WordPress for them.
This is how WordPress creates a page of your site:
- A browser requests a web page from WordPress.
- A PHP script accepts the request and queries the database for what it needs to build the page.
- The database looks up and returns all the information to the PHP process.
- The PHP script builds the page with that information and sends it to the browser.
This is a lot of work and is the reason that non-cached WordPress websites need many times more computer resources than static websites.
Just like Joe, your WordPress site receives requests for the same pages very often, such as the landing page for your site as this page gets served every time a new visitor arrives. In a non-caches setup, WordPress has to process this request with PHP scrips and make database queries for every visitor even though it creates the exact same page every time.
This makes for a great deal of duplicated work.
Full-page caching solves this problem. It notices that a certain request and the page that gets generated are always the same so it caches a copy of the page in RAM. It also keeps a cheat sheet of the requests that created those pages so when a visitor requests a page that it generated before it serves it directly from RAM rather than re-create it.
This significantly reduces the workload of the webserver by bypassing many PHP processes and database lookups and by serving previously generated pages directly from RAM. This can give you a dynamic WordPress website that is almost as efficient as a static website.
Caching and full-page caching are superb technologies that leverage the resources of your webserver to maximize the efficiency of your webserver and give you a snappy WordPress site.