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.
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.
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.
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.
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.
He is a web developer, a programmer, and a computer technician. He obsessed with coding and enjoy learning new things. In his spare time, he likes to play online games, musical instruments or watching anime and movies.