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
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.
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 application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
## 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.
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.