Browser caching

Browser caching allows you to speed up your website for those visitors who visit multiple pages, or visit multiple times, by storing files locally in the user’s browser. 

This way, the amount of data the user’s browser has to download, as well as number of HTTP requests are reduced. For a more in-depth explanation, please see our blog post. 

NOTE: Browser caching can only be applied to files served from your own domain NOT to those from 3rd parties - Facebook, Google, etc

How browser caching works

A good explanation of this is provided by GTMetrix:

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 webserver telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.

How WP Rocket applies browser caching

To enable browser caching with WP Rocket, all you have to do is to install and activate it.  WP Rocket will set expiration lengths on certain types of files and will modify your .htaccess file with these rules:

# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
    ExpiresDefault                              "access plus 1 month"
    # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
    ExpiresByType text/cache-manifest           "access plus 0 seconds"
    # Your document html
    ExpiresByType text/html                     "access plus 0 seconds"
    # Data
    ExpiresByType text/xml                      "access plus 0 seconds"
    ExpiresByType application/xml               "access plus 0 seconds"
    ExpiresByType application/json              "access plus 0 seconds"
    # Feed
    ExpiresByType application/rss+xml           "access plus 1 hour"
    ExpiresByType application/atom+xml          "access plus 1 hour"
    # Favicon (cannot be renamed)
    ExpiresByType image/x-icon                  "access plus 1 week"
    # Media: images, video, audio
    ExpiresByType image/gif                     "access plus 4 months"
    ExpiresByType image/png                     "access plus 4 months"
    ExpiresByType image/jpeg                    "access plus 4 months"
    ExpiresByType image/webp                    "access plus 4 months"
    ExpiresByType video/ogg                     "access plus 4 months"
    ExpiresByType audio/ogg                     "access plus 4 months"
    ExpiresByType video/mp4                     "access plus 4 months"
    ExpiresByType video/webm                    "access plus 4 months"
    ExpiresByType image/avif                    "access plus 4 months"
    ExpiresByType image/avif-sequence           "access plus 4 months"
    # HTC files  (css3pie)
    ExpiresByType text/x-component              "access plus 1 month"
    # Webfonts
    ExpiresByType font/ttf    "access plus 4 months"
    ExpiresByType font/otf    "access plus 4 months"
    ExpiresByType font/woff   "access plus 4 months"
    ExpiresByType font/woff2  "access plus 4 months"
    ExpiresByType image/svg+xml                 "access plus 4 months"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    # CSS and JavaScript
    ExpiresByType text/css                      "access plus 1 year"
    ExpiresByType application/javascript        "access plus 1 year"
</IfModule>

HTML and max-age

WP Rocket applies a long browser caching time on static file types like CSS, JS, images etc. 

For the HTML document itself, we set an expires of 0 seconds. This ensures that the browser will check with the server to see that it has the latest version of the page before serving it from the browser's cache. If the file on the server hasn't changed, only headers (a few bytes of information) are exchanged and the page is served from the browser's cache. If the file on the server has changed, then the fresh page will be downloaded and stored in the browser's cache.

We take this approach to ensure that all visitors see your latest content right away.

The expires rule of 0 seconds rule translates into cache-control:max-age=0. If this is interfering with another cache layer you are using, you remove this specific rule.

Troubleshooting "Leverage browser caching" and "efficient cache policy" warnings

You may have used GTMetrix, Pingdom Tools or PageSpeed Insights to check the performance of your website and seen a recommendation about “Leverage browser caching”, "Add Expires headers" or "Serve static assets with an efficient cache policy."

  1. Pingdom does not provide the list of specific files that are being flagged, so if that’s what you used, re-run the test using either GT Metrix or PageSpeed.
  2. Then click on the message to expand it and view the list of files that are being flagged. 
  3. Are the files listed hosted on your domain?
    4. If the files are external, i.e. not served from your own domain, you can't optimize them.

    You can read more about this in our doc: 
    Handling External Resources

    If the files referenced are hosted on your domain, check the following: 

  4. Does your site use an htaccess file? 
    5. As described above, WP Rocket adds browser caching rules in the htaccess file.  Check with your host to see if:
    • Your site uses an htaccess file. If it does, check the file to make sure the block of rules above are present
    • Mod_expires is enabled
  5. Is the Cache TTL life None?

    This typically means that the necessary server module is not enabled at all. Speak to your host about this. If your server is Apache/LiteSpeed, ask them to enable mod_expires. If you use an NGINX or IIS server, follow these steps or speak to your host.

  6. Are you using Cloudflare? 

    7. A setting in Cloudflare could be overriding our rules. Log in to Cloudflare and go to:  Caching > Browser cache expiration to check this. We recommend a value of 1 year to prevent warnings in GT Metrix etc. 

  7. Are you using any other cache layer such as Varnish or other? 

    8. The rules set in this configuration could be overriding ours. Ask your host if that's the case.

Server admins

If you are running your own server, here is some guidance about what you need in order to apply browser caching. Note we cannot provide support for modifications to your server config. We're providing this information as a helpful resource :)

On Apache/LiteSpeed

Make sure the Apache/LiteSpeed expires module ( mod_expires) is turned on:
http://httpd.apache.org/docs/current/mod/mod_expires.html

In command line:

$ sudo a2enmod expires

And then restart Apache:

$ sudo /etc/init.d/apache2 restart

On Windows Server (IIS)

If you use Windows server (IIS), you don’t have an .htaccess file which is where the browser caching rules are defined. In that case, you could use something like the following tool to create the correct rules for your web config file: Converting Apache .htaccess rules to IIS web.config using IIS Manager for Azure Websites

Or follow this guide to apply browser caching on your server:
http://blog.janjonas.net/2011-08-21/microsoft-iis-7-enable-client-side-browser-caching-static-content-web-config

On NGINX

If you use Nginx, you can add the following rule:

location ~* \.(css|js|ico|gif|jpe?g|png|svg|eot|otf|woff|woff2|ttf|ogg|webp)$ {
	expires max; 
}

Restart NGINX after with this command

$ service nginx restart
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.