What is Caching for the Web and the Types of Caching

Among the various aspects to improve the website’s performance, caching is one of them. For sites, the caching happens at the server level, Internet service provider level as well as browser caching.

With this in mind, I will try to explain each caching type and method in a very layman’s term.

Before we get into the technical details, let’s see the internet definition of caching.

Defenition of Caching

Here are the definitions of the cache

Amazon AWS

In computing, a cache is a high-speed data storage layer which stores a subset of data, typically transient in nature, so that future requests for that data are served up faster than is possible by accessing the data’s primary storage location. Caching allows you to efficiently reuse previously retrieved or computed data.

Cloudflare

Caching is the process of storing copies of files in a cache, or temporary storage location so that they can be accessed more quickly. Technically, a cache is any temporary storage location for copies of files or data, but usually, the term is used in reference to Internet technologies.

First thing first, the above descriptions are too technical. Let me explain caching with an example

Caching Example

A teacher in her math class asks the students – What is 6,18,958 multiplied by 4689? The class goes into silence. The calculation is complex, and it will take some time. Some pulled out calculators and started computing. It took a few seconds, but finally, after some time, a student shouts.

It’s 2,902,294,062.

The teacher again repeated the same question to the class. What’s 6,18,958 multiplied by 4689?. This time students already had an answer. It took no time for the entire class to shout 2,902,294,062.

When the teacher asked the question for the first time, the answer came late. Why? Because the students didn’t know the answer, and they were busy in the calculation. Even though students had calculators, it took a few seconds to process the data and grab the solution.

Now when the same question asked for the second time, the answer was prompt. This time students didn’t calculate. They already had an answer. Either they wrote the solution on a paper, or it was still on their calculator. Whatever the reason may be, but it concludes that second time the answer popped wit a lightning speed.

If the teacher had asked the same question repeatedly, the answer would have come much faster. To conclude, the time-consuming process of calculation was done in the first round. After that, the answer was ready and delivered at lightning speed.

The same applies to the context of caching.

When a user visits your site for the first time, the data process between server and browser takes time. The same user, if visits again, your website will load much fast compared to the first time because it is fetching the output from a cache.

Types of Web Caching

The cache is further divided into three types:

1. DNS cache
2. Browser cache
3. Server cache

Again, each of the above caches can have sub-caching. Let us look into each of them in detail.

What is DNS Cache?

A DNS cache is a way for computers to store the domain name to the IP address of the sites visited.

So for any website you visit, the computer stores the domain name to IP address for the site. Your computer does it along with the computers in the network, including the Internet service providers computer.

Let us understand the same from the above example of the students doing the calculations.

When the teacher asked them a difficult mathematical calculation, the students thought about the calculator and found a way to get the calculator out.

What if students kept the calculators handy before the teacher asking the question? The students were more likely to answer the question much faster.

The process of finding the calculator is similar to the DNS cache.

When a request to Google.com for the first time, it doesn’t know the IP address for the domain. It then requests the IP address for the domain. Once it has the IP, it then keeps the domain to the IP table for some time before asking again.

Each subsequent request to Google doesn’t need the domain name to IP requests and uses the cache to get the IP address.

Similarly, if subsequent calculative questions by the teacher won’t require the time to take calculators out.

What is a Browser Cache?

A browser cache is to store a lot of elements of the web page into the user’s browser. It is a built-in cache system in a browser. Every browser has a browser cache.

Browser cache stores the data intelligently and invalidates them based on the value it gets from the server to cache for a specific amount of time. It then scraps the old content and saves the new one.

The end-user can also manually clear out their browser’s cache whenever they want.

Here’s a list of content a browser cache can store:

• HTML pages
• CSS stylesheets
• JavaScript scripts
• Images
• Other multimedia content

So when one views more than one page from the same website, the CSS stylesheets, JavaScript, Images may not be fetched on the second page of the site and can be cached by the browser from the first page itself.

For our calculator example, one can say the cache is the answer the student’s brain remembers. So instead of using the calculator or any other tool, the student can answer from his or her memory. Similarly, when viewing a large image on the web page, in the second instance, the browser shows the image from its memory, aka cache stored in the local computer than fetching it from the server, making it very quick to load.

What is the Server Cache?

In server-side caching, the data is stored on the site’s server instead of on the user end. Unlike browser cache, the server cache is the same for every user and is stored on the server.

A web page consists of many elements like CSS, Images, Scripts. Moreover, they all are tied together on the server using the codes, files, databases, objects.

CSS, Images, Scripts are cached on the browser end, but they can also be served from a CDN or Cloud. It is known as CDN Caching.

Similarly, the code to render the page can be cached. As an example, the article that you are currently reading is in the database.

WordPress can fetch the content of the article and form the complete page. However, instead of using querying the database and building the page for each time, one can cache the database retrieval process to speed things up. It is known as database caching.

After fetching the raw data from the database, there are many operations performed on the data. Instead of performing the same activities each time, one can cache them using opcode caching.

There are many types of caching that comes into picture when we are dealing with server-side cache:

• Object caching
• CDN caching
• Opcode caching

In our calculator example, the caching process used by the calculator to perform the calculation faster can be equivalent to server-side caching.

Caching in WordPress

When you have a cache plugin installed in WordPress, it provides fast answers between the browser and the server. The plugin imitates your website and responds quickly to the user. However, the process is way much complex than said.

I prefer and recommend WP Rocket to all my clients who want to speed up their WordPress.

For server-side caching in WordPress, plugins even cache the whole of an HTML page. When a web page is loaded for the first time, the page is cached. So every next visitor sees the cached page instead of building the same page using the code again and again.