Articles, Page Speed

How to Set Expire Headers and Leverage Browser Caching

Leverage Browser Caching

Setting expire headers and how to leverage browser caching are two important concerns often times overlooked in the constant battle to improve a website’s pagespeed and overall performance. As with many of your pagespeed optimizations, leverage browser caching will help improve your site’s page load times for repeat visitors.

  1. What is Browser Caching
  2. How to Leverage Browser Caching Using .htaccess
  3. How to Leverage Browser Caching Using NGINX
  4. Third Party Assets

1. What is Leverage Browser Caching?

Leverage browser caching is important because it helps reduce load on your web server as well as the page load (and performance) of your website to repeat visitors. There are certain pieces of your website, mostly static or elements that do not change often; elements such as your logo, stylesheets (css files), and other image or text based elements and applications.

The moment a visitor goes to your site it triggers a request that needs to be made to your web server. With leverage browser caching, a visitor who comes back to your site they will be served those files from their local cache rather than having to make a request to the web server again.

It is highly recommend to set aggressive expires of at least 1 month to 1 year. The RFC guidelines set by the Internet Engineering Task Force (IETF) recommends that nothing be set to for no longer than a year.

Historically, HTTP required the Expires field-value to be no more than a year in the future. While longer freshness lifetimes are no longer prohibited, extremely large values have been demonstrated to cause problems (e.g., clock overflows due to use of 32-bit integers for time values), and many caches will evict a response far sooner than that.

There are two options you can use to add Expires headers or cache-control headers in both Apache and NGINX web servers.

There’s quite a bit of confusion with expires headers and cache-control headers. They’re a bit redundant if you have both, so you’ll want to use one. Some speed test tools such as GTMetrix still check for expires headers rather than the cache-control headers, which is a newer and a recommended method.

2. How to Leverage Browser Caching Using .htaccess

If your website or application is hosted on an Apache based web server, you’ll want to add the following lines to the top of your .htaccess to leverage browser caching. Make sure that mod_expires is supported by the server you’re site is hosted on. The .htaccess can be found in the root directory for your site.

This is going to specify certain rules; what’s considered the expire headers for different file types that can be found on your site. You’ll notice that the expires header specifies how long to keep using that particular file type.

Expires Header

# BEGIN Leverage Browser Caching

  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  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 text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"

# END Leverage Browser Caching

Cache-Control Heaer


Header set Cache-Control "max-age=84600, public"

3. How to Leverage Browser Caching Using NGINX

If you’re running a web server on NGINX, you’ll want to be make changes to your server config’s server location or block to add expires header or a cache-control header with an expires directive.

Expires Header

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 30d;
}

Cache-Control Header

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}

4. Effect of Third Party Assets

An issue with common speed test tools is that they will generate results that tell you to fix assets that aren’t hosted on your server. Most commonly, you may see warnings to fix cacheable resources from third-party assets or scripts. These may include things such as tracking or conversion pixels, stylesheets, javascript, and svg files.

In short, don’t worry if speed tests are reporting low scores for leverage browser caching or recommending that you need to make improvements. There are variables that those reports aren’t taking into account.

Previous ArticleNext Article