Fix Google PageSpeed leverage browser caching in htaccess
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 PageSpeed Leverage browser caching test, but most importantly to speed up your website access time.
For example, this allowed me to pass the Google 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).
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
- Fig1 : Google Page Speed – Score before leveraging browser caching of 51 on mobile
- Fig2 : Google Page Speed – Score after leveraging browser caching of 72 on mobile
- Fig3 : Google Page Speed – Score before leveraging browser caching of 59 on desktop
- Fig4 : Google Page Speed – Score after leveraging browser caching of 79 on desktop