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.

Pages: 1 2 3 4 5