How to use the Cache-Control HTTP header

How to use the Cache-Control HTTP header

Colleagues hello to all.

In today's article, we'll talk about how to enable the Cache-Control HTTP header on your site, and why you should use it in your sites.

Every time a user visits your site, first the browser sends a request to the web server, then the web server processes the incoming parameters if any, then the web server can also access the database to get the necessary information and only then the Apache or Nginx web server generates a response, and sends the result to the user in the browser. Receiving very large data from the server requires a lot of data exchange between the user's browser and the server, and the page won't load until all resources with the data are fully received.

All these actions that I described to you,  this is a very expensive pleasure today, especially if a person from a mobile network with a limited amount of traffic came to your site, & nbsp; for him, every unnecessary network request is a waste of money. Another very important argument why you should use the Cache-Control header is that your site will load faster for those users who have recently visited your site, and thus there will be less load on your web server.

 

Cache-Control — refers to  HTTP headers, this header indicates that data that comes from the server needs to be cache by the user's browser, Cache-Control will cache both in client requests and web server responses. The Cache-Control policy includes how the resource is cached, where it is cached, and the maximum age before expiration of the data lifetime.

The heading Cache-Control is divided into directives, the most common ones I will describe later in the article.

 

Header example Cache-control.

http set cache-control


 

Cache-Control: Max-Age

The max-age directive indicates the maximum time during which the resource will be considered up-to-date, specified in seconds. After the expiration date, the browser will re-send the request to the server to get up-to-date data.

For example, specifying the header cache-control: max-age=240 means that the resource is valid for 240 seconds, after which the browser will resubmit the request to get the actual data page.

 

Cache-Control: No-Cache

The no-cache directive instructs you to resubmit the request to the server to validate the page before using the page's cached data.

 

Cache-Control: No Store

The no-cache directive tells the browser that the data it receives from the server do not cache. This use case is suitable usually for confidential data such as the username and password of the user and bank cards.

 

Cache Control: Public

The Public directive specifies that the server's response may be cached in any cache.

 

Cache Control: Private

The Private directive specifies that the response is for a single user only and should not be placed in a shared cache. For example, a server response to a page marked as private might be cached by the user's browser, but not by the CDN.


 

In order for us to set the HTTP header Cache-Control on the site using php, we need to use a special function that is designed to set HTTP headers, and it is called header(). You need to go to the page you want to cache and add this function to the very top of the php file.

header("Cache-Control: max-age=3600");

http set cache-control

With this example, I'm indicating that I want the main page to be able to be cached in the user's browser for one hour. Don't forget that the time must be specified in seconds.


 

If your site does not use the php language, but only html itself, then for such cases we can use the html  meta tag.

<meta http-equiv="Cache-Control" content="public, max-age=3600" />

http set cache-control

Here, the important point is that the  Cache-Control header must be specified in the body of the head tag, and not anywhere else.


 

As a result of our colleague, today we got acquainted with a very important thing as the Cache-Control HTTP header. There are a lot of different directives in this header, but I showed you the most common ones that you will 100% use on your sites. This header is generally used together with such headers as Last-Modified and If-Modified-Since, but about These headlines I will cover in other articles.

Thank you all, I hope that my article helped you in some way.

 

SIMILAR ARTICLES

jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB
Read more
Zoom blowup.js - Zoom blowup plugin with magnifying glass
Zoom blowup.js - Zoom blowup plugin with magnifying glass
WEB
Read more
jQuery Zoom - Image magnifier glass effect
jQuery Zoom - Image magnifier glass effect
WEB
Read more