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.
This option is not really worth enabling, unless you have a specific reason.
Enabling this option will hurt performance.
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.
Reduce network requests by enabling this option to combine all the external stylesheets.
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
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.
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
.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.
If your critical path CSS already includes Google Fonts, then selecting the Remove Google Fonts option should be checked.
Loading fonts with
display:swap is the default behavior of this theme, but if you’re using plugins that load their own fonts without swapping then Combine and link/preload in head options may be worth trying.
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.
gtag to this input to make sure that it’s not render-blocking.