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.
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
Details:
If your website is hosted on Apache server (without WordPress plugin), Its a three step procedure to enable Leverage Browser Caching
- Add Expires Headers
- Add Cache Control Headers
- 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