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!
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.