Does your website loads too slow? A slow website can seriously impact both customer satisfaction and the traffic to the website.
There are many reasons that can make your website slow, but most of all it can be the content rendered by your website. Here in this article, we are going to understand What is browser caching and how it can improve Website Performance.
What is Browser Caching?
Whenever a user visits a website, the browser will download all the page resources such as images, HTML, CSS, and JavaScript.
Browser caching is a technique used to store all the static contents like images, HTML, CSS, and JavaScript in the local storage. If the browser caching is enabled then all static resources are downloaded for the first time and after a subsequent visit, the static content is served from the browser’s cache.
Why should we Leverage Browser Cache?
Browser Caching will improve your website’s speed and performance. It helps your visitors navigate through your website smoothly, without waiting for resources to be downloaded again. It overall improves user experience.
Following are the other benefits of Leveraging Browser Caching:
Reduce the number of requests to the server – Instead of downloading content from the server, it will load the content from the browser cache.
Save Bandwidth – With Browser cache enabled, there is no need to download resources again and again. This reduces the bandwidth consumption at both the user and the server end.
Improve SEO(Search Engine Optimization) – Website speed is one of the main factors for ranking on the search engines. It improves your SEO and provides a better chance to land on search results.
How to Leverage Browser Caching?
There are different ways to leverage browser caching. We are going to learn two ways of enabling browser caching.
1. Leverage Browser Caching Using .htaccess
To leverage browser caching, we need to tell the browser for how long it should store our static files in the local storage. We will set an expiry time for each file type we want to cache and it will be refreshed/redownloaded after the defined time period.
We will set Cache by using the .htaccess file. In order to do that you need to access the root directory of your website. You can either use the FTP service like FileZilla or you can access it directly from File Manager present in your hosting control panel.
Go to your website directory and under public_html directory check for the file named .htaccess and open it to edit it. In case the .htaccess file is not present, then create a file named .htaccess and put the below-given code into it.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
#Default
ExpiresDefault "access 2 days"
</IfModule>After adding save the file. You can also modify the expiry time by modifying “access plus 1 year” to “access plus 1 month“.
2. Leverage Browser Caching Using WordPress plugins
If you own a website hosted on the WordPress CMS platform, then manual editing the .htaccess files can mess up things. It is better to take advantage of WordPress easy to use plugins.
Following are some of the top WordPress plugins that you can install and activate to leverage browser caching:
a) Leverage Browser Caching
1. Open your WordPress Dashboard and go to Plugins » Add New
2. Search for “Leverage Browser Caching” using the Search box.
3. Click “Install Now“
4. Click on “Activate the Plugin“
5. Now test your website performance
b) WP Fastest Cache
1. Open your WordPress Dashboard and go to Plugins » Add New
2. Search for “WP Fastest Cache” using the Search box.
3. Click “Install Now“
4. Click on “Activate the Plugin“
5. Go to “WP Fastest Cache” plugin settings.
6. Select Browser Caching by checking the box.
7. Click on submit to apply the changes.
8. Now test your website performance.
Useful Reminder
While enabling browser cache be careful with the expiration time you set for the resources. Just in case if you modify any resource on the server, then it will take time till the Expiry for the browser to load the updated resource.
To avoid such an issue, you can update the filename to allow the browser to download updated content.
For example:
If you updated a CSS file named “style.css“, then change and update its name to “style_new.css” and update the name on your HTML file. The browser will download the fresh copy of this file, as it was not present earlier.
Conclusion
Browser Caching can help you improve your website speed and performance significantly. It is always good to provide your visitors with a good user experience to increase conversions.
I hope this article will help you understand and leverage browser caching. Please share this guide with your friends and provide your valuable feedback in the comment section below.
2 Responses