Set WordPress Browser Caching

Looking for how to leverage browser caching in WordPress? In this article, we will help you set and configure the WordPress browser caching

Set WordPress Browser Caching

Are you looking for a simple solution to leverage browser caching in WordPress? Then, you can use a leverage browser to cache WordPress manually. In this article, we will set up how to take advantage of browser caching in WordPress and learn ways to increase the loading speed of your website.

Caching is one of the most effective ways to ensure your website loads faster for visitors. However, your site should tell browsers exactly what content they need to cache for optimal results. Unfortunately, caching plugins often doesn’t give you complete control over these settings, so it’s up to you to configure them manually.

Fortunately, WordPress enables you to do this relatively simply. All it takes is to make a few changes to your .htaccess file. In this article, we’ll talk more about browser caching, how to check if your website leverages it correctly, and how to configure it. So let’s get to work!

Browser Caching

Ideally, when someone visits your website, the browser should store some of the content locally so that subsequent visits don’t require reloading. So this practice is known as ‘browser caching,’ and here’s why it’s a good idea to know how to take leverage of your browser caching and implement it on your website:

  • It decreases loading times. The fewer resources a user has to load, the faster your site should render.
  •  Potentially lower bounce rates. There’s a direct correlation between loading times and bounce rates. The higher the former is, the bigger the chance of visitors bailing on your website.
  •  It reduces the amount of work your server has to do. Since repeat visitors don’t need to load content from your server, it doesn’t have to work as hard to keep up with traffic.

It’s important to understand, in most cases, you don’t want browsers to cache your entire website. Many sites now include a lot of interactive content that updates constantly. Users who cache entire pages might miss out on changes to them.

Given this, you need to be picky about the content you tell browsers to cache. For example, images, logos, and Cascading Stylesheets (CSS) stay mostly the same.

This means you can tell browsers to cache them and specify a length of time. Ideally, your website’s caching configuration should make distinctions between the types of files that get (or don’t get) regular updates. This way, users won’t have to empty their caches manually to see any changes you’ve made to your site.

Checking for Caching WordPress Browser

When we talk about how to leverage your WordPress site’s browser caching, we refer to configuring your website so browsers know what content they need to store locally and for how long. The easiest way to determine if a site leverages browser caching correctly is to use a tool such as Google PageSpeed Insights, which analyzes this and other settings. To get started, enter your website’s URL and click on the Analyze button:

PageSpeed Insights will score your website’s optimization on both mobile and desktop. For each ‘version’ of your site, you’ll get an individual score ranging from 0–100, along with suggestions on improving it. One of the critical factors PageSpeed Insights takes into consideration when it calculates your score is whether your website leverages browser caching:

If you configure your WordPress website correctly, you won’t see the above message, and you should get a decent PageSpeed Insights score.

Remember that the Anzu theme is optimized in several aspects to provide you with a decent PageSpeed Insights score. However, there are many ways you can improve your website’s performance, and learning about them is a fantastic way to invest your time.

Set WordPress Browser Caching

In the past, we’ve discussed caching plugins and the top options. These tools are excellent if you want to ensure your WordPress site’s configuration runs smoothly. However, if you add a few lines of code to one of your core files, you can gain greater control over your browser’s cache setting, knowing how to set and leverage browser caching WordPress. Before you proceed, you should have a recent backup of your website in place, just in case!

Website FTP

In the next section, you’ll need to access your .htaccess file and edit it. The best way to do this is to use File Transfer Protocol (FTP) via a dedicated client. We’re partial to FileZilla since it packs many features and is relatively simple.

To get started, install the client and execute it. You’ll see four empty fields at the top of the screen, reading HostUsernamePassword, and Port:

Using this protocol, you’ll need specific FTP credentials to log into your website. In most cases, you should have received them via email when you signed up with your hosting provider. However, you should also be able to find them on your hosting dashboard or via cPanel.

Once you have your credentials, enter them and click the Quickconnect button. FileZilla will establish a connection to your website, and one or several folders should appear on the lower-right side of your screen. One of them should be your WordPress root folder (also called wwwpublic_html, or named after your website), where all its files reside:

Once you open the directory, move on to step number two!

Editing .htaccess File

.htaccess is a WordPress core file that instructs your server on how to serve files and pages. For example, if you’re using pretty permalinks, .htaccess will include instructions on handling them. You can also configure the file to block access to specific pages for particular IPs and much more.

In this case, we will use .htaccess to tell your server which files to cache. To do so, look for the .htaccess file within your root directory. Right-click on it, and choose the View/Edit option. This will open the file using your local text editor, enabling you to make changes to it:

Before you add any new code to your .htaccess file, scroll down until you find the line reading # END WordPress. In most cases (including this one), you want to add a new code to the file before that line. Here is an example of a simple browser caching setting in WordPress that you can implement right away:

Example

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

</IfModule>

For example, if you’re running a WordPress blog, chances are you won’t make regular changes to your post’s images or logo. In this case, we can store those files on your visitor’s browser caching for a long while.

Let’s Say One Year. In the code above, we cover all of the most popular types of images in one fell swoop. So the first half of each line indicates the type of file we’re dealing with, and the second sets an expiration date for it:

ExpiresByType image/jpg “access 1 year”

Caching HTML, CSS, and JavaScript files

Of course, not all content should be cached for a year so that we can play around with the value. In this example, we added instructions for caching HTML, CSS, and JavaScript files:

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/CSS "access 1 week"

ExpiresByType text/HTML "access 1 month"

ExpiresByType text/x-javascript "access 1 week"

</IfModule>

HTML content to update

Here, we set our HTML content to update after a month from the first time visitors access it, which is a reasonable timeframe. CSS and JavaScript files, on the other hand, tend to vary more often when using complex themes such as Anzu or several plugins. With that in mind, we set their cache expiry dates to one week after access.

You’ll have a solid browser caching in WordPress foundation as you implement those rules using your .htaccess file. Let’s cover our bases by adding instructions for other file types:

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/CSS "access 1 week"

ExpiresByType text/HTML "access 1 month"

ExpiresByType text/x-javascript "access 1 week"

ExpiresDefault "access 1 month"

</IfModule>

ExpiresDefault 

The line starting with ExpiresDefault sets a default cache time of one month for all your files. However, you can override it by adding caching instructions for particular file types. The point is to catch the other file types that might not warrant individual rules to boost your website’s loading times even further.

Remember to save the changes to your WordPress .htaccess file and close your text editor. FileZilla will ask you if you want to override the .htaccess file on your server with the new version, to which you should say: “Yes.” Now, test your website using PageSpeed Insights one more time. The browser caching optimization suggestion should be gone!

Final Words

Enabling a caching plugin for your website is easy. However, it often only gives you full control over what type of content it stores on users’ computers or for how long. On the other hand, the manual approach allows you to set your caching configuration for your WordPress browser content and is not difficult to implement.

All it takes to configure browser caching manually is to make a few changes to your .htaccess file via FTP. If you’re not afraid of a bit of code, you should be able to set it up quickly. Then, you can test your WordPress website using Google PageSpeed Insights for how it will take leverage of browser caching.