How to Leverage Browser Caching in WordPress – To improve page speed

verview

Leverage Browser caching is an important parameter that google and y-slow used to analyze the performance of your webpage. If you’ve ever run Google PageSpeed test on your website, it has recommended that you leverage browser caching.

What is Browser Caching?

When a user visit your webpage for the first time, their browser will store the copies of static files(images, java script, css, favicon, etc) of your webpage locally in their computer. This means the browser doesn’t have to download them again in-case the user re-visit your webpage, because browser will fetch data from the cache instead of asking the server. The end result is your webpage will appear to load faster in user’s browser. This process is called browser caching.

Why leverage browser caching?

Caching your website resources on the visitor’s computer will let them load your pages faster every time they come back to your site. If the resources are static, it is suitable for the contents that never or rarely need to be updated. This includes jpg, gif, png, favicon, javascript, css, etc. 

Google recommends that the static resources are cached at least once in a month. This is done bysetting the maximum age or expiry date for the resource in the HTTP headers.

Setting an expiry date or maximum age in the HTTP headers for static resources (images, js, css, etc) instructs the browser to load previously downloaded resources from local disk rather than over the network.  (source –Google)

This means, a first time visitor to your page will make several HTTP requests to cache several static resources. But the cacheable resources have short freshness lifetime. By adding expires headers, you can tell your website visitor’s browser to keep the resources for a certain period of time until the expiry date or maximum age is reached. This avoids unnecessary HTTP requests on subsequent page views.

Benefits of leverage browser caching:

• Minimize the number of HTTP requests; which in turn reduce the load time of your site dramatically.
• Save your visitor’s load time and data if they visit your site more than once.
• Reduces the load on your web server and save bandwidth.

How to leverage browser caching?

1)  Tweak your .htaccess in the root folder of your WordPress

The .htaccess file will need to be in the root of your domain, typically the public_html folder. This file is a hidden file but should show up in FTP clients like FileZilla or File manager, here is how you do it.  

Note: Make sure you have a copy of your current .htaccess file before tweaking it.

On the server

• Login to your cPanel account.
• Click the File Manager icon, located in the Files section.
• When the popup box appears, select Web Root (public_html). [Make sure that the “Show hidden files” option is checked]
• Right click on the .htaccess and click on “Code Edit”.
• Add the following code to the very top of your .htaccess file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ##

This code tells your visitor’s browser that the static resources like images, javascript, flash, pdf, and icons should be cached for specified period of time, for example a month. You can change the duration based on your requirement. Set minimum age for frequently updated files and a maximum one for those that are likely to remain unchanged. One year is the maximum time you can set without violating RFC guidelines.

2)  Using a WordPress plugin

If you are not comfortable with editing .htaccess file, plugin might be an easiest way for non-techies to leverage browser caching within your WordPress admin panel.

Editing the .htaccess file through Wordpress SEO by Yoast

If you’ve WordPress SEO yoast plugin installed on your site, editing your .htaccess file is just a matter of a few seconds. It allows you to easily edit your .htaccess file directly from your WordPress admin, which is very handy.

• Hover over SEO on the left side of your WordPress dashboard, then click Tools > File Editor.
• Scroll down to .htaccess file section and paste the above code into the box.

Leverage Browser Caching with W3 Total Cache

Step 1:

If you’ve already installed W3 Total Cache simply head over to WordPress Dashboard » Performance » General Settings and Enable “Browser cache“

Step 2:

Go to performance >> Browser Cache. Apply the following settings.

Browser Cache – General Settings

• Enable “Set Last-Modified header”
• Enable “Set expires header”
• Enable “Set cache control header”
• Disable “Set entity tag (eTag)”
• Enable “Set W3 Total Cache header”
• Enable “HTTP (gzip) compression”
• Disable “Prevent caching of objects after settings change”
• Disable “Do not process 404 errors for static objects“

Browser Cache – CSS & JS

• Enable “Set Last-Modified header”
• Enable “Set expires header”
• Expires header lifetime – 31536000 seconds (1 year)
• Enable “Set cache control header”
• Cache Control Policy: cache with max-age
• Disable “Set entity tag (eTag)”
• Enable “Set W3 Total Cache header”
• Enable “HTTP (gzip) compression”
• Disable “Prevent caching of objects after settings change “
• Disable “Disable cookies for static files “

Browser Cache – HTML and XML

• Enable “Set Last-Modified header”
• Enable “Set expires header”
• Expires header lifetime – 3600 seconds (1 hour)
• Enable “Set cache control header”
• Cache Control Policy: cache with max-age
• Disable “Set entity tag (eTag)”
• Enable “Set W3 Total Cache header”
• Enable “HTTP (gzip) compression”

Browser Cache – Media and other files

• Enable “Set Last-Modified header”
• Enable “Set expires header”
• Expires header lifetime – 31536000 seconds (1 year)
• Enable “Set cache control header”
• Cache Control Policy – cache with max-age
• Disable “Set the entity tag (eTag)”
• Enable “Set W3 Total Cache header”
• Enable “HTTP (gzip) compression”
• Disable “Prevent caching of objects after settings change” 
• Disable “Disable cookies for static files”