The 30-Minute-Guide to a 100/100 Score on Pagespeed Insights and Pingdom

By now your Pingdom score should be nearing the 100. However, 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, we’ve got Autoptimize on our side.

Extracting your Above-the-fold Content with Critical Path CSS Generator

We’ll be using Autoptimize to eliminate the following warning in Google Pagespeed Insights:

  • Eliminate render-blocking Javascript and CSS in above-the-fold content.

In order to do this, we need to collect all of our CSS code so we can extract the Above-the-fold Content from our WordPress blog. Recently I found a free online which makes this insanely easy.

  1. Go to Sitelocity.com,
  2. Enter your site’s URL,
  3. Wait a few seconds,
  4. Do a victory dance!
Victory Dance

Sitelocity makes detecting your Critical Path CSS ridiculously easy. So treat yourself to a victory dance!

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

In order to stop the Javascript and CSS from render-blocking you must add the Critical Path CSS you just generated to your site’s header. For this we’re going back to Autoptimize’s settings:

Within the ‘CSS Options’ section there’s an option called ‘Inline and Defer CSS?’ That’s exactly what we’re looking for.

Check this option and paste your Critical Path CSS (the first text area on Sitelocity.com — you don’t need the second field!) into the text area that just magically appeared. Be sure to remove the <style> and </style> nodes wrapped around the generated output your just copied. Click ‘Save Changes and Empty Cache’.

Extra Auto-Optimizations

"Autoptimize

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. In any case, Autoptimize offers a few tiny tweaks that I’d recommend to anyone.

Combine External Javascript: Disable Emoji’s

I don’t think anyone uses this feature in WordPress.

While it is forcefully integrated into the WordPress-core, our new BFF Autoptimize offers an options to disable it:

  1. Click the ‘Extra’-tab in Autoptimize’s Settings-page,
  2. Check ‘remove emojis’.

This disables wp-emoji.js from loading entirely, eliminating one more DNS lookup from your total pageload. Now you can wave goodbye to Pagespeed Insights’ and Pingdom’s suggestion to combine external javascript.

Remove Query Strings from Static Resources

Also located within the ‘Extra’-tab you’ll find another useful feature in Autoptimize. It’s the option to remove query strings from static resources. This does not improve pageload times, but does improve your score on Pingdom and Pagespeed Insights. It removes the ver parameter from all your static (JS and CSS) resources, guaranteeing maximum usage of each visitor’s browser cache.

Leverage Browser Caching: Host Google Fonts Locally

You might’ve noticed the different options Autoptimize offers for Google Fonts. The most interesting option here is ‘Remove Google Fonts’.

Autoptimize implements an efficiënt way to parse your blog’s source and remove any URL’s pointing to Google’s Webfont services.

Just removing them will break your sites typography and design. Before removing them, you need locally hosted copies to replace them with. That’s why I built OMGF. Combining Autoptimize with OMGF is simply the easiest, most efficient way to locally host Google Webfonts and leveraging your browser cache. I suggest you click that link. You’re welcome.

Daan’s Tip of the Day!

If you’re a Google Analytics user and you’re being punished by Pagespeed Insights and/or GT Metrix and/or Pingdom for using it, it’s about time you learned about CAOS.

It does exactly what OMGF does for Google Fonts: it allows you to use Google Analytics with an always up-to-date, local version of analytics.js, instead of an externally hosted version. Effectively leveraging your browser cache even further, while preserving Google Analytics’ full functionality.

Summary

In this chapter we’ve focussed on eliminating render-blocking Javascript and CSS in above-the-fold content by configuring Autoptimize to use our pre-generated Critical Path CSS. Using Autoptimize’s advanced features, we’ve also discovered ways to eliminate suggestions such as combine external JavaScript, leverage browser caching and remove query strings from static resources. Congratulations! You’ve officially tweaked your WordPress blog for maximum performance. Have any questions or remarks? Leave a comment!

Pages: 1 2 3 4