Analyzing the report of the website using Pingdom, GTmetrix, or Google PageSpeed Insights is common. But the problem arises when we are trying to fix the warnings. One of the warnings in the performance report is "Specify a cache validator" which landed you on this article.
This article will surely quench your thirst for the solution you are looking for.
Point to be noted.
Before starting, there is something you need to know that is, you can only fix this if request are on your server. But if you are using a 3rd party request then you are unable to control their web servers. In this case you are free to share the article link with the concerned party.
Why warning of Specifying a Cache Validator occurs?
This arises due to missing HTTP cache headers which need to be included on every origin server response. It is important because it validates and sets the length of the cache. When headers are not found, it will generate a new request for the resource every time, and thus increases the load on your server.
What happens if you utilize a caching header?
It ensures that subsequent requests don’t have to be loaded from the server and thus it will save bandwidth and improve the performance for the user.
You may also like to read:- Fix Leverage Browser Cache for Images, CSS and JS
How to fix the warning "Specify a cache validator"?
To fix the issue you need to know four types of headers. Two headers fall in the same category, namely the last-modified header and Etag header. These are used to validate the cache, which means they check the last modification made in the file. Next two headers, namely Cache-control and Expires help to determine how long the file should be held in the cache.
Last-Modified Header
- This header is usually sent by the server automatically, so there is no need to add it manually. It checks if the file was modified since the last time it was requested and checks if it needs to get the newer version or can load from the local cache. You can see the value of last modified in the header of the Pingdom or ChromeDevTools.
ETag Header
This header is also similar to the last-modified header. It also validates the cache of a file. This identifies the version of the file with a string of characters. Whenever changes occur in the file a new version of the Etag is generated. It is a type of fingerprint and sometimes used to track the server. This tag is automatically added to the Apache 2.4 or higher using the FileETag directive. Since 2016, Etag is enabled by default
Cache-Control
- This defines the length of the cache. The properties associated with it are max-age, s-maxage, max-stale, min-fresh, stale-while-revalidate, stale-if-error, and cacheability (public, private, no-cache, no-store).
- Public: It shows that any cache can store the response.
- Private: It means it is cacheable only by the browser accessing the file.
- Max-age: It defines the amount of time for which it is cacheable.
As in the above example, it can be seen that the max-age directive is 604800 seconds which is equal to seven days.
To configure this in Apache, add the code below to your .htaccess file.
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">Header set Cache-Control "max-age=604800, public" </filesMatch>mg src="picture.jpg" />To configure this in NGINX, add the code below to your config. File. The files are located in the /etc/nginx/ directory and the primary configuration file is /etc/nginx/nginx.conf.
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { add_header Cache-Control "public"; }Expires
This is the last step and can be skipped if cache-control is properly set up. The difference between the two headers is that cache control lets you define the period of time before the cache expires and whereas expires uses a date.
To configure in Apache, use below code:
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
## EXPIRES HEADER CACHING ##"To configure in Nginx,
"location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 7d; }"Conclusion - Warning to Specify a Cache Validator
This article describes all the details essential to fix the warning related to "Specify a cache validator". Hopefully, you enjoyed this article and learned everything you need to know about the cache validator.