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.

FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType text/html "access 600 seconds"
ExpiresByType application/xhtml+xml "access 600 seconds"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresDefault "access 1 month"

#Expires cache end

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:
GZIP Compression
Google Fonts Optimisation
Lazy Loading
Minifying code
Enabling CDN
DNS prefetching
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!