Back to Community
Home / Community / Plugin → Autoptimize

Why Autoptimize Creates Multiple CSS Files and How to Fix It

28 threads Sep 17, 2025 Plugin → Autoptimize

Content

If you're using Autoptimize to speed up your WordPress site, you might have noticed it sometimes generates multiple CSS files instead of a single, aggregated one. This can be confusing and may seem to defeat the purpose of using an optimization plugin. Let's break down why this happens and the most common solutions to consolidate your stylesheets.

Why Multiple CSS Files Appear

Based on community discussions and troubleshooting, Autoptimize creates multiple CSS files for a few key reasons:

  • Default Exclusions: To prevent its cache from growing uncontrollably, Autoptimize by default excludes CSS files located in wp-content/uploads and wp-content/cache from aggregation. Many page builders (like Elementor) and themes store dynamic, page-specific CSS in these folders. When excluded, these files are processed individually, resulting in additional autoptimize_single_... files.
  • Inline CSS Handling: The "Also aggregate inline CSS?" option can sometimes cause issues. If certain inline CSS patterns are present (like the .wp-container- classes introduced in WordPress 5.9), they can cause cache busting and multiple file generation. Newer versions of Autoptimize automatically handle this, but older installations might need a manual fix.
  • Third-party or External CSS: Autoptimize cannot aggregate CSS from external, third-party sources (like Google Fonts or CDNs). These will always remain as separate requests.
  • Plugin or Theme Conflicts: Occasionally, a conflict with another plugin or your theme can interfere with Autoptimize's aggregation process, preventing it from working correctly.

How to Consolidate CSS into a Single File

Here are the most effective solutions, drawn from resolved support threads, to achieve a single aggregated CSS file.

1. Modify CSS Exclusion Rules

The most common fix is to adjust what Autoptimize is allowed to aggregate. By default, it excludes CSS in certain directories. You can change this.

  1. Go to Autoptimize → CSS Options.
  2. Look for the "Exclude CSS from Autoptimize:" text field.
  3. The default value often includes wp-content/uploads. You can try removing this exclusion.
  4. Save changes and clear your Autoptimize and page caches.

Important Note: Removing this exclusion might cause your Autoptimize cache size to increase significantly, as it will now store a unique CSS file for every page that has unique uploads CSS. Monitor your cache directory if you do this.

2. Check the "Also Aggregate Inline CSS" Setting

If you are using an older version of Autoptimize and WordPress 5.9 or newer, inline CSS can cause problems.

  1. Ensure your Autoptimize plugin is updated to the latest version, as versions 2.9.5.1 and newer automatically handle WordPress 5.9's inline CSS.
  2. If you cannot update, you can manually add .wp-container- to the CSS exclusion list as a temporary workaround.

3. Identify Conflicting Plugins or Code

If the above steps don't work, a conflict might be preventing aggregation.

  1. Temporarily disable other caching or optimization plugins (e.g., SG Optimizer, WP Super Cache) to see if Autoptimize then works correctly.
  2. Switch to a default WordPress theme (like Twenty Twenty-Four) to rule out a theme-specific issue.
  3. Check if any custom code in your functions.php file is dequeuing stylesheets. Remember, Autoptimize works after the enqueuing process, so it will only aggregate styles that are actively enqueued by your theme and plugins.

4. Understand the Limits: External CSS

Autoptimize cannot combine CSS from external domains. For files like //ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css, the only solution is to host a copy of the file on your own server and enqueue it locally before Autoptimize can process it.

When Multiple Files Are Okay

It's important to note that having a couple of CSS files is not always a bad thing. With modern HTTP/2 servers, the overhead of multiple small requests is reduced. The goal is to find a balance that delivers the best performance score for your specific site. Sometimes, excluding a very large, plugin-specific CSS file (like Elementor's) can be a more effective strategy for overall performance than forcing everything into one massive bundle.

By understanding these common causes and solutions, you can better configure Autoptimize to work with your specific WordPress setup and achieve optimal loading times.

Related Support Threads Support