Leverage Browser Caching for Images, CSS and JS in WordPress via .htaccess File

Browser keeps lots of things in their cache which enables them load pages faster. As a website owner or developer, we can leverage browser caching for static resources of our website.

Website css, javascript and many images are common across pages. When visitor goes to subsequent pages of a website, browser do not load these cached resources again from the server.

leverage browser caching - achieve speed like this

Leverage Browser Caching in WordPress

We need  to Leverage Browser Caching for Images, CSS and JS in a website to increase browsing speed and to achieve that in WordPress we mostly use a plugin. A plugin can create extra overhead in terms of keeping it updated and additional maintenance for a webmaster.

Caching can be achieved easily with use of .htaccess file in WordPress.  Add below code in .htaccess file and upload it on root of your WordPress Installation. We are good to go without use of a plugin for this.

Steps To Leverage Browser Caching in WordPress with .htaccess

Find .htaccess File in Website Root Directory and add below code at the end of your file –

## EXPIRES CACHING ##

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 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 2 days"

## EXPIRES CACHING ##

This code will specify expiry time for each type of resources on your site and you can adjust the time period according to your own requirements. This way you can control how you want to leverage browser caching for your resources.

Now browser will remember these resources and will not load them again for subsequent page request. Repeat visitors of the website will get much better and faster loading experience.

Code For Minify HTML, Javascript and CSS in WordPress without Plugin.

Find functions.php File in Website theme Directory and add below code in your file –

<!--?php class WP_HTML_Compression { 	// Settings 	protected $compress_css = true; 	protected $compress_js = true; 	protected $info_comment = true; 	protected $remove_comments = true; 	// Variables 	protected $html; 	public function __construct($html) 	{ 		if (!empty($html)) 		{ 			$this->parseHTML($html);
		}
	}
	public function __toString()
	{
		return $this->html;
	}
	protected function bottomComment($raw, $compressed)
	{
		$raw = strlen($raw);
		$compressed = strlen($compressed);
		
		$savings = ($raw-$compressed) / $raw * 100;
		
		$savings = round($savings, 2);
		
		return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';
	}
	protected function minifyHTML($html)
	{
		$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<br ?-->

Website speed is an important factor related to success of your online business. Good speed of your website can lead to more conversion & decreased bounce rate.

Decreased bounce rate send positive signals to search engines which further helps in improving SERP for your website. These days search engines also prefer website loading faster and its one of the ranking factor search engine like google consider while ranking a website.

Checkout your website in google page speed testing tool or any other similar tools and work on all the pointer given there. In case you need help with your website speed optimisation, get in touch with us and or checkout details of our web design services to understand how we can work together.

Categories