Why It Is Recommended to Keep jQuery Loaded in WordPress Pages

jQuery is a widely used JavaScript library that many WordPress themes and plugins rely on for functionality. While some users may want to unload jQuery or defer its loading for performance optimization, doing so can lead to issues on a WordPress site. Below, we explore why keeping jQuery loaded is a small but important compromise, along with the advantages and disadvantages of keeping or unloading it.

Why jQuery Should Stay Loaded

  1. Many Plugins Depend on It: WordPress core, many themes, and numerous plugins use jQuery for essential functionality. Unloading it can cause JavaScript errors, breaking features such as sliders, contact forms, and dropdown menus.
  2. Avoiding JavaScript Errors: If jQuery is unloaded or not loaded in the correct order, scripts that depend on it may not function properly. Some common errors include:
    • Uncaught ReferenceError: jQuery is not defined
    • Uncaught TypeError: $ is not a function
    • Cannot read property ‘…’ of undefined
    These errors often arise when jQuery is missing or loaded after the scripts that depend on it.
  3. Ensuring Compatibility Some WordPress admin features, frontend widgets, and user interactions require jQuery. Removing it may break functionality for logged-in users or visitors.
  4. Reliable Browser Support: jQuery provides cross-browser compatibility, simplifying code execution across different environments, especially for older browsers that may not support modern vanilla JavaScript approaches.
  5. WordPress Defaults to Using jQuery in No-Conflict Mode: WordPress loads jQuery in a no-conflict mode (jQuery.noConflict()) to prevent conflicts with other JavaScript libraries, making it safer to use.

Advantages of Keeping jQuery Loaded

  • ✔ Ensures Site Functionality: Keeps plugins, themes, and interactive elements working as intended.
  • ✔ Reduces Debugging and Compatibility Issues: Eliminates errors caused by missing dependencies, making site maintenance easier.
  • ✔ Better Support for Third-Party Integrations: Many third-party scripts (e.g., Google reCAPTCHA, WooCommerce, and contact form plugins) expect jQuery to be available.
  • ✔ Works Well with WordPress Standards: WordPress core includes a stable, optimized version of jQuery that is tested with themes and plugins.

Disadvantages of Keeping jQuery Loaded

  • ❌ Potential Performance Impact: jQuery adds extra weight to the page (typically 30-90KB) and an additional HTTP request if it is not already cached.
  • ❌ Slower Execution Compared to Vanilla JavaScript: Modern JavaScript (ES6 and beyond) can sometimes perform tasks more efficiently than jQuery.
  • ❌ Overuse in Some Plugins: Some themes or plugins may load jQuery unnecessarily or rely on it when simpler JavaScript solutions exist.

What Happens If jQuery Is Unloaded or Deferred?

Unloading jQuery Completely

  • Severe Breakages Possible – Many plugins and themes may stop functioning properly.
  • JavaScript Errors – If any script expects jQuery but cannot find it, errors will occur.
  • UI Elements Malfunctioning – Sliders, modals, dropdowns, and AJAX-based features may break.

Deferring jQuery Loading

  • Ideally Load Without defer or async – For maximum compatibility, it’s best to load jQuery without defer or async attributes so that it is available immediately for any dependent scripts.
  • Issues with Inline Scripts – Many WordPress themes and plugins enqueue inline scripts that expect jQuery to be available immediately.
  • Possible Fix with defer and DOMContentLoaded – If deferring jQuery, make sure that scripts waiting for it are also deferred or wrapped inside DOMContentLoaded.
  • May Still Break Certain Plugins – Some scripts run immediately and assume jQuery is already available.

If you decide to “defer” jQuery using Asset CleanUp Pro from the CSS/JS manager, then all the dependent scripts will likely need to be deferred as well. Additionally, all inline scripts that trigger jQuery code will need to be wrapped inside special delimiters such as DOMContentLoaded to ensure proper execution. Failing to do so can lead to broken functionality and JavaScript errors. So, be careful to properly test after each change!

Example of Wrapping Inline jQuery Code with DOMContentLoaded

If you have inline jQuery code that runs on page load, you must wrap it inside the following:

document.addEventListener("DOMContentLoaded", function() {
    jQuery(function($) {
        // Your jQuery code here
        $(".example").click(function() {
            alert("Button clicked!");
        });
    });
});

This ensures that jQuery is available before execution, preventing errors caused by deferred loading.

Google PageSpeed Insights and jQuery

Google PageSpeed Insights may list jQuery as a render-blocking resource. However, before deciding to unload or defer it, review the list where it is explained when it might be safe to do so. In most cases, jQuery is a small compromise for ensuring a fully functional website. Completely unloading it without proper testing may break key functionalities. If you are considering performance optimization, weigh the benefits against the potential issues and only proceed if you are certain your site does not depend on jQuery.

When Can You Consider Unloading or Deferring jQuery?

  • If No Plugins or Themes Depend on It – If your site uses modern JavaScript and does not rely on jQuery, it may be safe to remove.
  • On Lightweight Pages – Pages such as landing pages with no dynamic content or external dependencies may not require jQuery.
  • With Proper Testing – If you decide to unload or defer jQuery, thoroughly test your site for broken features, missing interactions, and JavaScript errors. Extensive testing is crucial to ensure the site remains functional.

Conclusion

While unloading jQuery might seem like a way to improve performance, it often creates more issues than benefits in WordPress environments. The best approach is to keep jQuery loaded unless you are certain your theme and plugins do not require it. If optimizing performance, consider using a lighter jQuery version, deferring execution carefully, or replacing jQuery-based scripts with native JavaScript where possible.

Was this post helpful?