Improve website loading speed - Leverage Browser Caching in WordPress - Enterprise Web Cloud

Improve website loading speed – Leverage Browser Caching in WordPress

Looking for a quick solution to implement Leverage Browser Cache in WordPress

Everybody wants his/her website to be brisk and fast loading. It’s a perpetual contest and conquest. Having a dismal website loading speed is as good as having….well no website at all. Custom Website designs have better loading speed than templated using many third party plugins.
A simple google search for increasing your WordPress site speed will take you to the world of ‘Leverage Browser Caching’. But hang on! That’s not our world or at least not of so many reluctant and reticent website owners who, still, understand ‘cash’ better than ‘cache’. And there is always a plugin! Right?
Wait! Let’s not get ahead of ourselves. Options are An HTML code! in your .htaccess file If this sounds complicated, there are always plugins like W3 Total Cache.

Let’s start by understanding the working of Leverage Browser Caching in WordPress Website Design and understanding (or stealing) about its magic wand which makes web pages to lead faster.
A web browser is in constant communication with a server for retrieval of various resources (i.e. HTML, CSS, images, text etc.) to load a website. ‘Web Cache’ helps web browsers and applications to temporarily store or remember data of visited web pages on local disk. When you visit the web page again, web browser only downloads updated content.

Cool, eh? It is just like remembering the first edition of a book and only reading updated material from 2nd edition. Do you think, reading 2nd edition of a book, now, will take time?
By following this simple logic, web cache helps to reduce bandwidth usage, load on server etc. So Leverage Browser Caching helps to load web pages faster.

How to Leverage Browser Caching
If your web server allows the web browser to store resources of visited web page temporarily on local disk, next time, a user visit to the website will load faster. But the pertinent question here is how to enable this?

To enable Leverage Browser Caching on WordPress, you need to set content expiry dates in HTTP headers. It is done by adding Cache-Control Headers and ETag headers. Cache-Control is about the caching period of a particular file by web browser. Etag is to verify changes between cached and requested resources. We can keep cache resources by setting a specific period in months or years.

Details:
If your website is hosted on Apache server (without WordPress plugin), Its a three step procedure to enable Leverage Browser Caching

1) Add Expires Headers

2) Add Cache Control Headers

3) Turn E tags off

 

You need to edit your WordPress .htaccess file. Copy and paste the following code in .htaccess file and Save the same.

Add Expires Headers  (Apache)

# 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"
# END EXPIRES CACHING #

Add Cache-Control Headers  (Apache)

# 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

Turn ETags Off  (Apache)

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off