A slow website doesn’t just frustrate visitors, it costs you customers. If your WordPress site takes more than a few seconds to load, people leave before they ever see what you offer. One of the most effective free tools to fix this is the Autoptimize plugin, but getting your Autoptimize plugin settings right makes all the difference between a noticeable speed boost and a site that barely improves (or worse, breaks).
At Avatar Website Design, we configure and optimize WordPress sites for small businesses every day. Speed optimization is a core part of what we do, and Autoptimize is one of the plugins we rely on regularly. We’ve tested dozens of setting combinations across different themes, hosting environments, and plugin stacks to find what actually works.
This guide walks you through the best Autoptimize configuration step by step, the same approach we use for client sites. You’ll learn exactly which settings to enable, which to leave alone, and why each choice matters for your site’s performance.
What Autoptimize does and what it does not
Autoptimize is a free WordPress plugin that optimizes your site’s front-end performance by processing and compressing the code your server sends to browsers. When you configure your Autoptimize plugin settings correctly, it aggregates and minifies JavaScript, CSS, and HTML files, reducing both the number of requests your site makes and the total file size browsers need to download. Fewer, smaller files mean faster load times for your visitors.
Understanding exactly what Autoptimize handles prevents you from expecting results it was never designed to deliver.
What Autoptimize actually optimizes
Autoptimize works on your static front-end assets: the JavaScript, CSS, and HTML your server sends to visitors. It combines multiple JS files into one, strips unnecessary whitespace and comments from CSS and HTML, and can defer or inline scripts to improve rendering speed. It also offers image lazy loading and basic critical CSS injection to help your above-the-fold content display faster.
Here is a quick breakdown of what Autoptimize targets:
- JavaScript: Aggregates, minifies, and optionally defers scripts
- CSS: Combines and minifies stylesheets, with critical CSS support
- HTML: Strips whitespace and comments from your markup
- Images: Lazy loads images below the fold
- Fonts: Can remove or optimize Google Fonts loading behavior
What Autoptimize does not do
Autoptimize does not handle server-side performance. It won’t speed up your database queries, improve your hosting response time, or replace a dedicated caching plugin. Your server’s time to first byte (TTFB) sits completely outside its scope. If your hosting is slow, Autoptimize will still deliver faster assets, but your overall load time gains will be limited.
Beyond server speed, image compression is another gap. Autoptimize can lazy load images, but it won’t reduce the file size of your PNG or JPEG files. For that, you need a separate image optimization tool. Think of Autoptimize as one important layer in a broader performance strategy, not a complete solution on its own.
Step 1. Set your baseline and avoid conflicts
Before you touch a single Autoptimize plugin settings option, you need a clean starting point. Open your site and run it through Google PageSpeed Insights to record your current load time and score. Write that number down before making any changes, so you have a real benchmark to measure every adjustment against.
Testing before and after every change is the single most reliable way to know if Autoptimize is helping or hurting your specific site.
Check for plugin conflicts first
Conflicts between Autoptimize and your caching plugin are common and can cause broken layouts or JavaScript errors. If you’re running WP Rocket, W3 Total Cache, or LiteSpeed Cache, check whether those plugins already handle JS or CSS optimization. Running duplicate optimization from two plugins at once creates conflicts that are difficult to diagnose.
Disable the JS and CSS optimization features inside your caching plugin before enabling those same features in Autoptimize. The two tools should never process the same files simultaneously.
Start with the plugin’s default state
Install Autoptimize and leave every setting at its default value for your first test run. This shows you the plugin’s baseline impact on your specific site and theme. Then enable features one at a time, running a PageSpeed test after each change. This method lets you isolate exactly which setting causes a problem if something breaks.
When you run your baseline test, record these three things:
- PageSpeed score (both mobile and desktop)
- Total page size in kilobytes
- Number of requests the page makes
Step 2. Configure JavaScript settings safely
JavaScript is the highest-risk area in Autoptimize because it controls how scripts load in your browser. These settings deliver the most noticeable performance gains, but they also carry the greatest chance of breaking your site’s functionality if enabled without careful testing. Work through them one at a time.
Enable one JavaScript option at a time and test your site in an incognito browser window after each change before moving on to the next setting.
Recommended JavaScript settings
The Autoptimize plugin settings screen breaks the JS tab into several distinct options. Use the table below as your starting configuration, then adjust based on what your specific theme and plugins require:
| Setting | Recommended | Reason |
|---|---|---|
| Optimize JavaScript Code | On | Minifies and aggregates JS files |
| Aggregate JS-files | On | Reduces total HTTP request count |
| Also aggregate inline JS | Off | Can break plugins using inline scripts |
Force JavaScript in <head> |
Off | Creates render-blocking on most sites |
| Load JS deferred | On | Delays non-critical scripts until after render |
When to disable JS aggregation
Some page builders and WooCommerce setups depend on a specific script load order. If your site shows a broken navigation menu, missing sliders, or a blank screen after enabling aggregation, disable "Aggregate JS-files" immediately and clear your cache.
Minification alone, without aggregation, still reduces file sizes significantly and usually avoids compatibility issues entirely. You can re-enable aggregation later for individual scripts by using the exclusion field in the settings panel to skip problematic files.
Step 3. Configure CSS and critical CSS
CSS settings in Autoptimize carry less risk than JavaScript but still require careful handling. Your goal is to combine and minify stylesheets so browsers download fewer, smaller files while keeping your layout intact. Open the CSS tab in your Autoptimize plugin settings and use the table below as your starting configuration.
Recommended CSS settings
Work through these options and test your layout after enabling them together rather than one by one, since CSS issues typically show up as broken layouts or missing styles rather than JavaScript errors.
| Setting | Recommended | Reason |
|---|---|---|
| Optimize CSS Code | On | Minifies and aggregates CSS files |
| Aggregate CSS-files | On | Reduces total stylesheet requests |
| Also aggregate inline CSS | Off | Can conflict with page builders |
| Generate data: URIs for images | Off | Often increases file size unexpectedly |
| Inline all CSS | Off | Skips browser caching for stylesheets |
How to add critical CSS
Critical CSS is the above-the-fold styling your browser needs to render the visible portion of your page immediately. Autoptimize lets you paste this directly into the settings panel. You can generate critical CSS for any URL using Google’s PageSpeed Insights, which identifies the render-blocking styles your page loads unnecessarily.
Paste your critical CSS into the designated field and set your full stylesheet to load asynchronously to eliminate render-blocking CSS entirely.
If your theme ships with a large stylesheet, even a small critical CSS block covering your header, hero section, and navigation can cut your Largest Contentful Paint time noticeably.
Step 4. Finish with HTML, fonts, CDN, and extras
The final group of options in Autoptimize covers HTML, fonts, CDN, and extra features. These settings carry less risk than JavaScript, but each one still contributes to your overall page load reduction when you configure them correctly.
HTML and font settings
HTML minification removes whitespace and comments from your page markup without changing anything visible to your visitors. Enable this option and run a quick layout check to confirm nothing breaks. For fonts, Autoptimize gives you control over Google Fonts loading behavior, letting you remove them entirely or switch the display method to "swap" so visitors see text immediately instead of a blank space while fonts load.
Removing unused Google Fonts eliminates render-blocking requests that slow down your first meaningful paint, especially on mobile connections.
CDN and extra options
If you use a Content Delivery Network like Cloudflare or Bunny.net, paste your CDN URL into the designated field inside your Autoptimize plugin settings. Autoptimize rewrites all asset URLs to point to your CDN so browsers fetch files from edge locations closer to your visitors rather than your origin server. This single change can drop asset delivery time noticeably for visitors located far from your hosting region.
Under the Extras tab, enable image lazy loading to delay off-screen images from loading until the visitor scrolls to them. Skip the preconnect and prefetch fields unless you have already identified specific third-party domains as bottlenecks inside Google PageSpeed Insights.
Next steps for a faster site
You now have a complete, tested approach to your Autoptimize plugin settings that covers JavaScript, CSS, HTML, fonts, and CDN configuration. The most important habit to carry forward is testing after every single change using PageSpeed Insights and recording your scores so you always know what each setting actually contributes to your performance.
Your Autoptimize configuration is one layer of a broader strategy. Pair it with a quality caching plugin, a compressed image library, and reliable hosting to see the full benefit. Review your settings every few months when you add new plugins or switch themes, since new code can shift which optimizations your site needs.
Running a fast, well-optimized website takes more than one plugin to get right. If you want a professional to handle the setup for you, contact the Avatar Website Design team and we’ll get your site performing at its best.