Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

How to Use Browser Caching in WordPress

by
Read Time:7 minsLanguages:

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 (e.g. images or scripting), improving the overall load time of your webpages. This results in a better user experience 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. When browser caching is enabled, it stores 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 can use the cached resources.

The benefits of using browser caching are 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 editing 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.

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 the 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.

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 the 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 editing files from the shell yourself, I recommend you get the help of a professional developer. If there’s a 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'll 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.

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 third-party 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. In this section, we’ll discuss the Leverage Browser Caching plugin, which is a popular one in this category.

Firstly, go ahead and download it from the WordPress plugin directory. 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 in our free course on essential WordPress plugins.

Conclusion

Today, we discussed how to use browser caching on a WordPress website. It’s an essential part of fine-tuning your website's performance. 

If you want to learn how to make a WordPress site from A to Z, be sure to check out our complete guide.

You can also learn how to use WordPress with our free online course.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.