How to fix leverage browser caching error in GTmetrix

Erfan Internet August 3, 2022

One of the common errors that we encounter when testing site speed with GTmetrix is displayed as leverage browser caching in GTmetrix, which is related to the site’s cache. As it can be understood from the literal meaning of this error, it is to control the power of cache penetration in the browser. That is, manage the files of the site in such a way that you choose the best type of cache for all types of extensions on the site to be cached in the browser.

This tutorial from Hostfa’s knowledge base going to address how to fix the leverage browser caching error in GTmetrix; by using this tutorial, you can get to know the correct structure of the server cache and optimally use the site server cache to improve the site speed.

What is cache? How many types of cache do we have?

As I explained in the Specify a cache validator and Configure entity tags troubleshooting, the caching process is a request that is exchanged between the server and the browser under HTTP, and it specifies which files are cached for how long. Cache-Control specifies the duration of caching using Expires and the process that checks each visit to see if any changes have been made to the files. These two items are actually requested that are executed in the header and finally specify the Cache Length status.

The two headers Cache-Control, which is used to determine the expiration time and takes into account the time in seconds for cache files to expire, and Expires, which is used to determine the expiration date and is selected based on a precise time, specify that a file How long should it be kept as a cache in the browser and if you do not specify this situation, you will encounter the Leverage browser caching error. It is not necessary to use these two requests in the header, but you must use at least one of them to specify the cache status on the server for the browser. Using both options can be useful and take a step forward to improve site speed.

What is the difference between Expires header and Cache-Control?

As it is clear from the meaning of the Expires header type, first, a date is specified in the browser by the HTTP header for the expiration date of the cache, and until that date the browser continues to read the cached files from the system memory and display them to the user. But as soon as the desired date passes and expires, it again sends a request to the server to read the files to update the files in its memory, and this time it receives an expiration date from the server, which until then It should be cached in its memory. This is done with the following code example by the htaccess file. is done

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

In this case, the output you will receive will be something similar to the image below.

But in the Cache-Control method, we have more control over the cache, and in addition to determining the duration, we can also specify the desired method for the cache. In this case, if a file is determined to remain in the cache memory for 1 month, this file will be loaded from the browser’s memory instead of requesting it from the server for one month and as soon as a month has passed, it will request it from the server again and wait. The server’s response remains. In this case, when you visit other pages, and that file is used in other pages, gtmetrix will behave the same way. This process continues cyclically until the time expires and requests the file from the server again and the file is displayed in the cached form again based on the set time. In this case, it can be said that the following code will be executed.

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Let’s check this code together.

The first line: This line does not include the command and is only a series of explanations before executing the commands inside the htaccess file. mentioned.
Second line: In this line, our command is started, and then a series of file formats including css, jpg, jpeg, png, gif, js, and ico are specified, which means that the following commands must be used for this The type of files should be applied.
Third line: This line contains commands that must be executed for files with the specified formats in the second line. In this line, using the Header set Cache-Control, it is specified that this request is in the form of HTTP, and it is responsible for executing a command for Cache-Control, which command is that for max-age=2592000 seconds, these files must be stored in the memory. Cache the browser. This period is specified in seconds, equal to one month here. In the end, the word public is used, which indicates that the cache is applied to all users who will enter this site.
The fourth line: This line is the end of the execution of commands.