Browser Caching

Browser caching allows you to speed up your website 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.

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 to Leverage Browser Caching with WP Rocket

To enable browser caching with WP Rocket, all you have to do is to install and activate it. This is where magic starts. WP Rocket will set expiry dates 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 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
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 application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
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>

Potential Issues

On Apache

If you experience issues with this on your Apache Server, make sure the Apache expires module ( mod_expires) is turned on. You can do it by contacting your hosting provider. Check this explanation of how to enable mod_expires:
www.absolutelytech.com/2010/08/02/howto-enable-or-disable-modules-in-apache

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 this to create the correct rules for your web config file:
www.htaccesstowebconfig.com

On NGINX

If you use Nginx, you can do this:

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