Autoptimize: Full Setup, Best Settings and Configuration (2023)

Last Updated on 28th December 2022 by Ajmer Singh

There are a lot of optimization plugins available for WordPress users but Autoptimize is one the best to minify java, CSS, and Html.

I have used and compared it with other plugins, but the page performance result comes in the favour of Autoptimize.

So, today I am going to show you the Autoptimize best settings configuration for WordPress,

to get better performance in page speed tools like Gtmetrix, Google Pagespeed Insights, and Pingdom.

Also, I can show you the results after these settings in the last. (With screenshots)

Let’s start,

Autoptimize Best Settings Configuration For WordPress

1. Install and Activate

Go to plugins-Add new-Search Autoptimize-Install-Activate.

autoptimize best settings
Autoptimize install and activate – FindMyTricks

You can find the Autoptimize plugin in the settings section at the left.

Look at the picture below for a better understanding.

autoptimize best settings
Autoptimize settings – FindMyTricks

Click on Autoptimize.

2. JS, CSS & HTML Settings

Javascript Options

autoptimize best settings
Autoptimize javascript options – FindMyTricks

Optimize Javascript Code?Enable

It is recommended to enable it as this can minify your JS codes.

Aggregate JS files?Enable

Enabling this can resolve your render-blocking errors in page speed tools.

Also aggregate inline JS?Disable

Let Autoptimize also extract JS from the HTML.

This can improve my page performance but the reason I cannot enable this is that it stops my popup to display.

The plugin author also recommends disabling this option as this can quickly grow your cache size. 

Force JavaScript in <head>?Disable

Not recommended as this makes the JS render-blocking.

Add try-catch wrapping?Disable

This is not recommended but if you found any JS error or script break anywhere on the site then enable this.

Do not aggregate but differ?Disable

This option is not available as we already enable aggregate JS files earlier.

If you enable this option then individual JS files will be minified and deferred.

Exclude scripts from AutoptimizeLeave as it is.

Here you can add JS scripts you don’t want to minify separated by a comma. 

Note: Do not paste the JS codes here. You can only add files/folders names like wp-includes/etc.”

However, the excluded non-minified files are still minified by Autoptimize unless that option under “misc” is disabled.

Remove unused Javascript?

According to Autoptimize, it combines your theme and plugins’ JavaScript but does not know what is used and what is not.

If Google Pagespeed Insights detects unused JavaScript, consider using a plugin like “Plugin Organizer” or similar to manage what JavaScript is added and where.

Not recommended. 

CSS Options

autoptimize best settings
Autoptimize css options – FindMyTricks

Optimize CSS codeEnable

It is recommended to enable this to minify your CSS codes.

Aggregate CSS filesEnable

If this option is off, the individual CSS files will remain in place but will be minified.

Also aggregate Inline CSSDisable

Check this option for Autoptimize to also aggregate CSS in the HTML.

Not recommended as this can also increase your cache size quickly.

Generate data: URLs for imagesDisable

Enable this to include small background images in the CSS itself instead of as separate downloads.

Eliminate render-blocking CSS?Disable

Enable to Inline “above the fold CSS” while loading the main autoptimised CSS only after page load.

Not recommended.

Inline all CSSDisable

Inlining all CSS is an easy way to stop the CSS from being render-blocking,

but is generally not recommended because the size of the HTML increases significantly.

Additionally, it might push meta-tags down to a position.

For exam – Facebook and WhatsApp will not find them anymore, breaking thumbnails when sharing.

Exclude CSS from AutoptimizeLeave as it is

Here you can add CSS files that you don’t want to minify.

Note: Do not paste the CSS codes here. You can only add files/folders names like wp-content/etc.”

However, the excluded non-minified files are still minified by Autoptimize unless that option under “misc” is disabled.

Remove unused CSS? 

According to Autoptimize, if Google Pagespeed Insights detects unused CSS,

consider using premium rapid load service to reduce your site’s CSS size to up to 90%, resulting in a slimmer, faster site!

Not recommended.

HTML Options

autoptimize best settings
Autoptimize html options – FindMyTricks

Optimize HTML codeEnable

This is recommended to minify your HTML codes.

Keep HTML commentsEnable

Enable this if you want HTML comments to remain on the page.

Disable if your comments are not moderated and approved automatically.

My comments are approved manually, so there is no issue enabling this option.

CDN Options

autoptimize best settings
Autoptimize cdn options – FindMyTricks

CDN base URL – Leave this blank if you are using Cloudflare, otherwise enter your CDN root URL to enable CDN for autoptimized files.

Cache Info

autoptimize best settings
Autoptimize cache info – FindMyTricks

This is the information section. You can’t change or edit options directly from here.

Cache folder – root location of your autoptimize cache folder. 

Can we write – permission to write (make sure it is yes).

Cached styles and scripts – total no. of cached files.

Misc Options

autoptimize best settings
Autoptimize misc options – FindMyTricks

Save aggregated script/CSS as static files?Enable

By default files saved are static CSS/JS, disable this option if your web server doesn’t properly handle the compression and expiry.

Minify excluded CSS & JS files?Enable

When aggregating JS or CSS, excluded files that are not minified (based on filename) are, by default, minified by Autoptimize, despite being excluded.

Uncheck this option if anything breaks, despite excluding it.

Enable 404 fallbacks? Enable

Sometimes Autoptimized JS/CSS is referenced in cached HTML but is already removed, resulting in broken sites.

With this option on, Autoptimize will try to redirect those not-found files to “fallback” versions, keeping the page/site somewhat intact.

In some cases, this will require extra web server level configuration to ensure wp-content/autoptimize_404_handler.php is set to handle 404s in wp-content/cache/autoptimize.

Also, optimize for logged-in editors/administrators.Disable

According to Autoptimize, you have to disable this option if you are using a page builder.

Or you have to purge the cache every time to check the changes you make to your site.

However, I tried both settings and I can’t find any issues when enabling them.

Enable configuration per post/page? Enable

Enable this if you want to add a “meta box” to the post/ page edit screen allowing different optimizations to be turned off on a per post/ page level.

This helps when you want to clear the cache of a separate page or post after changes.

Next is to save changes and empty the cache.

3. Images Settings

autoptimize best settings
Autoptimize image settings – FindMyTricks

Optimize imagesDisable

Enable this if you want to serve your images from ShortPixel’s global CDN including next-generation WebP image formats.

Shortpixel is a premium service where you can optimize only 200 images per month for free. After that, you have to pay.

autoptimize best settings
Autoptimize short pixel – FindMyTricks

If you are not using enough images then connect with shortpixels.

I disable this because my theme already supports and converts the images into WebP format.

Themify Ultra theme has a lot of features that you can’t imagine.

That’s a different topic to discuss here, so you can check this review article of the Ultra theme later when the Autoptimize settings are done.

Lazy Load imagesEnable

Image lazy loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold” page first.

This option is very important and recommended. A lazy load reduces extra requests from loading.

Lazy Load exclusionsLeave as it is

Here you can add image filenames to exclude them from lazy loading.

Lazy-load from nth imageset to 1

1 means lazyloading all images.

2 means lazyloading after 2nd image.

3 means lazyloading after 3rd image and so on.

Click save changes.

4. Critical CSS Settings

autoptimize best settings
Autoptimize critical css settings – FindMyTricks

This is a premium service by the Autoptimize plugin where you can solve issues related to render-blocking CSS and first paint times.

According to Autoptimize, Above the fold CSS (as part of Autoptimize’s “inline & defer CSS”) can help you improve,

but most sites need different critical CSS for different types of pages and generating the correct code can be hard!

However, I do not recommend this as you can solve this issue using Cloudflare Settings.

5. Extra Settings

autoptimize best settings
Autoptimize extra settings – FindMyTricks

Google fontsRemove google fonts

As it impacts your page load time or if you want google fonts then enable “combine and link in the head”.

Remove emojisEnable

Removes WordPress’ core emojis’ inline CSS, inline JavaScript, and un-autoptimized JavaScript files.

Remove query strings from static resourcesEnable

Removing query strings will not improve load time, but might improve performance scores.

Remove WordPress Block CSSEnable

WordPress adds block CSS and global styles to improve the easy styling of block-based sites, but it can add a significant amount of CSS and SVG.

If you are sure your site can do without the block CSS and “global styles”, you can disable them here.

Preconnect to 3rd party domains (advanced users)Leave blank

Add 3rd party domains you want the browser to preconnect to, separated by commas.

Make sure to include the correct protocol (HTTP or HTTPS).

Preload specific requests (advanced users)Leave blank

Here you can add a Comma-separated list of full URLs to preload requests.

Async JavaScript files (advanced users)Leave blank

Comma-separated list of local or 3rd party JS files that should be loaded with the “async” flag.

JS files from your own site will be automatically excluded if added here.

Optimize Youtube videos – Autoptimizes recommended plugin to optimize your youtube videos – Wp Youtube Lyte Plugin

However, I think Lazy load by WP-Rocket works better.

Click save changes.

6. Optimize More

autoptimize best settings
Autoptimize optimize more – FindMyTricks

These are the premium plugins, themes, and CDN for better optimization.

I don’t recommend any of these.

For the best performance of a website, you only need a fast & reliable host, a well-coded theme, CDN configuration,

and some basic knowledge of other things like how minification works, how to optimize the database, etc.

Result (Performance after these settings)

These are my results in Google pagespeed insights, Gtmetrix and Pingdom.

Products & Services I use = Autoptimize + Cloudflare CDN + Cloudways Host + Themify Ultra Theme + Wp Optimize plugin

autoptimize best settings

autoptimize best settings

autoptimize best settings

autoptimize best settings

Wrapping Up

So, these are the Autoptimize best settings configuration for WordPress and of course, tested settings from my side for better performance.

Follow these settings and compare your results. 

Also, let me know in the comments how that works or if you are facing any problems setting up.