Speed is a significant factor in rankings these days, so it’s essential that you use a tool such as GTMetrix to test it.
In addition to a site speed score, there are recommendations for boosting it. One of the most common recommendations people see is, “leverage browser caching.”
What Is Browser Caching?
A browser will keep information stored in files whenever you visit a website. The stored data makes the site faster when people revisit it.
When a site doesn’t have proper browser caching, it will load sites as if they are new ones every single time.
What It Means to Leverage Browser Caching
Setting the amount of stored data for a site will leverage browser caching. Usually, people set browser caching for images, CSS and JSS.
It makes perfect sense; if those don’t change, why should the site have to reload them from the server every time. It’s easier and faster to load the data locally from the browser’s files.
How to Do It
The point of leveraging browser caching is to store data that doesn’t change often. You don’t want to set it up, so it never changes, though. It’s important to set a time when the data should be refresh.
To identify the time, you will need to set content expiry dates. Cache-Control Headers and ETag Headers allow you to set those dates.
Cache-Control Headers: This identifies the caching period of a particular file.
Cache-Control Headers give you more control over how browser cache your site. Please the headers in your .htaccess file like this:
# 1 Year for most static assets
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
The most important line in this code is Header set Cache-Control “max-age=2592000, public”. This is the one that has when the data should be refreshed. The max age is 2592000 is in seconds.
ETag – Identifies and verifies changes between the cached and requested resources.
Place ETag headers at the top of your .htaccess file.
EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 6 months”
ExpiresByType image/jpeg “access 6 months”
ExpiresByType image/gif “access 6 months”
ExpiresByType image/png “access 6 months”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 6 months”
ExpiresDefault “access 6 months”
</IfModule>
## EXPIRES CACHING ##
As you can see in the code, each line specifies what should be access again after a certain amount of time (jpg, jpeg, gif, png, html, etc.). You can change the access time to whatever you would like, and you can add lines for anything else you want to have an expiry header.
Leverage Browser Caching with a Plugin
Codes are usually the best way to go when you want to change something about your site. However, it can be a bit too technical for some people.
Plugins make it easier for people to leverage browser caching.
The first one by Rinku Yadav is for Apache servers only.
The WP Fastest Cache leverages browser caching and has an excellent track record. It’s regularly updated and has over 2,000 positive five-star reviews.
WP-Cache will leverage browser caching, and do so much more to improve your site’s performance. Just be careful with the settings, especially with minifying the Javascript and CSS of your site. It can make your site malfunction.
Leverage Your Browser Cache with Us
If you’re uncomfortable handling the tech side of your site, reach out to us. Our experienced web developers can do it for you. When you use us, you’ll be sure that your site has what it needs to load as fast as possible for your users.
