Website Speed Improvements

Start timer

Check page speed in Google Page Speed

Install WP Smush PRO

Autoptimize

Check in ManageWP

Stop timer

Start timer

Check page speed in Google Page Speed

Check the site speed using Google PageSpeed.

Record scores below.

Mobile Score

Desktop Score

Install WP Smush PRO

Install and activate the WPMU Dev Dashboard plugin (if not already on site).

1

Backup the site
2

Install & activate WPMU Dev Dashboard
3

Install & activate WP Smush Pro
4

Activate Super Smush
5

Smush all images. Leave the page open while the images are smushing
6

Clear cache , in WP dashboard go to WP Engine > Purge All Caches
7

Check in PageSpeed

Mobile Score

Desktop Score

Autoptimize

1

Backup the site
2

Install & activate Autoptimize
3

Go to Settings > Autoptimize
4

Click the Show Advanced Settings at the top right of the screen
5

Check: Optimize HTML, Optimize JavaScript, Optimize CSS Code
6

Click Save Changes and Empty Cache
7

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

In the Javascript section, remove any scripts in the Exclude scripts from Autoptimize: option (this field should be blank). Click Save and Empty Cache.
9

Check home page to verify. Follow step 7 procedure.
10

In the CSS options check: Generate data: URIs for images?; Also aggregate inline CSS?
11

Remove options from Exclude CSS from Autoptimize: (should be blank)
12

Click Save and Empty Cache. Check the home page
13

In the CSS options, check Inline "above the fold CSS" while loading ...
14

In a new browser window, go to https://jonassebastianohlsson.com/criticalpathcssgenerator/
15

In another new browser window (preferably Chrome), go to the home page of the website.
16

In the Chrome toolbar, go to View > Developer > View Source
17

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

Go back to the Critical Path CSS Generator window.
19

In spot 2, Full CSS, delete what's there and paste all the code you just copied.
20

In spot 1, enter the URL of the home page.
21

Click Create Critical Path CSS
22

A new box will appear, Critical Path CSS. Copy the code to your clipboard.
23

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

Hit Save Changes & Empty Cache.
25

Check the home page.
26

Run the site through PageSpeed again and check the results. If there are still render blocking resources, follow below to fix.