By using site services you agree to our Cookies Use. We and our partners operate globally and use cookies, including for analytics, personalisation, and ads.Accept
X

Caching


Caching is the function of your browser to save previously downloaded files. For example, when you re-enter a page in Instagram, your browser will download photos from the computer's memory. In this way, it saves time on reloading files. It is very important to configure the software of your server for proper caching. Thanks to the caching:

  1. The pages of your site will load faster.
  2. Search engines will give your site a preference.

Users spend the same amount of time on each website. If you speed up your site, users will have the time to look for more pages.

Caching headers


Next, we'll look at how the caching system works. If you are not a technical specialist, it may be difficult for you to understand this block.
Caching is implemented by correctly sending a request and response headers from the user's browser to your server and on the go.
Each header has its own meaning.

The headers "Expires" or "cache-control" with the parameters "max-age" or "s-maxage" are sent by the server and say: that this file will be relevant for a certain time. Browsers do not re-download the file for a certain time, but take it from the computer's memory. The "Last-Modified" header is sent by the server and reports the last modification date of the file. When the file will be requested again, the browser sends the "If-Modified-Since" header containing a files last modification time. The server compare the last modification time of the file with the date which the browser sent. Then the server either says that the file has not been changed, or it send an updated file. This saves time on downloading the file. Unlike the headers "Expires" or "cache-control", a second request is still made.

The "ETag" header sends the server and reports an unique identifier corresponding to the current version of the file. If the contents of the file will change, then this identifier will change too. When browser want to re-load this file, he sends the "If-None-Match" header with the given identifier. The server determines whether the file has changed and either says that the file has not been changed, or sends the contents of the file to the browser.

Next, we describe the basic caching setting for popular web servers.

Confgurate apache

You need to install and enable the mod_expires module.
Next, specify the settings in the virtual host file or in the .htaccess file.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 5 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 216000 seconds"
    ExpiresByType application/javascript "access plus 216000 seconds"
    ExpiresByType application/x-javascript "access plus 216000 seconds"
</IfModule>

<IfModule mod_headers.c>
    Header set Cache-Control "public"
</IfModule>

FileETag MTime Size

Confgurate nginx

These settings need to be entered in the nginx virtual host file:

# Media: images, icons, video, audio, HTC location
~ \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    add_header Cache-Control "public";
    etag on;
}
# CSS and Javascript location
~ \.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public";
    etag on;
}