Autoptimize
Autoptimize is a great 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.
Chap theme is not affiliated with Autoptimize in any way, how ever it’s the recommended plugin for optimizing the theme.
Basic setup
It’s very easy to set up, just check 3 boxes – optimize HTML, JavaScript and CSS – and you should already be performing a lot better than an average non-optimized WordPress site.
To get the best scores on website speed testing websites such as Google PageSpeed Insights, GTmetrix or Pingdom a little more work is needed.
JavaScript Options
Chap theme supports aggregating all of it’s JavaScript files and loading them in a non-render blocking manner so this option should be checked.
This option is not really worth enabling, unless you have a specific reason.
Enabling this option will hurt performance.
The default js/jquery/jquery.js can be removed from JavaScript Options -> Exclude scripts from Autoptimize. Chap theme is designed to not require jQuery in the HTML head, 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.
If you have scripts that are only loaded on one or two pages it’s a good idea to exclude them from Autoptimize so a completely new bundle won’t need to be loaded on these pages and it also keeps the cache size smaller.
If you have enabled the loading screen option from Chap Theme -> General -> Loading Screen, then you’ll need to add chap/loader to here as well as the CSS input. This will ensure the loading screen can display before other assets are loaded.
CSS Options
Reduce network requests by enabling this option to combine all the external stylesheets.
As with JavaScript, this option is not worth enabling unless you have a reason.
This option is probably not worth enabling as it makes your stylesheets larger while images could be lazy loaded as well as served in very small next generation formats such as webp.
One of the most impactful performance-improving options – albeit tricky to implement – critical path CSS. It will allow to render the visible part of the website a lot faster, and deal with handling off-screen content later.
A tool such as Critical Path CSS Generator can be used to generate the CSS automatically by inserting your website’s 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 also 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 briefly noticeable layout changes once the main CSS file has finished loading.
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.
This option will take the contents of all the stylesheets and put them directly in the HTML. On the upside it’s no longer needed to make any requests for .css files, but the downside being that all the CSS will need to be loaded with the initial request whether it’s above or below the fold and cannot be loaded asynchronously, as well as can’t be reused from cache on subsequent requests. Don’t enable.
As with scripts, exclude any files that are selectively loaded on only one or two pages.
Misc Options
When Google Pagespeed is indicating that your assets are not using efficient cache policy and you’re unable to configure your server to do it normally, unchecking this option could solve the problem. Then .js and .css files will be served as .php files with correct headers applied.
Minifying is always good, unless it breaks something. In which case try unchecking this option.
It’s a good idea to keep this option unchecked to keep the cache size small and avoid optimizing things like WordPress admin bar that never make it to the public. How ever it’s recommended to continuously check your site as a logged-out user (incognito/private browsing mode) to ensure the above optimizations are not breaking anything.
Don’t enable this option, dynamic pages such as WooCommerce Cart and Checkout can contain outdated data when cached.
Extra Auto-Optimizations
Leave as is, since fonts with display:swap is the default behavior of this theme. How ever, if your critical path CSS already includes Google Fonts, then selecting the Remove Google Fonts option should be checked.
If you’re using plugins that load their own fonts without swapping then Combine and link/preload in head options may be worth trying.
Combine and load fonts asynchronously option loads a third party JavaScript library itself, so it may not be worth it if your site only uses 1-2 fonts.
If you don’t need WordPress automatically converting emojis like :) to a SVG image version, then there’s no reason to leave this option unchecked.
Leave this option unchecked to ensure that after theme/plugin updates when any asset has changed then the old version from the cache won’t be loaded instead.
Add any JavaScript files here that can be loaded asynchronously. For example if you use the Google Site Kit plugin to automatically insert tracking code on your site, then you should add gtag to this input to make sure that it’s not render-blocking.
