Caching Basics

There are several types of caching, each of which is different from the others and useful in different circumstances. So it’s essential to comprehend the kinds of data they store and the levels of control they provide you.

In this article, we’ll discuss different types of web cache in detail, how they work, and their differences. Then we’ll look at various types of content that can be cached and how you can cache your WordPress site in the most efficient way possible!

What Are The Caching Types?

There are two types of caching options you can go with:

  1. Server-side Caching
  2. Client-side Caching

Although both of them cache your website differently but has one similar goal:
Making your website load blazing fast without loading the entire site files again.

What’s Server-Side Caching?

Server-side caching temporarily stores web files and data on the server for later use, effectively reducing the server’s load and latency.

Here’s how it works:

  1. When the user visits a website and requests the web page, the website retrieves data from the server, generates that webpage, and displays it to the user.
  2. After the response has been sent back to the user, the server creates a copy of the webpage and stores it as a cache.

The result?
The next time a user revisits the website, instead of going through the whole process again, it displays the already saved (or cached) copy of the webpage – thus making the website load faster!

Illustration of how server-side caching works – Source: Medium

What’s Client-Side Caching?

Client-side caching, often called browser caching, temporarily stores the copy of a webpage in the browser’s memory (a folder created by the browser).

So, the next time a user revisits a website with client-side caching enabled, it won’t make a call to the server for the data. Instead, it will fetch it from the browser cache folder located on the user’s device.

Illustration of how client-side caching works – Source: Medium

What is Page Cache (or Site Cache)?

Page cache, also known as HTTP or site cache, temporarily stores the content on your website the first time you visit it.

So the next time you visit that website, it fetches the stored data from the page cache to display static web content faster than it would with a new request.

In addition to that:

All the data is stored in the server’s hard disk or memory (RAM), and you, as a website owner, can determine how much time a file stays in the page (site) cache.

If elements of your website are static, you can set a file’s expiry date for longer. However, dynamic elements of a website have much shorter expiry dates.

What is Browser Cache?

Browser cache stores cached versions of the specific web pages a user browses. It is built into your web browser – enabling the website to load faster in order to provide you with a better user experience.

Browser caches work by temporarily saving copies of a website’s files, such as:

  • HTML pages
  • Multimedia content and images
  • CSS stylesheets
  • JavaScript scripts

When the user revisits your website, their browser will fetch the cached files and use them to assemble your website’s content to create a smooth browsing experience.

What is Server Cache?

Server cache is also the type of web caching over which the end users don’t have any control and is fully administered by the server.
This type of cache is mainly used to reduce server loads.

Server cache can be considered an umbrella term for many types of caches. The most common are:

  • Object cache – stores database queries in a server-side cache for quick retrieval and prompter page loading without querying the database repeatedly.
  • Opcode cache – store precompiled PHP code for speedier execution.

What is Proxy Cache?

Proxy cache stores content on the proxy server, allowing web services to share those resources with more users. The proxy server coordinates with the origin server to cache website data such as files, images, and web pages.

When a user opens a web page, the proxy checks whether it has a recent copy of that web page and its assets. If a copy exists, it immediately displays that web page or resource to the user.

Once a proxy updates a web page, it resets the webpage’s expiration date to prevent it from being labeled as outdated.

Page Cache vs. Browser Cache vs. Server Cache vs. Proxy Cache

Now that we know about each type of cache – let’s understand the differences between them:

Page Cache (or Site Cache):

  • Saves content like web pages, images, text, etc.
  • Serves content much quicker after the first visit.
  • Ideal for websites with static content.

Browser Cache:

  • Stores limited data types like HTML pages, CSS stylesheets, JavaScript scripts, Images, and other multimedia files.
  • Controlled by the user’s browser.

Server Cache:

  • Saves content, code, queries, and similar data on a server.
  • Administered by website owners without any input from end-users.
  • Best for high-traffic websites that need to reduce server strain.

Proxy Cache:

  • Allows web services to share resources with multiple users.
  • Saves bandwidth and decreases the loading time.

What Content Can Be Cached?

Files that can be cached but rarely cached include:

  • Pages with dynamic content
  • Ajax/REST requests if their cache is purged

Files that are frequently cached and should be cached include:

  • Static images
  • Logos and assets
  • CSS stylesheets
  • Downloadable files or other content

Files that should not be cached include:

  • Dynamic content, or in simpler terms, personalized data using conditions to be displayed
  • Any sensitive data (such as credit card information)

Caching with WP Rocket

WP Rocket is the most beginner-friendly and easiest plugin to quickly improve your WordPress website’s speed and performance!

Here’s how it works: It caches your web pages by creating static HTML files and making them readily available for future visits. In addition, it applies browser caching, requesting the browser to save the frequently used but rarely updated files in its local cache memory.

One of the things which makes it the best caching plugin for WordPress is that when you install WP Rocket on your WordPress site and activate it, it automatically applies 80% of web performance best practices right away!

Wrapping up

The boost in the performance of your website after implementing caching is simply irresistible. If done right, it can unlock a whole new level of user experience, search engine rankings, and revenue by optimizing your WordPress site for performance.