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!
- Download and Activate Above The Fold Optimization.
- Go to it’s settings page and click the ‘Extract Full CSS’ tab.
- In the dropdown list select ‘/ – Root’ and click on Print. A new window will open.
- 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.
- Copy all the CSS in the text area and go to Critical Path CSS Generator. [opens in a new window]
- Enter your page URL, paste the copied CSS in the textarea and click on the “Create”-button.
- Copy the generated CSS.
- Open Autoptimize’s Settings-page.
- Enable “Inline and defer CSS?” and paste the code in the newly appearead textarea.
- Click “Save Changes”
- Deactivate (optionally: and remove) Above The Fold Optimization from within the Plugins-area.
- 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.
Hey there, I was going to ask you how to fix the mobile google analytics score but it looks like you have the same problem. https://gtmetrix.com/reports/daan.dev/HV5KT0Ue
Do you know what’s causing this? Does mobile have a different file?
Hmmm. Thanks for notifying me of this! I’ll look into it and get back to you. Thanks!
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.
Oh, that’s good to hear! Thanks for stopping by!
Thank you for this article. But above the fold optimization plugin is not available for download. Some help would be appreciated
Here you go mate: https://github.com/optimalisatie/above-the-fold-optimization
Just click on the “Clone or download” green button and Download Zip.
You can then install it. Cheers!
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!]
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
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!
Hey on my site http://www.onlinerechargetricks.com/beautiful-girls-dp-for-facebook-whatsapp-full-hd/ .google pagespeed is showing leverage browsing issue, can you tell me how to solve without plugin?
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.