Troubleshoot the Minification & Aggregation: CSS, JavaScript

If you’re delving into the digital realm, understanding how to troubleshoot the minification and aggregation of CSS and JavaScript is essential, especially for those using WordPress with mentioned plugins. This process can significantly enhance your website’s speed but might come with challenges like many tech endeavors. Here’s a step-by-step guide to help you navigate this terrain.

The current article is "6.23. Mini/Aggregation Issues" of our Complete SEO Guide Box.
Previous Article: 6.22. Paste as Preformatted Block. Next Article: 7.1. Removing Pages

Contents

1 Recognizing Minification and Aggregation Issues ∞
2 Deactivating Plugins: A First Step ∞
3 Disable Aggregation and Minification Features ∞
4 Identifying the Troublesome CSS or JavaScript File: Technical Approach ∞
5 Identifying the Troublesome CSS or JavaScript File: Less Technical Approach ∞
6 Conclusion ∞

Recognizing Minification and Aggregation Issues ∞

When troubleshooting minification and aggregation, it’s crucial first to identify the problem. A broken website layout, malfunctioning site features, or browser console errors are tell-tale signs. If you’re using the Astra WordPress theme, it can show guest users the admin top toolbar under certain circumstances. And if you use Cleary Cache like we are in this Complete SEO Guide Box, we already fixed that with the Clearfy Cache WordPress Plugin settings.

Deactivating Plugins: A First Step ∞

Turn off all plugins related to minification and aggregation as a first step of troubleshooting. This will confirm if these processes are causing the disturbance. Don’t forget to clear any caches that you might have. Check your website afterward to see if it fixed the issue.

Since in this Complete SEO Guide Box, we use the Clearfy Cache, you should deactivate it. Clearfy Cache is an advanced optimization tool that improves your website’s speed by managing your cache, aggregating your JavaScript/CSS files, and performing numerous other optimization tasks. But in some instances, this plugin can cause some unforeseen issues (probably like others since it is a problem of minification and aggregation).

Disable Aggregation and Minification Features ∞

Reactivate the plugin.
Disable CSS and JavaScript Aggregation and Minification features.
Clear all the caches.
Recheck your site.
Suppose you see that the issue wasn’t resolved. In that case, it means that there is another issue that is not related to CSS or JavaScript minification and aggregation.

Continue troubleshooting the aggregation and minification issues.

If the issue is fixed, enable only one feature at a time (don’t forget to clear all the caches each time):
1. Turn on CSS Minification. Turn off the rest.
2. Turn on CSS Aggregation. Turn off the rest.
3. Turn on JavaScript Minification. Turn off the rest.
4. Turn on JavaScript Aggregation. Turn off the rest.

When you find precisely which feature causes the trouble, turn off only this feature and enable the rest. For example, if CSS Aggregation causes the issue, turn off CSS Aggregation and enable CSS Minification, JavaScript Minification, and JavaScript Aggregation. Clear all the caches.

Identifying the Troublesome CSS or JavaScript File: Technical Approach ∞

For those new to the process, determining which CSS or JavaScript file is causing disruptions while troubleshooting minification and aggregation can be challenging.

While the problematic feature is enabled, start by using browser developer tools; browsers like Chrome and Firefox provide ‘Inspect Element’ tools that let you view the source code of your website. The ‘Sources’ tab lists all loaded CSS and JavaScript files. If there’s an issue, it often reflects as a red error icon next to the problematic file. You can also view the console for specific error messages pointing to a file.

Identifying the Troublesome CSS or JavaScript File: Less Technical Approach ∞

Since we found which feature is problematic, we know whether it is a JavaScript or a CSS file based on the feature. Now, we can continue troubleshooting minification and aggregation. Enable the problematic feature, clear all the caches, and navigate to the site while opening the ‘Developer Tools’ [Network] tab. You should see there all the CSS and JS files that load.

Now, turn off the problematic feature and clear all the caches. Reload the site while monitoring the [Network] tab. Note the new CSS or JS files loaded that weren’t there with the problematic feature enabled.

If the files aren’t minified, you should add their name to the exclusion list of the problematic feature. For example, if the path to the file is:

https://www.yourdomain.com/wp-content/plugins/someplugin/menu.css

You should add the path to the file as:

someplugin/menu.css

since it uses the ‘contains’ string method and not the exact match. If it is a CSS file, Clearfy Cache has a special list for critical CSS files, so first try to add it there. If it doesn’t help, relocate the line to the CSS Minification and Aggregation exclusion list. The JavaScript section has no critical files list, only the exclusion.

Suppose the file name is minified, like “wmac_“, then try to download the file and understand to which element it relates. When found, please turn off all the minification and aggregation features, clear the caches, and see the actual name of this file, then add it to the appropriate exclusion list and clear all the caches.

Conclusion ∞

These steps should effectively ensure you can troubleshoot minification and aggregation issues on your site, allowing for a seamless user experience. If these issues persist or you find them overly complex, don’t hesitate to contact the plugin or theme’s support team for help.