How To Leverage Browser Caching To Minimize The Page Loading Time
February 3rd, 2018 | by Ravi Chahar || 9 Comments |
Many people get confused when they hear about the browser caching and its importance. Well, there is nothing to fret about.
To improve the speed of your website, you should allow the browser caching so that the files of your website get cached and stored in the browser.
When your users visit your website again then the browser would load the website faster because of the cache has been stored.
There is no need to load all the files again. In this post, I am going to tell you how to leverage browser caching for your WordPress website.
What Is Browser Caching WordPress
When a user opens your website for the first time then the browser loads all the website’s resources including the CSS files, HTML files, Javascript files and the images.
It is because you have instructed the browser to cache the resources of your website and store them on the hard drive of the user so that the browser won’t need to load all the files again.
It would reduce the page loading time. There would be no file to cache again and size of the website would get reduced for the browser.
You Can Leverage Browser Caching Using The .htaccess File.
Do you know how to edit the .htaccess file? It is because, in this process, you have to add a code in the file. This process of allowing browser caching is termed as the “Expires” because you would set the timing of the images and files to remember and the expire time.
Let me show you the process:-
Step 1:- Login to your cPanel and open the file manager from the “files” section. Don’t forget to click on the checkbox to show the hidden files. It is because the .htaccess file is the hidden file and you won’t able to see it if you uncheck the box.
Step 2:- Find the .htaccess file and right click on the file to edit it. Add the code shown below on the top of the file and click on the save button.
<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 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
In this code, you have just added the expiring time. It means that the CSS file and the HTML file would be cached for the 1 month on the user’s browser. After one month, if the user visits your website then the browser would cache these files again.
The expiring time for the images has been set to 1 year. The expiring time has been increased because the images you add to your blog posts remain the same but the codes in the CSS, HTML, and Javascript files can be changed.
NOTE:- If you think about editing the codes present in the files then the expiring time shouldn’t be set for a long time. It is because if an old user would visit your website after the change then he/she won’t see the change because the browser has cached the old files and the time hasn’t expired. He/she would be able to see the change only after the time gets expired.
Have You Tried To Leverage Browser Caching
The speed of your website should be great. You can reduce the page loading time by reducing the HTTP requests and by minifying. Another way has been defined in this post. The browser caching WordPress to guide the user’s browser to remember the files of your website.
There are many other ways to reduce the page loading time. You should focus on the code of your website and the images. Try to use the optimized images and remove the white spaces from the code. You won’t notice any change in the speed of your website, your users would experience it.
If you liked the article then you can also connect with us on Twitter, LinkedIn, and Facebook.
Hello Ravi,
Nice tip. I haven’t done it using .htaccess but I do use WP-rocket plugin and its caching abilities are quite great. I am a fan of this plugin ever since I started using it.
Thanks for writeup.
Hey Atish,
There are many caching plugins and people try the best they can. I haven’t tried it yet. But maybe I would give it a try. The browser caching is done by adding the expiring dates and guiding the browsers about the caching the files.
Thanks for stopping by.
Have a nice day.
~Ravi
Hi Ravi,
just a few days ago I tweaked again some settings on my blog to increase its speed. There are so many small details that one can adjust to make the website load faster, and leveraging the browser cache is one of them. Especially for those files that hardly ever change.
Personally I use the W3 Total Cache as a caching plugin which already includes the option to leverage the browser cache besides many other features.
Thanks for pointing this out,
Torsten
Hey Torsten,
I agree with you. There are many things which can be done to improve the speed of your website. Whether it is about reducing the page size or the browser caching, the page loading time would get reduced.
No doubt that W3 Total cache is one of the best plugins in the segment. There are many advanced settings which can improve the speed.
Thanks for stopping by.
Enjoy the day.
~Ravi
Hi Ravi,
A well-explained article with the code. I will apply this code to speed up the load time of my blog. Hoping I would be able to see some difference.
As I use a lot of images, so the load time effects a lot. I have already installed W3 Total cache and Autoptimize and could able to find some marginal difference.
Hoping this code will boost it a bit more.
Hey Navin,
If you check your page loading after adding this code, you wouldn’t really see any change because browser caching is used to improve the user experience. It means your users will see the change when they visit your blog again.
You can also feel it.
Thanks for stopping by.
~Ravi
Hello, Ravi!
You made it super simple for us! ?
I’m more concerned about the site speed all the time and try out the things here and there.
I will be looking more into the browser’s cache as it is showing bad with the quick check.
Thanks for the great shout out! ?
~ Adeel
Hello Ravi,
Brilliant post. I also haven’t done it manually through the .htaccess file as I am not a technical Guy. I am using WP Fastest cache plugin and this one of the best cache plugin I have ever seen. It drastically increases the performance of your website and does have leverage browser caching option. Thanks for sharing these great tips here.
Have a Great day ?
Vishwajeet
Hi Ravi,
Browser caching is an important part of speed optimization and most people (including me) prefer to rely on a plugin rather than using codes or editing .htaccess file.
I use Breeze plugin by Cloudways and it works pretty good. Thanks for sharing the code though, I will use it on a new site and compare the results.
Btw, which one would you prefer? Plugin or code?
– Shafi