{"id":43,"date":"2017-03-15T13:28:13","date_gmt":"2017-03-15T13:28:13","guid":{"rendered":"https:\/\/linuxhostsupport.com\/blog\/?p=43"},"modified":"2018-09-20T12:59:44","modified_gmt":"2018-09-20T17:59:44","slug":"how-to-leverage-browser-caching-in-wordpress","status":"publish","type":"post","link":"https:\/\/linuxhostsupport.com\/blog\/how-to-leverage-browser-caching-in-wordpress\/","title":{"rendered":"How to Leverage Browser Caching in WordPress"},"content":{"rendered":"
\"\"<\/a><\/div>

Your site speed and the page load time is one of the most important components when the Google ranking algorithm is in place, and this can affect your search engine ranking. If you do a test with Google PageSpeed (or any other speed testing tool) and if you get a result that you need to use browser caching, we’ll show you how to do that in WordPress.<\/p>\n

<\/p>\n

What is browser caching?<\/h2>\n

When you, as a user, visit a webpage for the first time then your browser will store a copy of the static files like images, CSS, java scripts and favicon locally on your computer. This basically means that your computer will not download those files again when you visit that website. The webpage at the end will load faster and this is called browser caching.<\/p>\n

How to leverage browser caching?<\/h2>\n

First, you’ll need to disable the ETag header because this tutorial will teach you how to use Expires. The ETag technology is slow and full of problems.<\/p>\n

Add the lines below to your .htaccess file:<\/p>\n

Header unset Pragma\r\nFileETag None\r\nHeader unset ETag<\/pre>\n
Additionally, add the lines below and you’ll start to enable Leverage Browser Caching<\/p>\n
## EXPIRES CACHING ##\r\n<IfModule mod_expires.c>\r\nExpiresActive On\r\nExpiresByType image\/jpg \"access 1 year\"\r\nExpiresByType image\/jpeg \"access 1 year\"\r\nExpiresByType image\/gif \"access 1 year\"\r\nExpiresByType image\/png \"access 1 year\"\r\nExpiresByType text\/css \"access 1 month\"\r\nExpiresByType application\/pdf \"access 1 month\"\r\nExpiresByType text\/x-javascript \"access 1 month\"\r\nExpiresByType application\/x-shockwave-flash \"access 1 month\"\r\nExpiresByType image\/x-icon \"access 1 year\"\r\nExpiresDefault \"access 2 days\"\r\n<\/IfModule>\r\n## EXPIRES CACHING ##<\/pre>\n
This code, your main static files (images, PDFs, CSS, JS, etc.) will be cached on your visitor’s computer in order to produce faster loading of your webpage in the future.<\/p>\n
Compress Components<\/h2>\n
If you compress things then you will always end up making them smaller and hence load faster, so implementing some form of compression on your components is a must have. This optimization step might not work if your server does not have either mod_deflate or mod_gzip installed as part of Apache.<\/p>\n
<FilesMatch \"\\\\.(js|css|html|htm|php|xml)$\">\r\nSetOutputFilter DEFLATE\r\n<\/FilesMatch>\r\n\r\n<IfModule mod_gzip.c>\r\nmod_gzip_on Yes\r\nmod_gzip_dechunk Yes\r\nmod_gzip_item_include file \\.(html?|txt|css|js|php|pl)$\r\nmod_gzip_item_include handler ^cgi-script$\r\nmod_gzip_item_include mime ^text\/.*\r\nmod_gzip_item_include mime ^application\/x-javascript.*\r\nmod_gzip_item_exclude mime ^image\/.*\r\nmod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*\r\n<\/IfModule><\/pre>\n
Bonus tip that we want to share with you:<\/h2>\n
You can leverage browser caching with the W3 Total Cache Plugin<\/a>. If you don’t already have it installed, you can do so for free on your WordPress site.<\/p>\n
After you install the W3 Total Cache Plugin, simply head over to your WordPress Dashboard \u00bb Performance \u00bb General Settings and Enable \u201cBrowser cache\u201c<\/p>\n
 <\/p>\n
\"\"<\/p>\n
After that, go to Performance >> Browser Cache. Apply the following settings.<\/p>\n
Browser Cache \u2013 General Settings<\/strong><\/p>\n