Browser Caching

In this Article

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. This is where the magic starts. 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
    # Perhaps better to whitelist expires rules? Perhaps.
    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 1 month"
    ExpiresByType audio/ogg                     "access plus 1 month"
    ExpiresByType video/mp4                     "access plus 1 month"
    ExpiresByType video/webm                    "access plus 1 month"
    # 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 1 month"
    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>

Troubleshooting "Leverage browser caching" 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: 

  5. Does your site use an htaccess file? 
  6. 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
  7. Are you using Cloudflare? 
  8. 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. 

  9. Are you using any other cache layer such as Varnish or other? 
  10. 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

Make sure the Apache 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)$ {
	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.