Tutorial: How To Leverage The Browser Cache For WordPress

Introduction

Ever wonder how when you revisit a site, it loads faster than the first time you visited it? That is actually made possible by a process called caching What this process does is that it keeps requested resources and stores them somewhere, so that once the same resources are requested, they don’t have to be retrieved (which can be resource intensive) again. This allows for a smoother and overall, better experience.

Caching is mainly done through a web browser, and when we say that we want to leverage browser caching for WordPress, what we mean is that we want to take advantage of the caching capabilities of the web browser that is currently accessing our WordPress site.

In this article, we will be going over how to do that.

Leverage the Cache with .htaccess

Using the mod_expires.c module to Extend Caching Expiration

To leverage browser caching without using a plugin, this is the way to go But first, we have to create/modify the .htaccess file on the root directory. If you don’t know how to do that, follow our article on How To Edit the .htaccess File . Once the file has been created, just add the following snippet:

# BEGIN Expire headers  
<IfModule mod_expires.c>  
  # Turn on the module.
  ExpiresActive on
  # Set the default expiry times.
  ExpiresDefault "access plus 2 days"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/svg+xml "access 1 month"
  ExpiresByType text/html "access plus 600 seconds"
  # you can add more here
</IfModule>  
# END Expire headers  Code language: PHP (php)

To add more items that you need to be cached, modify the following snippet with the appropriate values and place the line within the mod_expires.c blog:

ExpiresByType type/encoding "base[plus num type] [num type] ..."Code language: JavaScript (javascript)

Below is an example of a valid line

ExpiresByType img/gif "access plus 1 month "Code language: JavaScript (javascript)

Which will result in all GIFs being cached for a month after they have been accessed.

Add Cache-Control Headers

Using the mod_headers.c module to Extend Caching Expiration

usually, the previous method is enough, but if you need more control in handling caching, you can use the mod_headers.c library. This library provides further configuration for file types and even whole directories. This is usually placed inside mod_headers.c.

IfModule mod_expires.c>
  <IfModule mod_headers.c>
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
      Header append Cache-Control "public" 
    </filesMatch>
    <filesMatch "\.(css)$">
      Header append Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(js)$">
      Header append Cache-Control "private"
    </filesMatch>
    <filesMatch "\.(x?html?|php)$">
      Header append Cache-Control "private, must-revalidate"
    </filesMatch>
  </IfModule>
</IfModule>Code language: HTML, XML (xml)

In the example above, we are telling the configuring the response to cache resources in a location for each specified filetype that is matched (this is hinted by the name). Within the tags we specify caching settings. For example in:

<filesMatch "\.(css)$">
    Header append Cache-Control "public"
</filesMatch>Code language: HTML, XML (xml)

We are telling the browser requesting to store CSS files in a public cache (which is a caching resource shared by a lot of people). The public cache can be for instance, a dedicated server. But we can also tell the content to be stored in a browser by using the ff:

Header append Cache-Control "public"Code language: JavaScript (javascript)

Some Words on htaccesss Cache Configuration

htaccess files only work on Apache Servers so if you’re using XAMPP/LAMP you should be fine. Major hosting providers like BlueHost and SiteGround use Apache servers too so no need to worry there.

Caching with Nginx

Not all WordPress sites are hosted on Apache servers. A lot of them actually are hosted on nginx.

To leverage caching on Nginx, first access the file on your terminal then open the nginx configuration:

sudo vi /etc/nginx/nginx.conf

This will open the nginx configuration for your server. Once it is open, copy paste enter the following lines and modify it accordingly:

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g 
                 inactive=60m use_temp_path=off;

server {
    # ...
    location / {
        proxy_cache my_cache;
        proxy_pass http://my_upstream;
    }
}Code language: PHP (php)

For the proxy_cache_path directive these are the what the values mean:

/path/to/cache/ is the path to the cache in the machine hosting the WordPress site
levels sets up a multi-level directory so that the cached files are stored in more than one directory

keys_zone sets up a shared memory zone for storing the cache keys and metadata. By changing the number after the : we can increase the number of cache keys stored
max_size sets the upper limit of the cache
inactive tells how long an item can stay in the cache without being activated.
use_temp_path tells the server whether the files in the cache should be stored in a temporary folder

Within the server block, we then define which path of the site should caching be done. We also have to define a location and specify which URL pattern caching should be done in. In the example we use / which is the root directory. So this would cache all resources in the site which are accessed. Within that block we use the proxy_cache to enable caching in the location. The value beside it is the value specified in key_zone. We then define which proxy server we use with the proxy_pass directory.

That’s all you need to know about basic configuration. If you need more details go here.

Using the W3 Total Cache Plugin

If you use a caching plugin, things get much easier. You can use the W3 Total Cache plugin which works automatically when installed and activated on your WordPress site. If you don’t know how to install a plugin, check out our tutorial on How to Install WordPress Plugins. The plugin can be found through the admin dashboard.

The great thing about this plugin is that it works and takes care of the caching for you the moment it is installed. Browser caching, which we’re concerned with is enabled by default.

It caches CSS & JS

HTML & XML

Media Files

And it even allows you to modify security headers

Be sure to checkout the configuration page to configure the plugin to your needs

Conclusion

We’ve come to the end of this tutorial. Now you know how to setup caching in WordPress either manually or using a plugin. Now, use what you’ve learned to make your site render quicker, giving your site’s visitors a greater browsing experience.

How To Leverage The Browser Cache For WordPress