Setting Leverage Browser Caching in WordPress can increase your pagespeed massively, either by editing .htaccess file or using simple plugins.
- 1 Introduction to Leverage Browser Caching
- 2 What is Leverage Browser Caching
- 3 How to Setup Browser Caching in WordPress
- 4 Optimizing and setting up WordPress Leverage Browser Caching via .htaccess
- 5 Adding Expires Caching Headers
- 6 Adding Cache-Control Headers
- 7 Leverage Browser Caching with WordPress Plugins
- 8 WP Fastest Cache
- 9 W3 Total Cache – WordPress browser caching Plugin
- 10 Speed up Even More
Introduction to Leverage Browser Caching
Setting up Browser caching can improve your page loading speed and readers experience. And it’s not a hard process as you might have thought.
By spending 5 minutes you can achieve it and improve your Google PageSpeed points.
What is Leverage Browser Caching
When you visit a website your browser downloads many web files( CSS file, JS files, HTML files, images, text.. ) from the server to properly render the page.
Browser Cache or Web Cache is temporarily storing some files of a website by the browser on the disk for future use.
So the next time you visit the same website, your browser loads the web cache from the local disk and only requests any updated content from the server. This results in better page loading time, reduced server load and less bandwidth.
Without the Browser Caching set-in, the browser will request the same files over and over each time you visit the same page in future. That results in longer page load time, more bandwidth usage & server load.
How to Setup Browser Caching in WordPress
To enjoy the benefits and advantages of Browser Caching you need to enable it first. So the web browser is able to temporarily store resources from your server.
Now when a user visits your webpage the resources are stored in their local disk. So the next time they visit your website again in future; resources are loaded from their local disk and everything is rendered instantly. Reducing the visitor’s bandwidth usage and improving overall experience.
Before Enabling Leverage Browser Caching you should have answer to these :
- What resources(files) to Cache ?
- How often you modify the files ?
To Enable Browser Caching first you need to set Expires Headers to contents. It defines the period which a browser should store the temporary data before updating.
Usually your Stylesheets, images and Script files [ CSS, JS, Images ] don’t tend to change a lot, so its Cache period can be set to months or even an year.
The period here can be anything ranging from days to months or even years. And it will depend to the frequency you change your web resources. And only you can determine the best for your site resources.
You can enable Leverage Browser Caching in WordPress primarily by 2 ways :
- Directly editing the .htaccess file
- Using WordPress Plugins
By adding the Expires Headers to your .htaccess file you can achieve amazing results to site loading speed.
And if you are not comfortable playing with your .htaccess file, then you could always try some of the WordPress plugins below.
Optimizing and setting up WordPress Leverage Browser Caching via .htaccess
You need to edit your .htaccess file and add Expire Headers for Browser Caching to work properly. The .htaccess file can be edited directly from the Cpanel or using plugins like Yoast.
Adding Expires Caching Headers
Expires Header control which resources can be remembered and temporarily cached by the browsers in local disk. Add the below code at beginning of your .htaccess file.
The above code is optimized for almost all kinds of blogs & websites. But if you change the file types in your website more frequently, you can replace the ” 1 month ” with your own value.
But be careful when enabling Browser Caching because if you set them too long your readers might not get the updated version of your website after updates.
The above method of Expires Headers in normally enough for most people. But there is also another alternate method known as Cache-Control.
Sometimes the Expires Headers method don’t work as expected in some servers, then Cache-Control method is a good option to consider.
Adding Cache-Control Headers
## CACHE-CONTROL HEADERS ## <filesMatch ".(jpg|jpeg|png|gif|ico)$"> Header set Cache-Control "max-age=31536000, public" </filesMatch> <filesMatch ".(css|js)$"> Header set Cache-Control "max-age=2628000, public" </filesMatch> ## CACHE-CONTROL HEADERS ##
Now save the .htaccess file and you have successfully enabled Leverage Browser Caching for your website via .htaccess.
Leverage Browser Caching with WordPress Plugins
Playing with .htaccess file is not for everyone. So if you are worried about modifying the file or confused with the whole process then Browser Caching WordPress Plugins are for you.
WP Fastest Cache
WP Fastest Cache is a most noteworthy and recommended Leverage Browser Caching WordPress Plugin. The plugin available for free in WordPress repository is rated with 5 stars and has over 300,000+ installs.
WP Fastest Cache plugin handles all types of resources well. Besides Browser Caching, it has some awesome features to your improve page speed as well. Like Minify CSS & HTML, Gzip Compression, Combine CSS & JS to reduce requests etc.
- Install the WP Fastest Cache Plugin.
- Go to WP Fastest Cache Plugin Settings
- Turn on Browser Caching as shown in the picture
- Hit Submit
- You have successfully enabled Leverage Browser Caching for your website
WP Fastest Cache has lot more functions than just Leverage Browser Caching WordPress. Install the plugin, play around and explore its full potential to learn more.
W3 Total Cache – WordPress browser caching Plugin
- Install the W3 Total Cache Plugin.
- Go to General Settings of W3 Total Cache
- Turn on Browser Caching & click Save
- Go to Browser Cache Settings tab
- Turn on Expires Headers, Set Cache-Control Headers..
- Save all settings
- You have completed enabling Browser Caching for your website
Speed up Even More
Now with Leverage Browser Caching enabled you will start seeing great improvements in the performance of your website. You can visit the Chrome Developer tools (Ctrl+ Shift + I) and hit F5 to see it in action.
Even though Leverage Browser Caching is the most powerful form of caching when it comes to page speed it is not the end.
As you can see, I also use all the 3 methods to speed up my website and results are truly amazing.
Using the all the 3 methods together will result in your website loading with blazing speed. And it will improve your Search Engine rankings and site performance.
You will notice reduced page load time and improved server performance. Resulting in increased visitor time, better conversion rates and less bounce rate. Users will need 70% less bandwidth meaning better experience for your readers.