how to fix specify a cache validator

How to Fix the “Specify a Cache Validator” Warning

how to fix specify a cache validator

If you ever had the “pleasure” of receiving “Specify a Cache Validator” warning, while using GTmetrix, Pingdom or any other website speed and performance optimization tool, this article is the right place for you. The problem arises when HTTP is missing caching headers responsible for validating and setting the length of the cache. It has a couple of pretty simple fixes, but let us first explain a few things.

When Does Specify a Cache Validator Problem Usually Occur?

This problem is typically seen when the user has not configured the server right, for example, some of the headers we will define bellow are missing. If you are the one having all the power, it is an easy fix. Sometimes though, 3rd party requests can trigger this message, and there is not much you can do. Actually, scratch that, you can send them this article, it’s a win-win situation for us all.

If you are using some of the more popular content delivery network providers, there is a big chance all the headers will be added automatically. No worries there. CDNs can also help you by allowing you to tweak configuration with a user-friendly dashboard. In case you are configuring the server yourself, pay attention to the information below.

 

What is a Cache Validation?

Cache validation is a process of checking if the file we are requesting is already cached in a local cache (and therefore can be quickly accessed), or if a request for it must be sent to the server (making load times longer and using more resources). Without this the server would have to send the same file every time there is a request for it, making it inefficient.

To check if the site is using cache validators you can open Chrome, right-click on the page you are curious about and press “inspect”. Under the Network tab, there will be a message saying you need to refresh the page.

record network activity

Upon doing that, a list of files will be generated. Click on any file and you will see the file’s (in this case a gif image) status code.  File on an image bellow is opened from memory cache as stated.

status code from memory code

 

What is .htaccess?

Web servers with Apache Web Server software use .htaccess file for configuration, redirecting and security. It is usually placed in the root folder where the website files are located. There can be more than one .htaccess files in different directories. When placed, it is detected and automatically executed by the software.

 

Specify a cache validator Warning Fix

In order to fix the warning, you will have to go through steps bellow. As we already stated, we cannot set up a cache validator for 3rd party resources. Origin servers are the ones responsible for that (you don’t have access). Remember that!

 

1. Last-Modified Header

The server usually sends this header automatically so there is no need to manually add it after. This header serves as the first step in validation. If the file was modified since the last time we requested it, the server will know that it needs to send a newer version. If not, it can just load it from the local cache.

response headers

 

2. ETag Header

It has a similar job as the last-modified headers since we are using both of them in cache validation. It identifies the version of served content with a string of characters. If the file changes, the server must generate a new ETag value. Etag headers are a fingerprint of sorts, so servers can sometimes use them for tracking. Apache versions 2.4 and above adds them automatically. If you need to enable it, you can do it using NGINX’s “etag on” command (since 2016 it’s enabled by default).

response headers etag

 

3. Cache-Control

This header defines the length of the cache. Some of its properties are expiration (max-age, s-maxage ,max-stale ,min-fresh ,stale-while-revalidate, stale-if-error), and cacheability (public, private, no-cache, no-store). Since these are the most common ones and most related to this article, we will only define what public, private and max-age are.

  • private –  points out that the response is intended to be cached, but only on a client device. and can’t be stored by a shared cache.
  • public – shows that any cache can store the response.
  • max-age – it is defined in seconds, and it shows the maximum quantity of time the file is seen as “fresh”. The difference between it and Expires is that max-age is considering the time of the request. When it expires, a browser refreshes the version of the resource it has by sending another request to a server.

Cache-Control

 

In our case, max-age is exactly 604800 seconds. If your site needs this configured, in Apache you can add the following to .htaccess file:

 

“<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>

Header set Cache-Control “max-age=604800, public”

</filesMatch>”

 

Or in Nginx:

 

“location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 2d;

add_header Cache-Control “public, no-transform”;

}”

 

4. Expires

The last step is configuring Expires headers. There is no need to have this header if you set up cache-control properly since it overrules it, but it can’t hurt being more prepared. All browsers use Cache-Control. The difference between those two headers is that Cache-Control lets you define a period of time before the cache expires, and Expires uses a date. Dates, such as the value of “0” or “-1” (invalid dates), show a moment in the past and mean that the resource is already expired.

response headers expires

To configure this in Apache us the following:

 

“## 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 ##”

 

or in Nginx:

 

“location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 7d;}”

 

Bonus Information: Cookie-Free domains

HTTP cookies are tiny data pieces website is sending for the browser to store them in. When you are browsing the internet the cookies are collecting data like preferences, items on e-stores carts, pages you visit, etc. Cookies also perform some essential functions like determining user status (for example logged in and in what account). But, all those services use network traffic and resources. So is there a way around it?

Like cache validation, there is also a way of increasing loading speeds by using cookie-free domains. When a browser is making a request for static content (an image for example), there is no need for sending a cookie (it only creates more traffic and serves no purpose). You can configure Cookie-Free Domains in WordPress, but CDNs can make the process much easier.

 

Conclusion

Hopefully, you learned everything you need to know about “Specify a Cache Validator” warning. If you enjoyed our WordPress guide please feel free to share it. For more step by step WordPress tutorials follow our WordPress blog. If you are trying to speed up your website check our WordPress speed optimization guide and learn how to minify code, leverage browser caching, compress images and more.