How to Leverage Browser Caching in WordPress? Steps to Follow

How to Leverage Browser Caching in WordPress? Steps to Follow

If you want to master Leverage Browser Caching in WordPress, you already know about the main benefit it has – it increases website loading speed.

This detail is highly important for people who encounter this issue. Luckily, there are tools such as Google PageSpeed Insights or GT matrix that can tell you exactly what you want to know about your website’s speed.

The tools will ultimately let you know if you need Leverage Browser Caching in WordPress or not. The second reason why you might want to read this article is learning how to use a Leverage Browser Caching WordPress plugin. This matter is discussed in detail below by our wpDataTables team, so continue reading and you will manage Leverage Browsing Caching by the end of this article.

Creating a visually pleasing website is no longer paramount when the loading times are so bad that they make users leave it in seconds. You need to build a website with fast-loading pages and quality content. Every single person in contact with the Internet should know this. The easiest way to make a website faster is through Leverage Browsing Caching.

This concept will be explained later, but you should know that is the top recommendation of Google when it comes to loading times. Normally, the loading speed of your website can be increased with up to 50%, as long as you use the proper methods. In this situation, the method you should learn more about is Leverage Browsing Caching.

Table of Contents

  • What is Leverage Browsing Caching?
  • How does Leverage Browsing Caching in WordPress work?
  • Differences between server caching and browser caching
  • Enabling Leverage Browsing Caching in WordPress
  • NGINX Server and Leverage Browsing Caching
  • Leverage Browsing in WordPress using plugins
  • Use Yoast SEO to edit the .htaccess file
  • Caching third-party resources

What is Leverage Browsing Caching?

For those who don’t know what Leverage Browsing Caching is, it’s best to explain it in simpler words. Caching represents the amount of time that browsers locally store the cacheable resources available on a website.

These resources include images, JavaScript, CSS,and others. Whenever a person accesses the website, the cacheable resources which are stored on your computer are uploaded back. The loading speed of the website is thus improved visibly. This is the reason why people want to use Leverage Browsing Caching in WordPress.

How does Leverage Browsing Caching in WordPress work?

When a person accesses a certain domain, there are multiple processes happening in the background. Everything that composes your WordPress website is transmitted to the user’s browser, making the site visible. These components of the website include content, images, stylesheets, scrips and more. They must be moved from the website’s server to the user’s browser whenever it is required. The steps behind this process are:

  1. The visitor types a URL in his browser
  2. The browser generates a request to the server where your website is hosted (the HTTP request)
  3. The server puts all data together and sends it to the user. This is the step where users notice a slowdown. To prevent this slowdown, people can reduce the size of the scrips, optimize the image sizes and so on.
  4. Once the data is transmitted, the browser is finally able to display the website. The process repeats when visitors access other pages. The server requests can be very numerous at once, which can lead to low performance. This is why people need to optimize their website, to keep it fast.

Cache content is used in both web browsers and software applications. It is stored temporarily on your local disk. This data is called ‘ Web Cache’ or ‘HTTP Cache‘. Whenever you visit the same website, the browser will upload the information stored on your computer and download the content from the website.

In order to check whether your WordPress website leverages browser caching correctly, you need to use a specific tool. The most popular one is Google PageSpeed Insights. Find out if everything works correctly by typing in your site’s URL.

Then, click Analyze and let the tool to do its magic. PageSpeed should tell you what score your website has in terms of optimization for mobile and desktop. The score ranges from 0 to 100, and you will also get suggestions on how to improve your website after. One of the most common suggestions is to opt for Leverage Browsing Caching in WordPress.

Differences between server caching and browser caching

Any WordPress user should know more about server caching. This is a process that involves generating cached web pages for your website through the webserver. The steps above represent website caching, which is mainly on the server-side.

There are some ways in which you can improve the server caching system. The most recommended option would be updating headers on Apache. Using WordPress plugins would be the next step, and adding CDN follows it.

Enabling Leverage Browsing Caching in WordPress

In order to enable Leverage Browsing Caching in WordPress, you need to use code. Don’t worry – it’s not as difficult as you may believe. You just have to reach the .htaccess file, add a given piece of code and that’s it. Leveraging Browser Caching with the Htaccess file is the easiest and most effective method you should learn about.

The easiest and fastest way to make sure that your WordPress website is making the most out of both server-side and browser caching is to use a managed WordPress hosting, which pre-configures all the necessary settings for you.

Enable Leverage Browsing Caching in WordPress manually by doing these:

  1. Add Expires Headers
  2. Add Cache-Control Headers
  3. Turn ETags off

To do that, you need to follow the steps below:

  1. Access the website files

Start by logging in to your hosting account/cPanel. Navigate to the file manager. Here, you will find the website’s settings, where you need to Turn On the Hidden File option. Then, go to the website’s root directory and reach your .htaccess file.

It is usually located in /public_html/.htaccess. If the domain of your website is custom, you will find it under domainname/public_html/.htaccess. Right-click the file and edit it using the instructions you are given.

  1. Add the Leverage Browsing Caching code in your .htaccess file

The next step is the simplest. Copy the code below and paste it at the end of your .htaccess file content. Don’t make any other changes in the file.

#Customize expires cache start - adjust the period according to your needs
<IfModule mod_expires.c>
  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  ExpiresActive On
  ExpiresByType text/html "access 600 seconds"
  ExpiresByType application/xhtml+xml "access 600 seconds"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/javascript "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/javascript "access 1 month"
  ExpiresByType application/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresByType image/jpg "access 1 year"  
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresDefault "access 1 month"

</IfModule>
#Expires cache end

The settings included in the code above include a 600-second refresh/expiration time for HTML, and one month for CSS and JavaScript. The purpose of this expiration period is to avoid having your visitors redownload the assets too often. If you perform changes in terms of assets more often, you can change the period according to your needs.

For people who want to Leverage Browsing Caching, altering the .htaccess file is the best option. As you may see in the piece of code, images will expire after one year has passed.To add expires headers .htaccess, you need to change the file without damaging anything else.

However, some people don’t want to mess with their .htaccess file. If that is your situation, you can simply use a Leverage Browser Caching plugin. You will find out more about such plugins later in this article.

  1. Add cache-control headers via Apache

Copy the code below:

# BEGIN Cache-Control Headers

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

Setting an expiry date or a maximum age in the HTTP headers is no longer requiredbecause it was already set during the previous step, which means you don’t need to repeat it here.

  1. Turn Etags off

Etags stands for Entity Tags and they refer to new versions of cached files. Because you have already set cache-control headers, there is no need to use ETags, so you can switch them off to improve the loading times. Add the following piece of code to the .htaccess file:

<IfModule mod_headers.c>
            Header unset ETag
</IfModule>
FileETag None

Save the .htaccess file and you are done!

NGINX Server and Leverage Browsing Caching

If your website uses NGINX, you will need to use other pieces of code because you won’t be able to find the .htaccess file. Again, it is a very easy process that doesn’t require much tech knowledge. Go to /etc/nginx/sites-enabled/default and paste this code there:

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }
    location ~*  \.(pdf)$ {
        expires 30d;
    }
}

Add Cache-Control Headers (NGINX)
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}

You probably can tell that the expiry time for the image files is set to 365 days, the equivalent of one year. PDFs will expire after only 30 days. You can customize the code the way you want, just as in the previous case.

After editing NGINX, save the file and you can rest assured knowing that you activated Leverage Browser Caching on NGINX server.

Leverage Browsing in WordPress using plugins

Tweaking the .htaccess file where you don’t need it can ruin your entire website. Making one single mistake will lead to blank pages and errors, so it is perfectly understandable if you don’t want to alter the file on yourself.

Luckily, there are plugins that can be useful, without you needing to learn how to enable Leverage Browser Caching in WordPress

manually. Installing a plugin can be done like this:

  1. Download the plugin – one example can be found here
  2. Navigate to Dashboard, Plugins and Add New
  3. Find “Leverage Browser Caching”
  4. Click Install Now
  5. Activate the plugin
  6. Test your website

There are other plugins you can use as well, and some of them are listed below. Choose them according to your requirements:

W3 Total Cache – WordPress plugin

Fixing Leverage Browser Caching in WordPress with the W3 Total Cache can be done by following the steps listed below:

  1. Download and install W3 Total Cache WordPress plugin
  2. Navigate to General Settings and select Enable Browser Cache
  3. Click save and navigate to Browser Cache Settings (top of the page)
  4. Choose the cache headers available
  5. Set expires, cache-control and ETag headers (based on the settings done before)
  6. Save all settings and refresh your website

WP Fastest Cache

WP Fastest Cache is another plugin that you can use to activate Leverage Browsing Cache in WordPress. It is even simpler to activate than the previous plugin:

  1. Download and install the WP Fastest Cache.
  2. Go to plugin settings
  3. Select Browser Caching by checking the box
  4. Click on submit to apply the changes and that’s it

Cache Enabler – WordPress Cache

This plugin comes with more features that you might find helpful in the future: you can automate the cache cleaning process, or you can do it by hand, you can Purge Page manually, you can minify HTML and JavaScript and many more. To use it, simply:

  1. Install the plugin and activate it
  2. Go to settings
  3. Click on Enable Leverage Browser Caching

Use Yoast SEO to edit the .htaccess file

You can also edit the .htaccess file in a safer method by using Yoast SEO Plugin. The most commonly used WordPress plugin is SEO by Yoast. By using this plugin, you can edit the .htaccess file easily. If you don’t already have Yoast, you need to install it and activate it beforehand. After that, you need to:

  1. Access SEO, then Tools.
  2. Navigate to File Editor
  3. The .htaccess file will be opened in a text editor where you can paste the pieces of code listed above
  4. Save changes

After making the changes you can use Google PageSpeed Insights to check if everything is fine after making the changes. If your website leverages browser caching properly, you are good to go. If not, you should go through the process again and see what you’ve missed.

Caching third-party resources

After performing all of the changes described in this article, you might still obtain a bad score when testing your website’s speed using various tools. Google PageSpeed Insights can give you a bad score because of many third-party scripts or services that run behind your website. These scripts don’t have a long expiration time because of a multitude of reasons.

If you will still get messages regarding your Leverage Browser Caching in WordPress after following all possible tips, there is nothing much you can do besides eliminating scripts that you don’t use. A maximum of three scripts should be just enough for a website, so make sure to clean your list.

After making this change, everything should work fine, and the loading time of your website is supposed to be as close as possible to perfection. In case you encounter a problem that is very specific, and it doesn’t have anything to do with third-party scripts, you should get informed about it and see what setting causes the issue.

Ending thoughts on how to leverage browser caching in WordPress

Keep in mind that you might not notice the changes you make immediately after installing a plugin. The reason behind this delay is the CSS/Stylesheet file. The browser cache you already saved in your computer will prevent you from seeing the changes you have done. To properly see the website after making several changes, it would be recommended to visit it using the Incognito function of your browser. By using this function, you won’t use cache resources and you should be able to see the changes properly.

At the end of the day, the method you choose to Leverage Browser Caching is not relevant. The only thing that matters is to see it in action. As long as Leverage Browser Caching in WordPress works as supposed, the way you got there doesn’t matter. You can choose the method that you are comfortable with and the result will be the same. Either you decide to alter the .htaccess file or use a plugin, you will get better loading times by activating Leverage Browser Caching.

If you enjoyed reading this article about leverage browser caching in wordpress, you should read these as well:

Up Next:

Joomla vs WordPress: An in-depth Comparison

Joomla vs WordPress: An in-depth Comparison