Understanding ETags: How They Improve Website Performance

Amir So
4 min readMay 5, 2023

Web development relies heavily on caching to optimize website loading times and efficiency. ETags play a significant role in caching by identifying specific versions of resources. This blog post delves into the mechanics of ETags, the 304 HTTP code, and how they work in concert to enhance caching performance.

What is an ETag? 🤔

ETag, which stands for entity tag, is a mechanism utilized by web servers to verify if a resource has been modified since the last time a client accessed it. Essentially, an ETag is a string that reflects the present status of a resource. Whenever a client requests a resource from a server, the ETag is included in the response headers by the server.

How do ETags work with caching?

Caching is the process of storing frequently accessed resources to enhance performance. Whenever a client requests a resource, the browser checks if a cached version is available. If it is, the browser can retrieve it from the local cache instead of requesting it from the server.

To request a resource, the client sends a request header containing an If-None-Match field with the ETag of the cached resource. The server then compares this ETag with the ETag of the current version of the resource. If both match, the server responds with a 304 HTTP status code in the response headers. This indicates that the client can use the cached version of the resource.

What is the 304 HTTP code?

When a client sends a request to a server, the response might include a 304 HTTP status code. This code indicates that the requested resource has not been modified since the last time the client made the request. As a result, the client can confidently use the cached version of the resource without the need to download it again.

How does it improve caching performance? 😈

Imagine a scenario where a website has a massive influx of users accessing a particular resource, such as an image or video file. If every user had to download the entire resource every time they accessed it, it would lead to excessive data transfer and network usage. However, by implementing ETags and the 304 HTTP code, the server can significantly reduce the amount of data that needs to be transferred over the network, leading to reduced network costs and improved website performance.

Furthermore, the utilization of the 304 HTTP status code significantly reduces the load time of a resource. This is because the client can now use its cached version of the resource instead of waiting for a new one to be downloaded from the server. As a result, the website becomes faster and more responsive, leading to an enhanced user experience.

If you have a CDN (Content Delivery Network) in place, the behavior of the CDN when it receives a request with an If-None-Match header will depend on the configuration of the CDN.

ETag VS Last-Modified ⚔️

HTTP is equipped with ETag and Last-Modified headers to assist both clients and servers in identifying any alterations made to a requested resource. Although these headers serve the same purpose, they function differently from one another.

ETag header provides a unique identifier for a particular version of a resource. Typically, it’s a hash or checksum of the resource’s content, and it changes each time the content is altered. In subsequent requests, the client can send an If-None-Match header with the ETag value to request the server to determine if the resource has been updated since the last request. The server will respond with a 304 Not Modified message if the ETag value remains the same, indicating that the client can use its cached copy of the resource.

In contrast, Last-Modified is a response header that shows when the last modification was made to the resource on the server. In future requests, the client can send an If-Modified-Since header with the value of the Last-Modified header to ask the server if the resource has been modified since the last request.

The key difference between ETag and Last-Modified is in how they determine whether a resource has been modified. ETag uses a unique identifier based on the resource’s content, whereas Last-Modified uses the time when the resource was last modified on the server. In general, ETag is considered to be more reliable than Last-Modified, as it can detect changes in the resource even if the modification time hasn’t changed. However, ETag can be more resource-intensive than Last-Modified, as it requires generating and comparing a unique identifier for each version of the resource.

🙌

Thanks for reading the post and don’t forget to follow! 💙

--

--