Web caching is a group of technologies that help websites load faster by temporarily storing part or all of the data that makes up a web page. Caching cuts down on the complex and time consuming operations necessary to prepare and download web page files onto your computer by storing the results of these processes. When the same web page is loaded again the results can be quickly retrieved. Just which part of the process the cache stores depends on what type of cache it is. There are many different types.

As pages on the website are modified, the content in the cache will eventually become outdated or ‘stale’. Therefore, an essential function of a caching system is to discard old content and refresh itself with current content. This process requires careful configuration to ensure data is not discarded too soon, nor too late.

Caching Types

Caching systems can be roughly divided into HTTP caching and in-app caching. In-app caching speeds up the tasks undertaken by the server to prepare the web page and is fully integrated into the server code. HTTP caching takes place after the server has finished, storing the web page files produced by the server.

In-App Caching

In dynamic websites, the ‘app’ is software written in a server scripting language like PHP. The engines which execute this code often have built in caching systems. On top of this, the software itself can be complex enough to justify having its own internal caching systems. These caches are called in-app caches because they are an integral part of the applications they are speeding up. In-app caches are stored in the server’s random access memory (RAM). Some examples of in-app caching which operate on a LAMP server are described below.

• We use a module for PHP called OpCache to speed up the execution of the PHP code. OpCache converts human readable PHP code into machine code and stores the translation in a cache. Without OpCache, this translation must take place on every web page load.
• MySQL execution can be sped up by the MySQL query cache. With this turned on, the result of a database query is stored in a cache. When this exact query is repeated, the result is reused from the cache, rather than performing the database query again.
• The WordPress content management system has its own internal methods for caching available to savvy web developers. One example is the function get_posts() which retrieves blog post data by querying the database. When run for the first time, WordPress runs the database query and caches the result. When the function is run again WordPress checks the cache before performing a computationally expensive database query. WordPress has several other internal caching methods which you can read about at this Smashing Magazine article and WP Beginner article.

HTTP Caching

While in-app caching speeds up internal server processes, HTTP caching saves the server from having to do any work at all. When the server finishes creating a web page, the final result is stored in the HTTP cache so it can be retrieved without processing the page on the server again. When the page is revisited the HTTP cache fulfils the request in place of the server.

HTTP caching can be divided into browser caching and server caching. Browser caching takes place on a website visitor’s computer, while server caching takes place on the server delivering the website. Both types of HTTP caching can and should be used at the same time.

Browser Caching

The browser cache is created and maintained by the web browser and is stored on the visitor’s computer. Browser caching is most commonly used to store resource files such as:

• static HTML pages
• Images
• JavaScript files
• CSS stylesheets
• Fonts

These files can be downloaded once and reused from the disk drive, which speeds up subsequent visits to the website.

Web developers cannot control the browser cache as it works from the visitor’s computer. What we can do is provide the browser with snippets of code to tell the browser how long to cache a file before discarding it. Once discarded, the browser will re-download the updated file which keeps the content fresh.

Server Caching

While browser caching cuts down on the amount of downloading required, server caching cuts down on the amount of server processing required. Server caching improves the page load speed for the end user, and also cuts down on the amount of memory the server uses. This allows your server to handle the same amount of traffic with slower hardware. Unlike browser caching, we control every aspect of the server cache. We are also entirely responsible for implementing it.

Pages where users enter sensitive personal data and frequently changing dynamic content should not be cached. If sensitive data like a credit card number is cached it can be read by anyone. Dynamic content such as an eCommerce shopping cart will misfire if cached as the cache will not update in time to show the correct items in the cart. Thankfully, we can write code for these website features which tells the caching system to leave them well alone.

It should also be noted that server caching doesn’t have to take place on the actual server of the website. Cached content can be delivered by other servers. The additional servers simply refer to the ‘master’ server from time to time to refresh their caches. This is basically how a content delivery network works.

Caching WordPress Websites

WordPress has several plugins for caching content. The most popular ones include

• W3 Total Cache
• WP Rocket
• WP Super Cache

These plugins operate at the software level. Some hosting companies such as WP Engine implement their own proprietary caching systems on their servers. These systems operate at the server level and hence usually perform better than caching plugins.

You can read more about caching at:

• Digital Ocean web caching article
• Winning WP website caching article
• Fideloper caching blog post