Easy Way To Leverage Browser Cache In Wordpress Via HtAccess

W3zetmedia - Leverage Browser caching is an important parameter that google and y-slow used to analyze the performance of your web page. 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 visiting your web page for the first time, their browser will store the copies of static files (images, javascript, CSS, favicon, etc) of your web page locally on their computer. This means the browser doesn’t have to download them again in case the user re-visit your web page. Because the browser will fetch data from the cache instead of asking the server. The end result is your web page 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 by setting 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.

How to leverage browser caching?

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

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

 ## EXPIRES 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 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 1 year"  
 ExpiresDefault "access 1 month"  
 </IfModule>  
 ## EXPIRES CACHING ##  

What this does is adding far future expires header (make sure mod_expires is loaded in your apache config if you have problems) to your static content (images, js, css, etc).

Location:

Share :