Optimize Your Website With Google Pagespeed Insights
Google Pagespeed Insights is a great tool if you want to optimize your website’s speed and increase your UX and SEO ranking in the process. Insights scores websites on a 100 point scale, with a score above 85 being considered in the “well optimized” range. It’s best to get as high a score as possible, although getting 100/100 is not necessarily the ideal situation. Sometimes you have to implement certain elements that have a significant positive impact on UX, but a relatively negative impact on page loading speed. In this article, we’re going to take a look at how to optimize several commonly encountered insights for your WordPress website.
1. Optimize Images
This warning from Insights is best solved by installing a plugin such as Optimus Image Optimizer from KeyCDN. With a bulk optimization feature and a focus on lossless compression, which reduces size without affecting quality, Optimus is a very powerful tool. With one click, you can compress your entire existing library, and all images will be compressed upon upload. On top of that, the plug-in can compress images to the .webp format, which can be used in combination with WordPress Cache Enabler to ensure much faster download times.
2. Minify Javascript and CSS
This problem can also be fixed by installing a plug-in, in this case Autoptimize. Within Autoptimze’s settings, you have the option to enable HTML, JavaScript, and CSS code optimization.
3. Render-Blocking Resources Above the Fold
This issue can stem out of two sources:
- JavaScript/CSS files
- Fonts
JavaScript/CSS files
Any JavaScript or CSS file that is above the fold is render-blocking. In order to fix this problem you have to save the following settings in Autoptimize:
- Uncheck “Force JavaScript in <head>” under the JavaScript Options section
- Check “Inline all CSS?” under the CSS Options section
Fonts
Some fonts can be a problem, since they use CSS above the fold. Depending on what type of font you use, whether it’s Font Awesome, Google Fonts or any other type of font, all workarounds require you to bring these elements below the fold code-wise.
4. Leverage Browser Caching
This is an issue that can be solved with the KeyCDN plug-in alongside WordPress CDN Enabler. These two plug-ins deliver assets with cache-control headers. However there are some cases in which themes or certain elements are not delivered with the CDN. In this case, you will have to tinker a little bit with the code in .htaccess file in order to manually add cache-control headers to the server of origin.
5. Google Analytics
This is can be an almost unfixable problem, which many developers skip optimizing altogether. However, some clients will demand perfect 100/100 scores on Insights, and if this is the case, there are some workarounds.
The reason behind this issue is the 2 hour cache lifetime of the http://www.google-analytics.com/analytics.js script, which Google refuses to change. The end result is that a lot of websites have this as an active issue.
To fix this, you can use Jesse Luoto’s ga-lite script. When delivered from jsdelivir, it will automatically set the appropriate headers to the scripts. Copy and paste the code below before the </body> tag, into your footer, and update it with your UA tracking ID.
<script src=“https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js” async></script> <script> var galite = galite || {}; galite.UA = ‘UA-XXXXXX‘; // Insert your tracking code here </script>
This solution is not foolproof, but it usually gets the job done.
6. Reduce server response time
This is a relatively straightforward issue to fix. If this pops up, it means that you have to upgrade to a faster web host and potentially implement a CDN.
Conclusion
Google Pagespeed Insights is a great tool in case you want to deliver the best UX possible. With faster loading times and a stronger UX, you can reduce bounce rates and increase retention and conversion. However, it is not an infallible, and as you deepen your understanding of the presented issues, you might want to solve some of them, while others are best left alone in favor of elements that have a much more positive impact on the UX.
