So, you have stumbled upon the Google PageSpeed Insights tool and are mortified by the score your website has received. You are not alone, and there is hope! Google offers generic guides on how to resolve some of the issues found with your website, but depending on the platform your website it built on and your web-development experience, there are vastly different ways of solving these issues.
This article will be most helpful for those who have a WordPress website and minimal coding know-how. It covers two of the biggest factors to increasing your page speed score:
- Shrinking images
Following the steps set forth in this article series, I was able to improve our Google PageSpeed Mobile Site Speed score from 62 to 95 and our Desktop Suggestion score from 72 to 85.
Why should I care about my Google PageSpeed score?
Great question. Google announced back in 2010 that your website's speed is part of the algorithm to determine your website's Google ranking. Google also recently announced that they will soon be taking into consideration mobile site speed in their rankings as well. If site speed matters to Google in their search engine rankings, then it should matter to you. Google’s PageSpeed Insights tool gives you, well, insights into how to speed up your site.
If you have run Google PageSpeed Insights on your site and received an abysmally low score - you are in good company!
Google's PageSpeed Insights tool is a great place to start in determining potential website speed improvements, but keep in mind that it is not the only page speed analyzer and should not be considered the ultimate source of the truth! In fact, if you have run Google PageSpeed Insights on your site and received an abysmally low score - you are in good company! Check out the PageSpeed score for Twitter, Facebook, and Mashable. At the time of this writing, all 3 of these sites have a Mobile Speed score of 60 or lower.
It is actually generally recognized among webmasters that Google PageSpeed is not the best measuring stick for actual page speed. It is important (and helpful!) to run tests on other website analyzers as well.1,2
Here are some of the better website speed analyzers I've tried:
A few important notes before we get started
- Most of this was A LOT of trial and error. I spent a lot of time testing my site to ensure it still worked after every change, and I re-ran PageSpeed Insights after every change to see what made a difference.
- My set-up (the closer your set-up is to this, then the more helpful this guide will probably be for you):
- Using WordPress
- Using Revolution Slider
- Using Google Fonts
- Using WPEngine as my host which restricts some plugins - I cannot use "W3 Total Cache" or “WP Rocket" which is widely recommended by the online community to resolve PageSpeed issues.
If you have gotten the following warnings from Google PageSpeed insights, we are here to help:
Optimize CSS Delivery of the following...
1. Combining the scripts into as few files as possible.WordPress sites are especially susceptible to loading many scripts upon page load. This is because plugins and themes often each have their own scripts that need to be loaded in order to function. In a more traditional website, the developer would have more control over these scripts and manually combine them to reduce the overhead upon page load.
2. Deferring the loading of “non-critical” scripts.
This often involves moving scripts to the bottom of the page. When a browser is loading your page, it typically loads things in parallel until in encounters a script. Nothing else can load while a script loads. Once the script is done loading, the website can continue rendering everything else. You can see how, especially if you have many scripts, this can really affect how quickly your page will load.
Revolution Slider settings changes:
- In Slider Revolution "Global Settings":
- Include RevSlider libraries globally: ON (my slider broke if I set this to OFF, but it might be worth trying in your setup)
- In each individual slider presentation settings, I set the following:
- Under Performance and SEO Optimization panel:
- Lazy Load: Smart
- Under Problem Handlings - Troubleshooting
- JQuery No Conflict Mode: OFF
- Put JS Includes To Body: OFF
- Output Filters Protection: None
- Debug Mode: OFF
- After changing individual plugin settings, be sure to clear your cache and test a lot! You don't want something to break on your site.
- Check PageSpeed insights. Making these changes to Slider Revolution helped reduce the number of render-blocking scripts our site had, but I still needed help from other plugins to clean up everything else.
I use a plugin that does this work for me! This plugin successfully combines all of my CSS scripts into a single file and minifies it, and it does the same for my JS files.
- Install the plugin "JS & CSS Script Optimizer" and check the following settings:
- Enable the plugin
- Ignore: “jquery.js”
- Under the style-sheet settings, select the following:
- Enable CSS optimizer: Use plugin for CSS
- Combine CSS: Combine all CSS scripts into the single file
- Style-sheets packing: Minify CSS files
- Clear your cache and re-load your website to make sure nothing has broken.
- Run Google PageSpeed and see if anything has changed. In my results, this helped reduce the number of http calls, but PageSpeed was still hung up on the JS and CSS files being render blocking.
Step 3. Resolve the CSS file being render-blocking
Install the "Autoptimize" plugin and check the following settings:
- Enable Optimize HTML code
- Enable Optimize CSS Code
- "Inline and Defer CSS"
- I enabled this option; however, this takes a little bit of research to do properly.
- This option lets you put "above the fold" CSS in the header so it is loaded first before loading the rest of the CSS script. This allows the above-the-fold content styling to load first so it will be rendered as quickly as possible for the visitor.
- I followed this great guide on how to use the Autoptimize Inline and Defer CSS Option. I highly recommend following this guide and enabling this option.
- Run Google PageSpeed and see if anything has changed. In my results, this resolved the render-blocking CSS file on mobile page speed. Now all that is left is the render-blocking JS file.
Again, clear your cache and re-load your website to make sure nothing has broken.
Finally, run Google PageSpeed Insights again. Hopefully your “render blocking JS and CSS” warnings are now gone! Following the steps above completely removed this warning for our website, and increased the page load speed.
The next step to seeing large performance increases on your site and improving your Google PageSpeed score is to optimize your images – covered in the next section!
Guide to optimizing images in a WordPress website
“Optimize the following images to reduce their size…”
This warning is fairly straight-forward, thankfully! PageSpeed Insights finds the images on your page that are large and could be compressed, and lists them out for you. Compressing images involves making the image file size smaller, without affecting the quality of the picture to the naked eye. You could manually compress these images one by one with a desktop or online program, or you could let a plugin do it for you!
The following plugins are widely used and well rated:
- ShortPixel – (free account) 100 images/month. No file size limit.
- WP-Smushit – (free account) 1 MB file size limit, bulk option is limited to 50 files at a time.
- EWWW Image Optimizer
After optimizing images on our site with one of these plugins, this Google PageSpeed warning went away.
Additional ways to speed up your website
If you are looking for even more ways to speed up your website, two things that could make the biggest difference are:
- Using a speedy website host
- Using a Content Delivery Network (CDN)
In-depth explanations of these two recommendations are beyond the scope of this article, but for more information check out:
While I hope this guide has been helpful to you, please bear in mind that there are many different setups in WordPress, and any one difference in setup can cause these steps to not work for you. The best results may come after much trial and error.
Finally, if you are disappointed that you cannot seem to get your Google PageSpeed Insight score above a certain point, remember that there are many other benchmarks of page speed and performance. Run a test on your site using some of the other performance analysis tools listed earlier in this article and see how you rank.
Did this article help you improve your Google PageSpeed Insights score? Let us know your score before and after in the comments!
Posted in Portals & Websites