Skip to main content
Get a High Score on Pingdom and Pagespeed Insights

How to get a 100/100 Score on Pingdom & Google Pagespeed Insights

This document contains outdated information.

I’ve revisited this topic recently, containing more relevant and up-to-date information aligning with the new specifications provided by Pingdom and Pagespeed Insights.

If you’re looking for an up-to-date, quick and easy way to achieve a 100/100 on Pagespeed Insights and Pingdom. I suggest you follow that link.

By now your Pingdom score should be nearing the 100.

Google Pagespeed is a bit harder to satisfy. Google gives great rewards to sites that efficiently handle their above-the-fold content and severely punishes those that don’t. Even after all the optimizations we already did in the previous chapters, Pagespeed will still show a big red warning: eliminate render-blocking Javascript & CSS in above-the-fold content. Luckily, with the right preparations, Autoptimize also offers a nice solution for this.

Eliminate render-blocking Javascript and CSS in above-the-fold content with Autoptimize

Before I found Autoptimize, I used a different plugin to achieve this goal: Above The Fold Optimization [Red. May 22nd, 2018: Changed link from WordPress Repository to Github. Thanks Clay!]. This plugin offers a truckload of features to reach the same goal we’re going to achieve with Autoptimize. However, it’s code is not very efficient and delivers a major load on your server. This causes your server response time to decrease with over 1 second. Depending on the power of your server. Simply put, it’s terrible.

However, (again) we’re still going to use it. A little. Because it offers one awesome tool that we’re going to use, before we deactivate it again. Let’s go!

  1. Eliminate render-blocking javascript and css in above-the-fold content with AutoptimizeDownload and Activate Above The Fold Optimization.
  2. Go to it’s settings page and click the ‘Extract Full CSS’ tab.
  3. In the dropdown list select ‘/ – Root’ and click on Print. A new window will open.
  4. In the list of css-files, you’ll notice that it has also extracted the CSS of the admin-bar and dashicons. So copy the URL from your browser and open a private window (CTRL + SHIFT + P in Firefox. CTRL + SHIFT + N in Chrome) and paste the copied URL in the address bar of the private window.
  5. Copy all the CSS in the text area and go to Critical Path CSS Generator. [opens in a new window]
  6. Enter your page URL, paste the copied CSS in the textarea and click on the “Create”-button.
  7. Copy the generated CSS.
  8. Open Autoptimize’s Settings-page.
  9. Enable “Inline and defer CSS?” and paste the code in the newly appearead textarea.
  10. Click “Save Changes”
  11. Deactivate (optionally: and remove) Above The Fold Optimization from within the Plugins-area.
  12. Done!

If you run another Pagespeed Insights analysis you’ll see that your score has increased even more! Maybe it has even reached the perfect 100/100 score. Probably, you will never see eliminate render-blocking Javascript and CSS in above-the-fold content as a suggestion in Google Pagespeed Insights anymore. In some cases, it might still be listed as a (yellow) ‘consideration’. Either Autoptimize’s CSS-file or another file could be blocking the page from rendering immediately.

Pro-tip [Added May 22nd, 2018]: If you want to skip most steps in this chapter, go check out the Premium Version of Critical CSS generator. For a few bucks, it auto-detects everything I made you do manually in the above steps.

For those who aren’t satisfied with their score. Keep reading. In the next chapter you will find a list of tips to really squeeze the absolute maximum out of your Pingdom & Pagespeed Score.

Daan van den Bergh

Magento 2 Back-end Developer with a passion for trainlifting, airplane-gliding, hunting trees and creating fake hobbies.

15 thoughts to “How to get a 100/100 Score on Pingdom & Google Pagespeed Insights”

  1. Thank you for this article! It’s helped my Pingdom score significantly. I couldn’t get it to work for the longest time because I still had “Minify” checked in W3 Total Cache. But once I did that it worked like a charm.

      1. Thanks for adding that link to the conversation, Clay! I didn’t know about that. As an other solution, the paid variant of Critical CSS generator auto-detects everything and allows you to skip a few steps in my tutorial. I should probably update this in the near future. [Updated the plugin’s link with the Github-variant. Thanks, Clay!]

  2. Hi Clay – thanks for your time in putting this out there.

    I’m keen to perfect these scores and have followed your advice; however, pingdom is still giving my website (https://justwebbit.com) a very low score and suggesting I combine external Javascript and CSS…

    Any ideas why?

    Any more input, very much appreciated.

    Gav

    1. Hi Gav,

      Have you enabled Autoptimize and set it to combine CSS and JS? Autoptimize is usually very efficient in gathering all loaded JS and CSS files, so by tweaking its settings you should be able to have it completely combined!

    1. You’re using Adsense, which is externally hosted. So I suppose there’s no way for you to correct that. I’m working on a way to host Adsense locally as well, but this’ll take some time.

  3. Hello Daan,

    Thanks so much for this tutorial. But I have a dumb question: should all the check boxed in Minify of W3 Total cache be disabled?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.