How To Leverage Browser Caching For Your Website

Speed is one of the most important requirements for your website. Many statistics show that visitor tends will leave websites that take 3 to 5 seconds or more to load and find an alternative site.

Obviously, this is not good for your website and will gradually decrease your site visitors. There are many ways to improve your website speed. And one of the way to speed it up is with leverage browser caching. You might also want to read best useful tips for your WordPress.

Browser Caching

What Is Browser Caching

In common terms, the definition of caching is placing something in storage (in secret or hidden) which may come useful in future. A browser caching means, your web browser will take pieces of the web pages and store it on your computer hard drive.

Some of the assets your browser may store is images (including logos, pictures, and backgrounds), HTML, CSS, and Javascript. These assets are called Static Assets which is rarely changed each visit.

Which assets to cache and how long it will be stored is determined by the website. Some assets may be removed after a few days while others may remain in the storage for a year.

Benefit Of Browser Caching

When you visit a website for the first time, your browser will communicate with the remote server. Where your web browser will send a request and web server will reply by sending website's asset.

The first asset sent by the web server is HTML. As your web browser continues to read the HTML code, it will send more requests to the server. This time web server will send other assets such as images, CSS, or Javascript depending on the structure of the website.

This whole process will consume your bandwidth. How long a website to completely load and become functional may vary. It is because some website has a different amount of requests or size of assets.

By caching these static assets in the local storage, your web browser will reuse these assets on next visit instead of downloading same assets all over again. This will definitely improve your page speed tremendously while decreasing bandwidth usage for both server and visitors.

Downside Of Browser Caching

Although by caching the static assets will speed up your site and improve the browsing experience, yet there is a downside using it. As you already know, once the assets are stored on the local drive, it will live there until it expired.

Let's say, for example, you have stylesheet named mystyle.css on your website. Once this page is loads for the first time, this stylesheet will be cached by the browser. And after that, you wish to changes on this file. You made the changes and reload the page however it still using the old stylesheet. One of the reasons why this happens is because of the caching mechanism.

There are few ways to overcome this downside. One of it is using versioning where you will add a version number at the end of the file. Let's take a look at the below example.

By using the versioning, you will tell the browser which is the most recent file to load and cache. Don't forget to increase the version number each time you make a change to the file.

How To Leverage Browser Caching

Now we have gone through the introduction of caching and its pro and con. Let's start leverage browser caching by open up your cPanel. Next, navigate to your File Manager and select your preferred domain. You might need to check your "Show Hidden Files (dotfiles)" box if it unchecked.

After that, open up your .htaccess file and enter the following lines. But before you edit your .htaccess file, please don't forget to create a backup. Once you entered the lines below, save it and it is done. Pretty easy, right?

In the above code, we are using mod_expires.c. Mod_expires is an Apache Web server module which controls the setting of the Expires HTTP header. It also controls the max-age directive of the Cache-Control HTTP header as well.

As you can see in the seventh line of code above, we have set the expire time for jpg image extension for one year. This means web browser will cache this image extension and load it from local storage for one year on each visit after the first site visit. Feel free to modify the lifetime of these assets as per your need.

Browser Caching Plugin

Aside from above method, you can also use a plugin to leverage browser caching if you are using WordPress. There are few plugins available in WordPress plugin directory such as Leverage Browser Caching and Browser Caching with .htaccess you can look into.

Conclusion

To sum up, the benefit of leverage browser caching outweigh its downside. It's not only will speed up your site page load but will also improve user experience on your website. Moreover, you also can reduce bandwidth usage for your server and help save your visitor's mobile bandwidth as well.

  • If you think your friends would find this useful, please share it with them. It will allow us help more people.
  • To get more of our latest update, please subcribe to our newsletter.
  • You can also print this article for reference.
This article has been printed from https://www.jebatonline.com/articles/how-to-leverage-browser-caching-for-your-website/

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.