Entity tags (ETags) is the way to determine that the contents available in the browser's cache is the same or different from the origin server.
ETags treats the CSS, JavaScript, and image files as entities, and provides a mechanism to validate the specific version of a component/entity that is returned from the server side under the response header as ETag: "some-value". Notice that it is stringified before sending the value to the client. Now, the server specifies the component's ETag using the ETag response header that changes it or has the same string value as of the previous one.
Now, if the browser has to check and validate the entity, it uses the If-None-Match request header to pass the ETag back to the server and in return the server responds with either 200 or 304 status code. If it returns 304 HTTP Code, the content has not been modified and saved some KBs to get downloaded.
If it's the static content, it is easy to calculate the ETag by returning the recent modified date, so that if you update it and being requested by the browser; it would send HTTP code 200 and will send the updated one.
But, if it's a dynamic file whose content changes frequently depending upon the argument and dynamic values, just sending the recent modified date would not be enough to calculate the ETag value. You may use PHP to generate ETag or any dynamic language would do that depending upon your requirement. Apache server automatically configures the ETag values.
If all the files are going to be served from the same server, ETAG is important, else it should be disabled in case of CDN.
Once can Set/Enable ETags using Apache's config file that is,
httpd.conforapache2.conf(depends upon which Apache version you are using) and add the following line at the end of the file:FileETag INode MTime Size
If you are using a cluster of servers, better disable it by adding the following lines in
httpd.conforapache2.confat the end of this file:FileETag None Header unset ETag
In case, it is misconfigured either by mistake of a programmer or web master, it would not show the
If-None-Matchtag under the request header. YSlow under Firefox shows that there are three files present in the site, which have misconfigured ETags.
The process of requesting, configuring, and matching ETags can be explained with the step-by-step browser-server communication as follows:
The user requests a web page, say
abc.com, through the browser.The browser sends a request to the server to check and verify the freshness of the content.
The server sends the output of a page of
abc.comwith the value of ETags as strings for the present page.The client gets the content and displays it after caching it with the ETags value for that page with the status code 200, if it's fresh content, as shown in the following screenshot:
The client once again sends a request to the origin server by passing the previously sent ETags value through the
If-None-Matchtag.The server tests and verifies that the content has not been modified since the last time it was requested and sends a response as 304 status code with a 0 KB file size, as it is already in cache, as shown in the following screenshot:
The concept of ETags may not work in the CDN services as it will get the ETag version from one server and the next time it would request to compare it with the others. There is little relief for you if you are using Apache, which is a major role player in the server domain, or IIS then by default, both embed data to the ETag header, which will reduce the chance of a failure on testing and verifying ETags even when coming from different servers.