Fix Google PageSpeed Insights issues and get green
Google PageSpeed Insights [1] is a great tool to see how your website perform. In case you got a poor score, here is a series of articles with easy to implement solutions to solve most of the issues.
This allowed me to go green on the Google PageSpeed Insights [1], going up from a score of 17 on mobile (Fig 1) to 89 (Fig 14), and up from 35 (Fig 3) to 89 on desktop (Fig 16).
Optimize images
This allowed me to pass the Google PageSpeed [1] test Optimize images [2] on a website, going up from a score of 17 on mobile (Fig 1) to 51 (Fig 2), and up from 35 (Fig 3) to 59 on desktop (Fig 4).
Eliminate render-blocking JavaScript and CSS in above-the-fold content
This allowed me to pass the Google PageSpeed [1] test Eliminate render-blocking JavaScript and CSS in above-the-fold content (along with Leverage browser caching [6]) on a website, going up from a score of 51 on mobile (Fig 5) to 72 (Fig 6), and up from 59 (Fig 7) to 79 on desktop (Fig 8).
Leverage browser caching
This allowed me to pass the Google PageSpeed [1] test Leverage browser caching [5] (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 9) to 72 (Fig 10), and up from 59 (Fig 11) to 79 on desktop (Fig 12).
Enable compression
This allowed me to pass the Google PageSpeed [1] test Leverage browser caching [7] on a website, going up from a score of 72 on mobile (Fig 13) to 89 (Fig 14), and up from 79 (Fig 15) to 89 on desktop (Fig 16).
Links and credits
- [1] – PageSpeed Insights – developers.google.com
- [2] – Optimize Images PageSpeed Insights Google Developers – developers.google.com
- [3] – Mass process and update a batch of images using GIMP – www.ybierling.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
- [5] – Leverage Browser Caching PageSpeed Insights Google Developers – developers.google.com
- [6] – Fix Google PageSpeed leverage browser caching in htaccess – www.ybierling.com
- [7] – Optimizing encoding and transfer size of text-based assets — Web Fundamentals – developers.google.com
- [8] – Fix Google PageSpeed enable compression in PHP and htaccess – www.ybierling.com
Images
- Fig1 : Google Page Speed – Score before image optimization of 17 on mobile
- Fig2 : Google Page Speed – Score after image optimization of 51 on mobile
- Fig3 : Google Page Speed – Score before image optimization of 35 on desktop
- Fig4 : Google Page Speed – Score after image optimization of 59 on desktop
- Fig5 : Google Page Speed – Score before eliminating render-blocking JS and CSS in above-the-fold content of 51 on mobile
- Fig6 : Google Page Speed – Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile
- Fig7 : Google Page Speed – Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop
- Fig8 : Google Page Speed – Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop
- Fig9 : Google Page Speed – Score before leveraging browser caching of 51 on mobile
- Fig10 : Google Page Speed – Score after leveraging browser caching of 72 on mobile
- Fig11 : Google Page Speed – Score before leveraging browser caching of 59 on desktop
- Fig12 : Google Page Speed – Score after leveraging browser caching of 79 on desktop
- Fig13 : Google Page Speed – Score before activating gzip compression of 72 on mobile
- Fig14 : Google Page Speed – Score after activating gzip compression of 89 on mobile
- Fig15 : Google Page Speed – Score before activating gzip compression of 79 on desktop
- Fig16 : Google Page Speed – Score after activating gzip compression of 89 on desktop