YB Digital

Fix Google PageSpeed leverage browser caching in htaccess

ybierling August 11, 2015November 18, 2016 browser, caching, en, google, htaccess, optimization, pagespeed, web

To optimize browser caching in htaccess, simply add the following code inspired by a Stack Overflow thread [1] in your htaccess file :

#Browser caching
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A86400
ExpiresByType text/javascript A86400
ExpiresByType application/x-shockwave-flash A2592000
#
<FilesMatch "\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$">
Header set Cache-Control "public"
</FilesMatch>

It will allow you not only to pass the Google icon PageSpeed Leverage browser caching test, but most importantly to speed up your website access time.

For example, this allowed me to pass the Google icon PageSpeed [2] test Leverage browser caching [3] (along with Eliminate render-blocking JavaScript and CSS in above-the-fold content [4]) on a website, going up from a score of 51 on mobile (Fig 1) to 72 (Fig 2), and up from 59 (Fig 3) to 79 on desktop (Fig 4).

Fig 1 : Google Page Speed – Score before leveraging browser caching of 51 on mobile

Fig 2 : Google Page Speed – Score after leveraging browser caching of 72 on mobile

Fig 3 : Google Page Speed – Score before leveraging browser caching of 59 on desktop

Fig 4 : Google Page Speed – Score after leveraging browser caching of 79 on desktop

Links and credits

[1] – php – Leverage browser caching, how on apache or .htaccess? – Stack Overflow – stackoverflow.com
[2] – PageSpeed Insights – developers.google.com
[3] – Leverage Browser Caching PageSpeed Insights Google Developers – developers.google.com
[4] – Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content – Yoann Bierling, International SAP/Web Consultant – www.ybierling.com

Images