How to Leverage Browser Caching in WordPress
Websites with a longer load time tend to have greater bounce rate, the reason being poor user experience. Users today prefer faster websites that load within 3-5 seconds. Page speed is a vital parameter to analyse a website’s loading speed and search engine optimisation. Search engines successfully crawl into web pages that load faster than those which lack speed. Hence, to make your website rank in SERPs you must improve your website’s page speed.
Besides enabling GZIP Compression on your WordPress website, you must work on to leverage browser caching to make your website load faster. To optimise page speed, such practices can create a dramatic difference.
How to Leverage Browser Caching in WordPress?
Following instructions can successfully enable browser caching for a WordPress website.
Access .htaccess file
To enable browser caching in WordPress, the .htaccess file needs to be edited. To locate . htaccesss file you need to use access cPanel or use File Transfer Protocol (FTP). This file is found in the root directory and is often hidden; hence you need to force hidden files to show.
Edit .htaccess file
By editing the .htaccess file of a WordPress you can adjust expiry dates of cacheable resources mentioned above. Enable the following changes in the .htaccess file to successfully enable leverage browser caching:
1. Add Expiry Headers with longer expiry dates
Adjust expiry dates according to your needs by modifying code present in the .htaccess file. You can boost site performance by changing expire headers. The following code modification is done keeping in mind the average time after which changes are made to HTML, CSS and JS elements of a WordPress site. The code also suggests how much time shall a browser take to expire the JPEG, GIF and PNG elements of a website.
2. Add Cache-Control Header
Under the above-mentioned code add the following to specify Cache-Control Headers.
# BEGIN Cache-Control Headers <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" <filesMatch "\.(css)$"> Header append Cache-Control "public" <filesMatch "\.(js)$"> Header append Cache-Control "private" <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate"
3. Unset ETag Headers
ETags are entity tags are a mechanism that web servers and browsers use to analyse if the component in the browser’s cache matches the original server. One of the best practices includes to unsetting ETags especially if your website is using multiple servers or CDN. Add the following code to your .htaccess file to unset ETags.
# Disable ETags Header unset ETag FileETag None
Save and Run
Save the changes on your .htaccess file and run the page speed tests to make sure that you have successfully enabled browser caching on WordPress Website.
Enabling Leverage Browser Caching on WordPress with a Plugin.
Browser Caching is a critical practice especially when you do not want to take any risks with your WordPress website. To make your work easy, WordPress offers multiple compatible plugins that enable browser caching for your website.
One of the fastest and most recommended plugin that WordPress offers is WP Rocket. It dramatically speeds up your website by enabling multiple speed optimisation practices. WP Rocket’s dynamic features also include:
Google Fonts Optimisation
Hope this article was much of a help! Boost your website speed and gain even better leads. Want to share something? Be part of the conversation, comment below!