Browser caching is a technique for speeding up your website by asking the browser to store or "cache" static files for a period of time so they don't have to be downloaded again on subsequent visits. That's all there is to it in a nutshell.
In this tutorial we will learn how to add expires header in Cloudflare which basically tells browser how long it should cache the static resources.
What is Browser Caching?
Caching is the process of storing data in a cache. A cache is nothing more than a temporary storing space for data.
Advantages of Caching
Web pages can be pre-fetched and cached on clients, proxies, and servers. Online caching has a number of advantages, including enhanced web performance.
- Caching lowers bandwidth consumption, lowers network traffic, and reduces network congestion.
- For two reasons, caching reduces access latency:
- a) Frequently visited documents are retrieved from a local proxy cache rather than from faraway data servers, reducing transmission delays.
- b) Because caching reduces network traffic, documents that are not cached can be retrieved much faster than they would be without it, thanks to decreased congestion along the path and lower server workload.
- By distributing data among proxy caches across the WAN, caching minimises the workload of the distant web server.
- The client can acquire a cached copy at the proxy if the remote server is unavailable due to a crash or network partitioning. As a result, the Web service's robustness is improved.
How Browser Caching Works?
An explanation of how browser caching works is shown in the graphic below.
The web server gathers data from a website and sends it to the browser window. Depending on whether the visitor is a first-time visitor or has already visited the site, caching is performed.
Let's have a look at these two examples to see how caching works.
Case 1: A first-time user
The graphic below depicts a circumstance in which a person is visiting a website for the first time.
The web browser collects data from the web server when you access a website for the first time. This is due to the fact that the online resources have not yet been cached. The internet browser will then save the online resources in a cache so that you can have a better experience the next time you visit the website.
Case 2: The user had already visited the website.
This case scenario is depicted in the graphic below.
The above visualization implies that the information is current. The term "fresh content" refers to stuff that has not yet expired and can be retrieved from the cache. Stale material is content that has passed its cache expiration date and can only be obtained from the web server.
Analyze your site using GTMetrix
You may have noticed the error "Add Expires headers" if you used GTmetrix to assess your site.
How to check up on caching header in your browser?
The response headers are used by browser caching. The browser sends 'request headers' with each HTTP request, and the server responds with 'response headers' and the data.
The server specifies a response header called 'cache-control' that tells the browser how much to cache the files (in seconds).
Click on the three dot (kebab menu) on the top right of your chrome browser
Click on More tools -> developer tools
In Network -> js , you will find the required folders.
Open the jquery file and click Header to observe the cache control.
As you can see, the cache files are instantaneously loaded from drive or memory (RAM).
Browser caching allows you to do the following:
- Server load should be reduced.
- Reduce the time it takes for a page to load
- Cut your bandwidth costs.
How to Enable Browser Caching using Cloudflare (Add Expires Headers Cloudflare)?
If you use Cloudflare, you can easily add expire headers to each request with just two clicks and no plugins.
Go to Cloudflare dashboard
Enter your domain
Click on Caching -> Configuration from the left hand side menu
Scroll down to "Browser Cache TTL" and change the duration accordingly
It will be set to 4 hours by default. Change it to something that lasts longer than two months, and you're done!
Browser caching is a strategy for improving up your website by instructing the browser to save or "cache" files for a set length of time so that they wouldn't have to be retrieved again on multiple visits. In a nutshell, that's all there is to it.