Web Development: How to Use Browser Caching in WordPress

How to Use Browser Caching in WordPress

In this article, I'll discuss the benefits of browser caching and how you can use it for your WordPress websites. In the first half of the article, you'll learn to set up browser caching with Apache and Nginx server configuration. Then I'll show you how to use third-party plugins for browser caching.

Browser Caching And Why You Should Use it

Browser caching is a technique which allows you to store your website's resources on the client or browser side. This means the browser doesn't need to download those resources (eg. images or scripting), improving the overall load time of your webpages. This results in better UX since your website will load faster.

Apart from that, browser caching significantly improves your SEO ranking—it's considered to be an essential requirement for a website. If you measure your web performance score with tools like Google PageSpeed, you'll notice significant improvements after you leverage browser caching.

What exactly does a browser do when your website enables browser caching? Basically, when you request a webpage, a browser makes a lot of requests to the server in the background to load different resources like images, CSS, JavaScript, and font files. Now, when the browser caching is enabled, it would store all these resources on the client or user side. And thus, when a user browses other pages of your website, a browser doesn’t have to download these resources again from the server, as it could use the cached resources.

The benefit of using browser caching is twofold. Firstly, it reduces the number of HTTP requests a browser has to initiate to the server to load resources. Also, since it loads the required resources from the browser cache, the overall page speed is significantly improved.

Broadly speaking, there are two different ways you could implement browser caching for your WordPress websites. If you are comfortable enough to edit a few configuration files, you could implement it by editing the server specific configuration files. On the other hand, if you don’t have access to your server configuration or don't want to risk messing it up, you could use third-party plugins which allow you to configure different caching options from the admin side itself.

How to Leverage Browser Caching With Apache And Nginx

In this section, we’ll go through the necessary steps to implement browser caching with the help of server-specific configuration files.

Browser Caching With the Apache Server

In Apache, the mod_expires module allows you to set expires and cache-control headers. Specifically, you could use ExpiresDefault and ExpiresByType directives to configure cache lifetime in a more readable syntax. You can configure it in the .htaccess file in the root of your WordPress installation.

Go ahead and open the .htaccess file in your favorite text editor. Add the following code at the end of the file and save it.

<IfModule mod_expires.c>
  ExpiresActive on

  # whitelist expires rules
  ExpiresDefault "access 1 month"

  # 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/jpg "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"

  # 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"

  # CSS and JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

As you can see, we’ve configured browser caching for different types of files. For example, the directive ExpiresByType image/gif "access plus 1 month" tells the browser that it should cache all .gif files for a month. In the same way, we’ve configured cache lifetime for the other extensions as well. Of course, you could configure the cache lifetime as per your requirements. You could choose from the following period types:

years
months
weeks
days
hours
minutes
seconds

Finally, we’ve used the Header append Cache-Control "public" directive to tell the browser that it’ll be stored in the public cache. With these settings in place, you’ve enabled browser caching for your WordPress website!

So that’s how you can leverage browser caching with Apache for your WordPress sites. In the next section, we’ll see how to achieve it with the help of Nginx.

Browser Caching With the Nginx Server

If you’re running your WordPress website with the Nginx server, you would need to edit the virtual host file of your domain. If you have shell access to your server, it’s really easy to access this file and edit it. If you’re not comfortable enough to edit files from the shell yourself, I recommend you get help of a professional developer. If there’s any syntax error in your file, it may break your site!

Go ahead and open the virtual host file of your website. It's important to note that you would need either sudo or root access to be able to edit this file. In most cases, you'll find it under the /etc/nginx/sites-enabled directory on your server. Add the following code in the server block.

server {
  …
  ...
  location ~* \.(x-icon|gif|png|jpg|jpeg|ogg|mp4|webm|x-font-ttf|svg|xml|css|js)$ {
     expires 30d;
     add_header Cache-Control "public, no-transform";
  }
  …
  ...
}

In the case of Nginx, we’ve used the location directive to configure file types for which we want to enable browser caching. Following that, the expires directive is used to configure the cache lifetime. And finally, the add_header directive is used to add the Cache-Control header.

Once you’ve saved the changes, you should test your Nginx configuration to make sure that the syntax is correct. For *nix-based systems—Linux, Unix, and macOS—you could run the nginx -t command to test it. For Windows systems, you could use the GUI tools to do it. Finally, if everything looks good, you can go ahead and restart your Nginx server. After the Nginx server is restarted, it should enable browser caching and static resources will be cached on the client side.

In the next section, we’ll discuss how you can enable caching with the help of third0party plugins.

How to Enable Browser Caching With Third-Party Plugins

In WordPress, there’s barely anything which you can't achieve with third-party plugins. And that’s true as well when it comes to browser caching. There are a lot of plugins that allow you to enable different caching features from the admin side itself. In this section, we’ll discuss the Leverage Browser Caching plugin, which is a popular one among this category.

Firstly, go ahead and download it from the WordPress marketplace. Follow the standard WordPress plugin installation instructions to install it. And once it’s installed, you’re done! You don’t need to do any configuration at all!

It’s important to note that this plugin will only work with sites that use Apache as a web server, since it modifies the .htaccess file located in the root of your WordPress installation to enable browser caching. As the Leverage Browser Caching plugin writes into the .htaccess file, you want to make sure that this file is writable by the web server.

Apart from this plugin, there are a few other plugins as well that you could try and experiment to see how they work. I would encourage you to exercise different options to see how it affects your website performance.

Another powerful plugin that includes settings for browser caching is WP-Optimize. You can learn all about how to use WP-Optimize it in our free course on essential WordPress plugins.