Autoptimize Plugin Settings – Full Setup, Configuration and My Tips

Estimated reading time: 9 minutes

Last updated on March 26th, 2024 at 06:52 am

Are you looking for “Autoptimize Best Settings”?

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.

Autoptimize is like a speed wizard. It shrinks the big and heavy parts of your website, making it load faster.

Faster websites make people happy, and Google loves them too.

In fact, for every second your site takes to load, you can lose 7% of your audience. Autoptimize can help you avoid that!

Let’s start,

Autoptimize: Full Setup, Best Settings and Configuration

1. Install and Activate

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

install and activate autoptimize

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

Look at the picture below for a better understanding.

settings autoptimize

Click on Autoptimize.

2. JS, CSS & HTML Settings

Javascript Options

java options autoptimize

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 from displaying.

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

If Enabled, make sure to check nothing breaks on your site.

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 find 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 I already enabled 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/folder 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.

Also Read  Switch Back to the Classic Editor by Disabling the Gutenberg Block Editor in WordPress

Not recommended. 

CSS Options

css options autoptimize

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 and sometimes break your site.

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

html options autoptimize

Optimize HTML code Enable

This is recommended to minify your HTML codes.

Also minify inline JS/CSSEnable

Make sure to check if nothing breaks after enabling this option.

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

cdn options autoptimize

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

cache info autoptimize

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

misc options autoptimize

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.

Also Read  Revive Old Posts Plugin Settings - Auto Share and Schedule Old Blog Posts to Social Media

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

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.

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

image options autoptimize

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.

short pixel

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 the 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 2

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

critical css autoptimize

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!

Also Read  What is PWA (Progressive Web App)- Examples, Features and Importance

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

5. Extra Settings

extra settings autoptimize

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.

Make sure to check your website after this setting as this can break your site. For example – one of my site’s mobile menus stopped working.

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

optimize more autoptimize

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.

My Performance Scores

These are my results in Google Pagespeed Insights and Gtmetrix.

My Setup Includes = Cloudflare CDN + Cloudways Host + Themify Ultra Theme + Super Page Cache Plugin

pagespeed insights mobile autoptimize

pagespeed insights desktop autoptimize

pingdom autoptimize

gtmetrix autoptimize

ttfb speed vitals autoptimize

Wrapping Up – Autoptimize Best Settings

So, these are the Best settings of Autoptimize Plugin and of course, tested settings from my side for better performance.

Follow these settings and compare your results. 

BTW for best results, I recommend using my Setup.