Autoptimize

Autoptimize
WordPress plugin
Autoptimize plugin banner

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.

Basic setup

It’s very easy to set up, just check 3 boxes and you’re good to go.

Autoptimize settings
Advanced setup

To get the best scores on website speed testing websites such as Google PageSpeed Insights or Pingdom a little more work is needed.

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 js/jquery/jquery.js from JavaScript Options -> Exclude scripts from Autoptimize. Chap theme is designed to not require jQuery in the HTML head, deferring it is fine, how ever some other plugins may break because of it, in which case don’t remove it. You can check if anything broke by opening the Developer Tools in your browser (F12 for Google Chrome) and check in the Console tab for any JavaScript errors.

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.

Autoptimize 2.2 disable for logged in users

To view the optimized version while logged in, you can open the page in incognito 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.

Leave a comment

Your email address will not be published. Required fields are marked *