Leverage Browser Caching
Page Speed

Leverage Browser Caching: Instantly Increases Page Speed

Leverage Browser Caching: Instantly Increases Page Speed

Introduction to Leverage Browser Caching

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 take to load these files may vary. This may also depends on the speed of 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 web server. 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 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 website.

What is leverage browser caching?

By using leverage browser caching, you as 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 request 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 visitor’s browser rather than 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 leverage browser caching, 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 term, 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 Leverage browser caching, a webmaster instruct 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 reduce server load time and much less bandwidth.

How to leverage browser caching?

To leverage browser caching, 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 webserver, 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 Leverage Browser Caching 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 time period 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 an year is absolutely fine.

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

How to setup Browser Caching in WordPress

We may enable Leverage Browser Caching primarily by 2 ways. They are given below.

  1. Directly editing the .htaccess file of web server
  2. By 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.

Webmaster need to edit .htaccess file & add Expire Headers for Leverage Browser Caching 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 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 below 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 right side. Just click here and check “Show Hidden Files (dotfiles)” & click on save.

File Manager

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

Accessing Via FileZilla

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

Filezilla

Once 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 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 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 .htaccess file of web server.

Expires Caching Code

Save .htaccess file & refresh your webpage.

You may download the file from Here

The code above does a few things:

  1. 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 pdf’s, JavaScript and CSS as well.
  2. It instruct 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 in 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 very long period, your readers may not get 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 Leverage Browser Caching 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. Other wise 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 is represents a comment. It does not do anything except comment what you are doing.  Lines that start with the character # in .htaccess will be ignored. comment are 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 need to taken with it…”

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

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

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

    • “Header set Cache-Control” states that it sets a header.
    • “max-age=2592000” states that how long it must be cached. It is specified using seconds. It is caching for exact 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 Caching 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 your improve page speed too. Features include Minify CSS & HTML, Gzip Compression, Combine CSS & JS to reduce requests etc. In Fact, WP Fastest Cache has lot more functions than just Leverage Browser Caching 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 enables Leverage Browser Caching for your site.

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 in lightning speed. It also reduces the amount of requests needed to serve up the webpage.

When you use plugins like this, there is no need to change .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 a 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 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 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

Retesting your website for Leverage Browser Cache

Now, it is time to recheck website with Pingdom tool. See below, How it improves 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 Leverage Browser Caching, you will start seeing great improvements in the performance of your website. If you wish to see it in 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 that 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 parameter to achieve higher page speed is by using Leverage browser caching. It helps to improve the web performance testing score.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!