Leveraging browser caching on your WordPress website can offer up some significant savings as far as page loading goes.
First, a web browser must retrieve a whole heap of resources off a server, so it can load a website and web caching is used to store website pages for faster loading next time they are called.
How to Leverage Browser Caching
To leverage browser caching, your web server must allow the browser to store the visited pages on a local disk, temporarily. So how do we enable this?
By setting dates for content expiry and we do this by adding etag headers and cache control headers in your HTTP headers. Cache control is basically for dictating how long a file is cached by a web browser and etag verifies any changes between the cached resource and what is requested.
Using Apache Server
With Apache server you must make an edit to the .htaccess file. Find your .htaccess file and add the following code to the file and save it:
# TN – START EXPIRES CACHING #
ExpiresActive On
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresDefault “access 1 month”
# TN – END EXPIRES CACHING #
Try to set your dates for one year – under a month and over a year is not really recommended. Once you have done that, add the cache control header as follows, to the .htaccess file:
TN – BEGIN Cache-Control Headers
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “public”
<filesMatch “\.(css)$”>
Header set Cache-Control “public”
<filesMatch “\.(js)$”>
Header set Cache-Control “private”
<filesMatch “\.(x?html?|php)$”>
Header set Cache-Control “private, must-revalidate”
# TN – END Cache-Control Headers
It isn’t necessary to specify a timeline in this because you already did that for the cached resources. The last thing to do is turn off etags by adding this code:
# TN – BEGIN Turn ETags Off
FileETag None
# TN – END Turn ETags Off
Now save the file and, if you are using a cache plugin, clear the cache.
Using Nginx Server:
On the Nginx server, you need to edit your .conf file which you will find in
/etc/nginx/sites-enabled/default
Go to the file and add this code:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf|html|swf)$ {
expires 90d;
}
Next, add the cache control header:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 90d;
add_header Cache-Control “public, no-transform”;
}
Using a Plugin
If you prefer to use a plugin, you can choose one of these three highly reliable and recommended plugins:
WP Fastest Cache
One of the top plugins, used on more than 300,000 WordPress websites. WP Fastest Cache also offers other features for optimizing page speed, such as :
- Minification
- Gzip compression
- Reducing HTTP requests
- Generation of static files
Browser Caching with .htaccess
Another popular plugin, this is lightweight and does exactly what it says. It doesn’t have too many settings making it ideal for the beginner, but it does allow you to modify the time span for Expires header.
W3 Total Cache
Finally, w3 Total Cache offers a straightforward way to leverage browser caching with a light, easy to use plugin, ideal for beginners.
It doesn’t matter if you choose the plugin route or the editing route; what matters is that you leverage browser caching to speed up your WordPress website.