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.
The Wait is Over.
Get the Newsletter you've always wanted, now!
Sign up to receive Biweekly, Free Optimization Tips for WordPress.
No spam. I promise.
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.
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.