Autoptimize Plugin Settings 2023
Last Updated on 26th May 2023 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 and 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 Plugin Features: A Comparison Chart
This comprehensive chart presents an overview of Autoptimize’s key features and settings.
With options for CDN integration, cache management, and various miscellaneous features, this plugin takes your website’s performance to new heights.
| Features | Autoptimize Plugin |
|---|---|
| Javascript Options | Minify and aggregate JavaScript files,Exclude specific JavaScript files or URLs, Control JavaScript execution position |
| CSS Options | Minify and aggregate CSS files, Exclude specific CSS files or URLs, Inline critical CSS |
| HTML Options | Minify HTML code, Exclude specific HTML files or URLs, Enable HTML comments removal |
| CDN Options | Integration with Content Delivery Networks (CDNs) for efficient content delivery, Specify CDN base URLs, Exclude specific files or URLs from CDN usage |
| Cache Info | View cache size and clear cache files |
| Misc Options | Enable lazy loading for images, iframes, and videos, Control preloading behavior, Optimize Google Fonts, Enable/Disable emojis |
Autoptimize: Full Setup, Best Settings and Configuration
Autoptimize is a powerful plugin designed to simplify the process of optimizing your WordPress website, ensuring lightning-fast page load times and a smooth user experience.
In this guide, we’ll walk you through the optimal settings for the Autoptimize plugin, enabling you to achieve maximum results with minimal effort.
1. Install and Activate
Go to plugins-Add new-Search Autoptimize-Install-Activate.
You can find the Autoptimize plugin in the settings section at the left.
Look at the picture below for a better understanding.
Click on Autoptimize.
2. JS, CSS & HTML Settings
Javascript Options
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 Autoptimize – Leave 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
Optimize CSS code – Enable
It is recommended to enable this to minify your CSS codes.
Aggregate CSS files – Enable
If this option is off, the individual CSS files will remain in place but will be minified.
Also aggregate Inline CSS – Disable
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 images – Disable
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 CSS – Disable
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 Autoptimize – Leave 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
Optimize HTML code– Enable
This is recommended to minify your HTML codes.
Keep HTML comments – Enable
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 base URL – Leave this blank if you are using Cloudflare, otherwise enter your CDN root URL to enable CDN for autoptimized files.
Cache Info
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
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
Optimize images – Disable
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.
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 images – Enable
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 exclusions – Leave as it is
Here you can add image filenames to exclude them from lazy loading.
Lazy-load from nth image – set 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
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
Google fonts – Remove Google fonts
As it impacts your page load time or if you want google fonts then enable “combine and link in the head”.
Remove emojis – Enable
Removes WordPress’ core emojis’ inline CSS, inline JavaScript, and un-autoptimized JavaScript files.
Remove query strings from static resources – Enable
Removing query strings will not improve load time, but might improve performance scores.
Remove WordPress Block CSS – Enable
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
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 = Cloudflare CDN + Cloudways Host + Themify Ultra Theme
Wrapping Up
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.
Also, let me know in the comments if you are facing any problems setting up.
