By now your Pingdom score should be nearing the 100.
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.
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.