Html expires last modified

How to Leverage Browser Caching for Better Page Speeds

Disclosure: This page may contain affiliate links. If you purchase something using those links, we may receive a commission, but it will not cost you anything extra.

There are several things you can do to improve the performance and load times of your website. In this post, you will learn how to leverage browser caching by adding a few response headers for your static files.

While checking load speeds on sites like Pingdom, GTMetrix and Google PageSpeed, you might have seen warnings about the lack of caching. This guide helps to solve those warnings as well.

What does Browser Caching means?

As you know, a web page consists of not just HTML. It includes several static files like images, CSS, JS, etc.

So, when you go to a web page, your browser sends requests for all these files and downloads them.

The browsers come with the ability to store the downloaded responses on its cache on the local machine – that’s your device.

So, when you visit that page again after a while, the browser doesn’t require downloading all these files again. Instead, it retrieves these from the cache and renders the page.

This has several advantages:

• Avoids unwanted HTTP requests, resulting in faster page loads
• Saves your internet data charges
• Saves bandwidth for the website owner

However, the browser may not cache things by default. For that, the server has to inform the browser how long it should cache the files and when to validate it for changes. This is known as cache policy.

In short, cache policy consists of:

The server informs its cache policy in the form HTTP response headers send with each file.

Important HTTP Headers for Caching

There are mainly four such headers that you should know about:

Each one is different and you can set one or more of these headers to define your cache policy.

Cache-control & Expires Header

Both these headers do almost the same thing albeit in a different way. They set the expiration time (validity) for a cached file.

Cache-control Header

Out of the two, Cache-control is newer. It allows setting multiple directives using less code.

Example

Usually, adding the following code to the htaccess file is what you need in most cases to set caching.

Header Set Cache-Control "max-age=2592000, public"

Instead of explicitly setting the cache expiration for all files, you can to match certain file types only:

#Cache images for 1 year Header Set Cache-Control "max-age=31536000, public" #Cache CSS and Javascript for 1 month Header Set Cache-Control "max-age=2592000, public" #Cache other files for 1 week Header Set Cache-Control "max-age=1018080, public" 

This tells the browser to cache the files for the specified number of seconds. After that time, the browser has to request the server again.

You can adjust the time values based on the applications’s needs. Usually, for assets that rarely change, a value of one year will suffice.

The word public denotes that any client can cache the responses.

Disabling cache

You can also do the opposite – that is, disable caching. The following will ask browsers to fetch fresh content from the server without caching.

Header Set Cache-Control "no-cache, no-store, must-revalidate"

Expires Header

Unlike Cache-control which sets a duration for the validity of cached files, Expires header sets a specific timestamp.

Example

 ExpiresActive On ExpiresDefault "access plus 1 month" #Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/ico "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/bmp "access plus 1 year" #CSS & JS ExpiresByType application/javascript "access plus 7 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType text/css "access plus 7 days" 

[The above code is based on the rules set by Breeze – a WordPress cache plugin]

Which one to use?

In most cases, Cache-control is enough to set proper policies. In today’s age, there are not many reasons to use the older Expires header. However, you can set both to ensure maximum support.

Validators: Last-modified & ETag Headers

Apache by default sends both ETag and Last-modified headers with the response. So, unless you turn these off, you should not see any warning during performance tests.

If GTMetrix’s PageSpeed recommends specifying a cache validator, it means you have to set either the Last-modified header or the ETag header or both.

Both do the same job – specifies when to validate the cache and refresh stale content.

Last-modified

Like Expires, Last-modified also specifies a time. For subsequent requests after the first one or after the cached content expires, the browser sends the date along with the request to the server for comparison.

If the server finds that the file is unmodified (i.e., the current modified date is same as the one in the request), the server sends a Not-Modified (status code: 304) header instead of the OK header (status code: 200). So, the browser can continue to serve the file from the cache until the cache expires once again.

Else, if the file is modified, the server sends the new date inside the Last-modified header along with the new content. The browser downloads it and keep it in the cache.

ETag or Entity Tag

Instead of a date and time, the ETag header sends a hashed value. When a file is modified, the ETag value also changes. Some sources say that ETag is more dependable than Last-modified.

The remaining logic is same as that of Last-modified. The server compares the the current ETag value with the one from the client for validating the cache.

Issue with ETag Header

According to Yahoo Developer Network, ETag may not work as expected if your site uses more than one server as in a load balancer.

The reason is if Apache includes the Inode number while calculating the ETag. The Inode may be different for each server, resulting in different ETag values.

To ensure Inode is omitted, set:

FileETag MTime Size # Default is FileETag INode MTime Size

For those who use only one server to host a site, this is not an issue at all.

Final Code

So, the final code to add in your .htaccess file is here. It is based on the code generated by the W3 Total Cache Plugin.

 ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType video/webm A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 

In the above code, note that the ExpiresByType directive sets both the Expires and Cache-control max-age headers [source].

Conclusion

So, here is the summary of what we have discussed above:

• Leveraging browser cache means asking the browser to store resources in its cache for a period of time. It prevents repetitive requests to the server until the cache expiration time is reached.
• Cache-control (max-age) and Expires headers set the expiry/lifetime of a cached resource.
• Last-modified and ETag headers allow revalidating an expired cache item
• Cache-control and ETag are preferred than Expires and Last-modified, although you can set all of them.

Abhinav

Abhinav Raveendran is a blogger with a keen interest in learning web trends and exploring the world of WordPress. Apart from that, he also has a passion for nature photography and travel.

Источник