-
Backup the site
-
Install & activate Autoptimize
-
Go to Settings > Autoptimize
-
Click the Show Advanced Settings at the top right of the screen
-
Check: Optimize HTML, Optimize JavaScript, Optimize CSS Code
-
Click Save Changes and Empty Cache
-
View the home page of the website to make sure there aren't any major problems. If everything looks good, move to the next step. If problems are found, deactivate Autoptimize and check again. If that fixes the problem, skip this section and move onto the next. If that doesn't fix the problem, roll back the update.
-
In the Javascript section, remove any scripts in the Exclude scripts from Autoptimize: option (this field should be blank). Click Save and Empty Cache.
-
Check home page to verify. Follow step 7 procedure.
-
In the CSS options check: Generate data: URIs for images?; Also aggregate inline CSS?
-
Remove options from Exclude CSS from Autoptimize: (should be blank)
-
Click Save and Empty Cache. Check the home page
-
In the CSS options, check Inline "above the fold CSS" while loading ...
-
In a new browser window, go to https://jonassebastianohlsson.com/criticalpathcssgenerator/
-
In another new browser window (preferably Chrome), go to the home page of the website.
-
In the Chrome toolbar, go to View > Developer > View Source
-
In the source code, do a search for the CSS file. It will probably be a string of letters and numbers and will always be followed by .css. For example: autoptimize_b5d15661c8118b4b9085bc0ee44dfb61.css. Click on the link and a new window will open. This is the site css. Copy all this code to your clipboard.
-
Go back to the Critical Path CSS Generator window.
-
In spot 2, Full CSS, delete what's there and paste all the code you just copied.
-
In spot 1, enter the URL of the home page.
-
Click Create Critical Path CSS
-
A new box will appear, Critical Path CSS. Copy the code to your clipboard.
-
Go back to the Autoptimize settings page in the admin area. In the box that says "Paste the above the fold css here.", paste the code you just copied.
-
Hit Save Changes & Empty Cache.
-
Check the home page.
-
Run the site through PageSpeed again and check the results. If there are still render blocking resources, follow below to fix.