Autoptimize is a great and free plugin for optimizing WordPress websites.
It concatenates all scripts and styles, minifies and compresses them, adds expiration headers and moves styles and scripts to optimal locations. It also minifies the HTML code itself, making your page as lightweight as possible.
It’s very easy to set up, just check 3 boxes and you’re good to go.
Above the fold CSS
Most importantly, you’ll need critical path CSS, that will allow to render the visible part of the website a lot faster, and deal with other CSS and JS files later.
A tool such as Critical Path CSS Generator can be used to generate the CSS automatically by inserting your websites URL. This CSS will be used on every page, so it needs to contain the styles needed to display the above the fold content for all of them. Typically the same CSS is fine for all pages except the front page, which may contain a slider instead of a simple title. For that reason you could generate the critical path CSS for the front page and then another page and then combine their differences manually. This can take a little work, but can be achieved with the help of a file diff program and basic CSS knowledge. You can also choose to only use the front page’s CSS as this is where most people will typically arrive, but the other pages may exhibit noticeable layout changes once the main CSS file is loaded.
Once you have your critical path CSS, click the “Show advanced settings” button in Autoptimize options, check the “Inline above the fold CSS…” checkbox under CSS Options and insert your CSS.
If your above the fold CSS already contains links to Google Fonts (the aforementioned generator does include them), then in the Autoptimize settings -> Extra tab you should check the “Remove Google Fonts” radio option. This ensures the fonts aren’t loaded twice.
“Remove emojis” option under the Extra tab is also worth considering to enable if you don’t use emojis in your posts, as it has a slight performance impact.
Render blocking JS
Another thing to do is remove
Disable Autoptimize for administrators
Since Autoptimize concatenates all the scrips and styles on the page, as an administrator you would get served different cache files, with styles and scripts for the WordPress admin bar included. And as there are typically not very many administrators for a single WordPress page it doesn’t make sense to have separate cache for just that. Unchecking the “Also optimize for logged in users?” option will prevent you from getting served cached assets while logged in.
To view the optimized version while logged in, you can open the page in incognito/private browsing mode.
Using loading screen
If you have enabled the loading screen option from Chap Theme -> General -> Loading Screen, then you’ll want to add
chap/loader to Exclude scripts from Autoptimize and Exclude CSS from Autoptimize inputs. This will ensure the loading screen can display before other assets are loaded.