Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

PageSpeed: Leverage browser caching

Overview

Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.

  • Reduces page load times for repeat visitors
  • Particularly effective on websites where users regularly re-visit the same areas of the website
  • Benefit-cost ratio: high
  • Access needed
General guidelines for setting expiries:
  • Truly static content (global CSS styles, logos, etc.) - access plus 1 year
  • Everything else - access plus 1 week
How does your site score on this recommendation?

What is browser caching?

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images.

Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example is 3 MB+.

The issue is two fold.

  1. These large files take longer to load and can be especially painful if you're on a slow internet connection (or a mobile device).
  2. Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.

Browser caching can help by storing some of these files locally in the user's browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.

This means the amount of data the user's browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.

How does it work?

Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals. Your logo on your website, for instance, is unlikely to change from day to day. By caching this logo image, we can tell the user's browser to only download this image once a week. Every visit that user makes within a week would not require another download of the logo image.

By the web server telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.

Why is it important?

The main reason why browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time for your users.

How to leverage browser caching

Read our Lighthouse documentation to learn more about enabling browser caching.

Summary

Server
High
Moderate
65%

PageSpeed recommends:

Set caching headers aggressively for all static resources

For all cacheable resources, we recommend the following settings:

  • Set Cache-Control: max-age or Expires to a minimum of one month, and preferably up to one year, in the future. Do not set it to more than one year in the future, as that violates the RFC guidelines.
  • Set the Last-Modified date to the last time the resource was changed. If the Last-Modified date is sufficiently far enough in the past, chances are the browser won't refetch it.
Use fingerprinting to dynamically enable caching

For resources that change occasionally, you can have the browser cache the resource until it changes on the server, at which point the server tells the browser that a new version is available. You accomplish this by embedding a fingerprint of the resource in its URL (i.e. the file path).

Set the Vary header correctly for Internet Explorer

Internet Explorer does not cache any resources whose Vary header contains fields that are not Accept-Encoding, User-Agent or Host. To ensure these resources are cached by IE, make sure to strip out any other fields from the Vary header.

Read More