How to Debug Your Site When Using Autoptimize

If you use the Autoptimize plugin to combine and minify your CSS and JavaScript, you've likely run into a common challenge: how do you debug your site when the original filenames are gone? This is a frequent point of confusion for users trying to identify which original file a specific line of code belongs to.

Why This Happens

Autoptimize's primary function is to improve site performance. It does this by aggregating multiple CSS or JS files into a single, minified file with a generic name like autoptimize_abc123.css. This process strips out comments and whitespace, making the code harder to read. More importantly, it obscures the original source filenames, which is the core reason debugging becomes difficult.

The Quick and Easy Solution: Disable Autoptimize Temporarily

The most effective and recommended method for debugging is to temporarily disable Autoptimize on a per-request basis. You do not need to deactivate the plugin in your WordPress admin dashboard.

Simply add the following query string to the URL of the page you are trying to debug:

?ao_noptimize=1

For example, if your page URL is:

https://example.com/my-page/

You would change it to:

https://example.com/my-page/?ao_noptimize=1

Loading this modified URL will show you the completely unoptimized page. All of your original CSS and JavaScript files will be loaded individually with their original filenames intact, making it incredibly easy to identify and test changes in your browser's developer tools. This method also bypasses any page caching, ensuring you see the most recent version of your files.

Alternative Workarounds

While the method above is the simplest, the sample threads revealed a couple of other techniques used by the community.

1. Preserve the Query String for Identification
Autoptimize retains the original query string from the source file. This can be used as a clue to identify the file's origin. For instance:

• Original file: home.css?ver=home
• Autoptimized file: autoptimize_abc123.css?ver=home

The ?ver=home remains, giving you a hint that this file was generated from the home.css source.

2. Check the Script Tag's ID
It was also noted that Autoptimize sets the original filename as the id attribute of the aggregated <script> tag in the HTML. Inspecting the page's HTML source code can sometimes provide this information.

What About Feature Requests?

Some users have requested features like adding comments with original filenames inside the optimized file or preserving parts of the original filename. Based on the sample threads, the Autoptimize team has not implemented these features. Their guidance consistently points users toward the ?ao_noptimize=1 method as the standard solution for debugging purposes.

For more complex scenarios, such as needing to preload specific files, the threads indicate the Autoptimize team advises caution, as improper use can negatively impact performance rather than improve it.

By using the ?ao_noptimize=1 trick, you can enjoy the performance benefits of Autoptimize on your live site while maintaining a straightforward path for debugging your development work.