Leverage Browser Caching

Leverage Browser Caching: Instantly Increases Page Speed

Introduction to Leverage Browser Cache

Are you Looking for ways to increase your website loading speed massively??

Do you ever checked your website in online page speed testing tools such as GTMetrix or Google Pagespeed Insights   & noticed a warning for Leverage Browser Caching?

Then, You have landed here for a right reason. In this article, I’m going to give details about caching. It will help you understand what it is all about and how you can enable it on your own website.

What is browser caching?

Typically, when a you visit a web page of web site, the web browser has to load several different resources such as the JavaScript files, style sheets (CSS), images and logo file. Further, your browser downloads web files( CSS file, JS files, HTML files, images, text.. ) from the server to properly render the page. The time it takes to load these files may vary. This may also depend on the speed of the web site.

So If you access any other pages on this website or the next time you visit the same website, you may notice an increase in speed and faster load time as some of the web resources such as logo, CSS files are retrieved from browser rather than web server. Here, your browser loads the web cache from the local disk and only requests updated content from the webserver. This is called as browser Caching.

Without the Browser Caching set-in, the browser will request the same web files over and over each time you visit the same web page in the future. That results in longer page load time, more bandwidth usage & server load too.

Therefore, Browser Cache or Web Cache is temporarily storing of web files of a website by the browser on the hard disk for future use. And, Caching also enables your browser to store & recall all the saved files that were previously loaded on the initial visit of the website.

What is leverage browser caching?

By using leverage browser cache, you as a webmaster instructing the browser to store a copy of web files. so that they don’t have to be loaded from the server each time visitor requests a page. If a visitor re-visits your site or accesses any other pages on this site, they will notice an increase in speed and faster load time. It is because the resources are retrieved from the visitor’s browser rather than the web server.

Caching is a strategy that can help you increase the speed of your website. Thus allowing you to retain your potential visitors. And reduce your overall website load time and bounce rate.

When you use it, your webpage files will get stored in the browser cache. Your pages will load much faster for repeat visitors as it stores some resources of pages that share those same resources.

In simpler terms, the browser “remember” the resources that it has already loaded. This is the reason that the first view of a web page takes longer than repeated visits. To use it, a webmaster instructs browsers how their resources should be dealt with.

Advantage of Browser Caching

Setting up Browser Caching may improve the following.

  1. Webpage loading speed time
  2. Visitors experience.
  3. Improve your Google PageSpeed score, thus helps in improving the web performance testing score.
  4.  It reduces server load time and much less bandwidth.

How to leverage browser caching?

To leverage browser cache, you have to do the following two steps. They are

  1. Change the HTTP request headers of your resources to use web caching.
  2. And, Optimize your web caching strategy.

Caching methods for browsers

For all cacheable resources, always specify either one of Expires or Cache-Control max-age, and one of Last-Modified or ETag. It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag.

Two Different Methods of Caching

1. “Expires” using .htaccess.

It takes care of caching for most people who are just getting started. It is also possible that the expires method did not work for your web server, in that case you may try to use Cache-Control.

2 Cache-Control using .htaccess.

It is an alternative method of caching technique which gives us more options. You may use it once you are more comfortable with caching mechanism.

Pro Tip :
Using both the Expires Headers & Cache-Control together is not at all recommended.

Pre-Requisites While Setting Browser Caching

Before enabling it, you should have an idea on below two points. They are :

  • What resources(files) to Cache?
  • How often you modify the files?

By Enable Browser Caching, webmaster defines the time period in which a browser should store the temporary data files before updating.

Usually, your Stylesheets, images and Script files [ CSS, JS, Images ] don’t tend to change a lot. So setting  Cache period to months or even a year is absolutely fine.

Here, The period may be anything ranging from days to months or even years. And it will depend on the frequency you change your web resources. And, only you as a webmaster can determine the best for your site resources.

How to setup Browser Caching in WordPress

We may enable it primarily in 2 ways. They are given below.

  1. Directly editing the .htaccess file of webserver
  2. Using WordPress Plugins

By adding the Expires Headers to your web server’s .htaccess file you can achieve amazing results to your web site loading speed.

The webmaster needs to edit .htaccess file & add Expire Headers for it to work properly. The .htaccess file can be edited directly from the Cpanel [aka web hosting access console] or you may use plugins like Yoast.

The .htaccess file controls many important things for your web site. If you are not familiar with the .htaccess file, take the backup of .htaccess file & update the file.

And if you are not comfortable playing with your server’s .htaccess file, then you may try WordPress plugins below.

Accessing .htaccess file of your web server

We can do this in two ways.

1. Cpanel method

2. FTP client (such as Filezilla, WinSCP)

Accessing Via CPanel

First login your Cpanel

cpanel

Go to the file manager then

Click on File Manager

Now open the file manager directory. Then, locate settings at top corner of the right side. Just click here and check “Show Hidden Files (dotfiles)” & click on save.

File Manager

Then,  It will show all dots & hidden files. Please download only .htaccess file.

Accessing Via FileZilla

Please provide details of the credentials of the server in the FileZilla window & then login into it. Then, go to public_html  >> .htaccess file, drag and download it for editing.

Filezilla

Once the download is complete, open .htaccess file in any code editor. Then, add code of Leverage Browsing Caching to the file of .htaccess. Also, Please do not delete any code inside .htaccess file.

Once the update is done, please re-upload .htaccess file to the server either by Cpanel or Filezilla.

Adding Expires Caching Headers by updating .htaccess

You may find .htaccess File in Website Root Directory. Please add a piece of code to .htaccess file.

The below code instruct browsers what file types to cache and how long to “cache” these file types. It must be added to the end of the .htaccess file of the webserver.

Expires Caching Code

Save .htaccess file & refresh your webpage.

You may download the file from Here

The code above does a few things:

  1. The above piece of code instructs the web browser which file types are going to be cached. Image file types such as gif, jpg, & jpeg are specified here. Further, you may notice other file types such as PDFs, JavaScript and CSS as well.
  2. It instructs the browser how long the documents files should be cached for (example, days, months or years if required)

The above code is optimized for almost all kinds of blogs & websites. But if you change the file types on your website more frequently, you can replace the ” 1 month ” with your own value.

Further, Please note while enabling Browser Caching, if you set them with a very long period, your readers may not get an updated version of your website if it updates. Usually, the above method of Expires Headers is enough for most websites.

But, Sometimes the Expires Headers method didn’t work as expected in some servers, then Cache-Control method is a good option to consider.

Adding Cache-Control Headers By updating .htaccess

Cache-Control gives more control over browser caching.

Cache Control Code

And, save the .htaccess file once update is done.

You may download the file from Here

The above code is trying to set a cache control header depending on the file type. It successfully enables it for your website.

You may change cache expiration to one of either week or month or year. By default you need to set at least 7 days or 1 week. Otherwise, you will face the leverage browser cache issue for your website.

How cache-control works

Let’s try to understand the above code line by line.

# 1 Month for most static assets

The above line represents a comment. It does not do anything except comment on what you are doing.  Lines that start with the character # in .htaccess will be ignored. the comment is recommended as you may have several different sets of files as your caching solution grows over a period of time.

<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>

The above line represents that “file types are one of these types, then some action needs to taken with it…”

Please notice that the file may contain different types of file types (CSS, js, jpeg, png, etc.). The caching instructions provided in the file will only apply to those mentioned file types of file. As an example, if you don’t want jpg files to be cached for the amount of time, you may delete “jpg” from the above line of code. Further, if you want to add HTML to the file, you may just add “html” to the above line of code.

Header set Cache-Control “max-age=2592000, public”

The above line is where the actual headers are inserted and the values are provided as per your wish.

    • “Header set Cache-Control” states that it sets a header.
    • “max-age=2592000” states how long it must be cached. It is specified using seconds. It is caching for exactly one month which is “2592000” seconds.
  • “public” is stating that this is public.

</filesMatch>

The above line closes the statement and ends the block of code of .htaccess file.

Leverage Browser Cache with WordPress Plugins

If you are worried about modifying the file or confused with the whole process or you don’t have access to .htaccess  then the same may be achieved by using Browser Caching WordPress Plugins.

WP Fastest Cache

WP Fastest Cache is available for free in WordPress repository. Also rated with 5 stars with over 5lakh installs.

WP Fastest Cache plugin handles all types of resources very well. Besides Browser Caching, It has some awesome features to improve page speed too. Features include Minify CSS & HTML, Gzip Compression, Combine CSS & JS to reduce requests etc. In Fact, WP Fastest Cache has a lot more functions than just Leverage Browser Cache WordPress. Do Install the plugin, & explore its full potential to learn more about it.

  1. First Install the WP Fastest Cache Plugin.
  2. Go to settings of WP Fastest Cache Plugin.
  3. Now, Turn on Browser Caching. See Attached Snapshot.
  4. Click Submit.
  5. It will successfully enable it for your website.

WP Fastest Cache plugin

WP Fastest Cache works by producing static HTML files for your website. It renders cached pages over and over again to site visitors. This allows the users of your website to access the information at lightning speed. It also reduces the number of requests needed to serve up the webpage.

When you use plugins like this, there is no need to change the .htaccess file. Also, Plugin will do everything for you once you enable and set configuration settings as per your wish.

W3 Total Cache

W3 Total Cache plugin is one of the popular plugins available for free in the WordPress repository. Apart from Browser Caching, this plugin also offers lots more features. Such as the Minification of CSS & JavaScript, AMP support, SSL support, Various security features, etc.

W3 Total Cache Plugin

  1. Install the W3 Total Cache Plugin.
  2. Go to General Settings of plugin.
  3. Turn on Browser Caching & click Save button.
  4. Go to the Browser Cache Settings tab.
  5. Turn on Expires Headers, Set Cache-Control Headers.
  6. Save all settings
  7. With this, You have completed enabling Browser Caching for your website

Re-testing your website for Leverage Browser Cache

Now, it is time to recheck website with the Pingdom tool. See below, how it improves the score for Leverage Browser Cache for your website. Also, you may see page speed of your website too.

Performance Insights

How To Multi-fold the Page Speed Even Further

After enabling it, you will start seeing great improvements in the performance of your website. If you wish to see it in the Chrome browser, Go to Chrome Developer tools. And click (Ctrl+ Shift + I) and hit F5 to see how it has been performing.

Further, if you wish to improve speed a lot more than that you may try the following too. They are Minifying the CSS and JavaScript files & Enabling Gzip Compression for your website.

Conclusion

One of the most important criteria for ranking a website is speed. Having a fast website really means that your website content should load quickly. Thus allowing your visitors to be happier and get the information they requested with ease. One of the parameters to achieve higher page speed is by using it. It helps to improve the web performance testing score.

Leverage Browser Caching: Instantly Increase Web Page Speed