Add Leverage Browser Caching using .htaccess in WordPress
Are you getting a big yellow Leverage Browser Caching warning in Google PageSpeed Insights or Pingdom for your WordPress Tests? And have no clue how to remove the warning?
Today we will explain what does Leverage Browser Caching mean and how to implement for your WordPress Website.
Lets first learn a little about Browser Caching.
Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images. Some pages might only consist of a few files and be small in size – may be a couple of kilobytes. For others, however, there may be a lot of files, and these may add up to be several megabytes large.
Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however, when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.
You might be interested How to Force HTTPS for WordPress websites by .htaccess – https://www.basezap.com/force-https-for-wordpress-websites-by-htaccess
How to Leverage Browser Cache With .htaccess in WordPress
.htaccess file can be found in the root directory of WordPress Installation.
Adding Cache-Control Headers
You can add Cache-Control headers in Apache by adding the following to your .htaccess file. Snippets of code can be added at the top or bottom of the file (before # BEGIN WordPress or after # END WordPress).
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(css)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(js)$”>
Header set Cache-Control “private”
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
Header set Cache-Control “private, must-revalidate”
</filesMatch>
</ifModule>
# END Cache-Control Headers
Adding Expires Headers
You can add Expires headers by adding the following to your .htaccess file. Snippets of code can be added at the top or bottom of the file (before # BEGIN WordPress or after # END WordPress).
EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “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 image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##
Turn ETags Off
By removing the ETag header, you disable caches and browsers from being able to validate files, so they are forced to rely on your Cache-Control and Expires header. Basically, you can remove If-Modified-Since and If-None-Match requests and their 304 Not Modified Responses. Entity tags (ETags) are a mechanism to check for a newer version of a cached file.
You can turn ETags off by adding the following to your .htaccess file. Snippets of code can be added at the top or bottom of the file (before # BEGIN WordPress or after # END WordPress).
# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off
After adding the above Snippets of code you have to save the file.
For Ease, We will add combine all the headers under one section which can be found below.
## BEGIN Cache-Control Headers ##
<ifModule mod_headers.c>
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(css)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(js)$”>
Header set Cache-Control “private”
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
Header set Cache-Control “private, must-revalidate”
</filesMatch>
</ifModule>
## END Cache-Control Headers ##
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “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 image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##
## BEGIN Turn ETags Off ##
FileETag None
## END Turn ETags Off ## You can re-run the Google PageSpeed Insights or Pingdom and confirm that Warning is gone from the Test Results.
To improve the performance of the website you can also enable GZIP Compression on your website using the following guide.
