Setting up caching

✔️ Tag: Caching settings

The caching setting allows the browser to download pages once and store them in the cache. Each subsequent time the server does not have to re-process the same data and send it to the user. The browser has already "remembered" the necessary elements, and will display them almost immediately, without using additional traffic.

When websites load, a lot of files need to be loaded every time: HTML pages, CSS styles, JavaScript scripts, images, and other resources. This takes time and reduces site performance. However, by setting up caching, you can significantly speed up the loading of the site and improve its usability.

What is caching and how does it work?

Caching is the process of temporarily storing data. Which helps to reduce server load and speed up page loading. When a user opens the site, their browser downloads all the necessary resources and stores them on the local device. In the future, the next time you visit the site. The browser can load data from the cache, which greatly speeds up the loading process.

How to properly set up caching?

To set up caching, you must set the correct parameters in the HTTP response header of the server. In the header, you can specify the time for which you want to save resources in the browser or server cache. As well as caching settings for specific types of resources. It is also important to remember to update the cache when resources on the server change.

What are the types of caching?

There are two types of caching: client-side and server-side. Client-side caching occurs on the user side, and server-side caching occurs on the server side. When properly configured for both types of caching, you can significantly reduce page load time and reduce server load.

How to improve caching efficiency?

You can use the following methods to improve caching efficiency. For example, such as resource compression, minimization and merging of files, use of CDN. These methods help to reduce the size of downloaded resources and improve download speed.

Browser cache

The browser is an important tool for us to work on the Internet. So that we can surf the Internet smoothly, it will also help us cache pages, basically storing data. Which are not very sensitive in real time, such as product detail pages, ratings, reviews, promotional words, etc. For data with high real-time requirements, browser caching cannot be used. The browser cache has an expiration date and we can manage it. For example, controlling the response header Expires and Cache-control.

Client cache

Client side caching is easy to understand, which means it is stored in a cache on the client side. In addition, some resulting data or style files will also be stored in the client cache. To ensure that the application does not crash when the server or network is abnormal.

CDN caching

CDN (content delivery network), content distribution network. It is a distributed network consisting of groups of edge node servers distributed in different regions, installed and covered in a carrier network. We usually store some static page data, active pages, images, and other data in a CDN cache. There are two CDN caching mechanisms: push mechanism (actively sending data to CDN nodes after content changes). And also, the pull mechanism (first access to the CDN nodes, returning data from the origin server and saving the CDN nodes in the absence of data).

Local cache

Local cache generally refers to sharing a portion of the client's local physical memory to buffer data written back to the server by the client. From a global point of view, we can have "disk cache", "CPU cache", "application cache". "Disk cache" is divided into read cache and write cache. The read cache means that the operating system stores the read data of a file in memory space. When the memory is relatively free (this memory space is called the "memory pool"). When the software or user reads the same file again next time.

You no longer need to read data from the disk again, which increases speed. The write cache actually stores the data to be written to disk in the memory space allocated by the system for the write cache. When the data stored in the memory pool reaches a certain level, the data is saved to the hard disk.

Setting caching of static elements (usually CSS, JS, images). The required HTTP headers must be sent for these elements.

Note that this has nothing to do with your HTML page: CSS/JS/images are retrieved using different HTTP requests - one for each resource.

What you need to do is configure the webserver to send HTTP headers. To indicate that the browser should cache these elements.

Typically, when using Apache, you will use mod_expires.

Setting up caching is an important element of website optimization. Properly configured caching can reduce page load time and improve the user experience of the site. However, it is important to remember that incorrect caching settings can lead to bugs and slow performance.

⟹ The following are materials covering this topic: