Back to Community

Resolving Common JavaScript Conflicts with Speed Optimizer's Combine Files Feature

Content

One of the most powerful features of the Speed Optimizer plugin is its ability to combine multiple JavaScript files into a single, optimized file. This process reduces HTTP requests and can significantly improve your site's loading time. However, this automated process can sometimes conflict with specific themes or plugins, leading to JavaScript errors and broken functionality.

Why Do These JavaScript Conflicts Happen?

The Combine JavaScript Files feature works by automatically merging scripts. This process relies on JavaScript being written according to strict coding standards. When a script from a theme or another plugin deviates from these standards—for instance, by using improper syntax, import statements outside of modules, or having missing dependencies like jQuery—the combined file can break. Common symptoms include:

  • Uncaught ReferenceError: jQuery is not defined
  • Uncaught TypeError: Cannot read properties of undefined
  • Uncaught SyntaxError: Cannot use import statement outside a module
  • Contact forms, sliders, or menus failing to work
  • Third-party scripts (e.g., Facebook SDK, analytics) not loading

How to Troubleshoot and Fix Combine JS Conflicts

If you encounter a JavaScript error after enabling this optimization, follow these steps to identify and resolve the issue.

Step 1: Identify the Problematic Script

Open your browser's developer tools (F12) and check the Console tab for any red error messages. The error will often point to the siteground-optimizer-combined-js-....js file, indicating the issue originated during the combination process. The error message itself is your best clue for what went wrong.

Step 2: Use the Built-in Exclusion Tool

The most straightforward fix is to exclude the conflicting script from combination.

  1. Navigate to Speed Optimizer > Frontend > JavaScript.
  2. Find the Combine JavaScript Files option and click on the Exclude from JavaScript Combination dropdown menu below it.
  3. Scroll through the list of enqueued scripts and select the one(s) that may be causing the issue. Common culprits are often jQuery, theme-specific scripts, or plugins like Gravity Forms, Smart Slider, or Contact Form 7.
  4. Save your changes and clear all caches before testing your site again.

Step 3: Exclude Scripts Using Custom Filters (Advanced)

If the script you need to exclude is not in the dropdown list (common for inline or externally hosted scripts like Facebook SDK or analytics), you can use custom filters. Add the following code to your child theme's functions.php file or a code snippets plugin.

To exclude an external script by its URL:

add_filter( 'sgo_javascript_combine_excluded_external_paths', 'js_combine_exclude_external_script' );
function js_combine_exclude_external_script( $excluded_paths ) {
    // Add the external script URL to the exclusion array
    $excluded_paths[] = 'analytics.ahrefs.com';
    $excluded_paths[] = 'cbcmpgs.gateway.mastercard.com';
    return $excluded_paths;
}

To exclude a specific file by its handle:

add_filter( 'sgo_javascript_combine_exclude', 'js_combine_exclude_script' );
function js_combine_exclude_script( $exclude_list ) {
    // Add the script handle to the exclusion array
    $exclude_list[] = 'jquery-core';
    $exclude_list[] = 'checkoutwaiting'; // Example from thread #3
    return $exclude_list;
}

When Exclusion Isn't Enough

In some cases, the error may be due to a bug in the combining process itself or a fundamental incompatibility. If the above steps do not resolve the issue, you may need to temporarily disable the Combine JavaScript Files option and report the specific error to the Speed Optimizer team so they can investigate it for a future update.

By systematically identifying and excluding problematic scripts, you can often enjoy the performance benefits of JavaScript combination without sacrificing your site's functionality.

Related Support Threads Support