Table of contents

Why combine external JavaScript files in WordPress? Before you start: backup and benchmark your site Option 1: combine JavaScript using a WordPress plugin Option 2: combine JavaScript manually via functions.php Async and defer: control how JavaScript loads Common issues and how to fix them Tips for maintaining performance Getting started

Get the industry’s fastest WordPress hosting ◦ 99.999% uptime
◦ Comprehensive security
◦ 24/7 support

WordPress Guide → Development → Combine External JavaScript

How to combine external JavaScript in WordPress for better performance

JavaScript makes WordPress sites more interactive, but too much of it—especially from multiple external sources—can slow your site down fast. If your site is taking longer to load or performing poorly on speed tests, combining external JavaScript files could give you a major performance boost.

Let’s walk through what it means to combine external JavaScript, why it helps, and how to safely do it with or without plugins.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

Why combine external JavaScript files in WordPress?

Every time a browser loads your WordPress site, it has to download each JavaScript file listed in your theme or plugins. When there are lots of separate files—especially from external sources like social media widgets, analytics tools, or plugins—it creates multiple HTTP requests. Each one of those requests adds load time.

Combining JavaScript files reduces the number of these requests, which can lead to:

Faster page loads. Fewer files means fewer round trips between the browser and the server.
Better performance scores. Core Web Vitals, PageSpeed Insights, and GTmetrix all reward optimized script handling.
Improved user experience. Faster sites keep users engaged and reduce bounce rates.
Cleaner caching and CDN behavior. One combined file is easier to manage and distribute than many small ones.

But keep in mind, not all scripts should be combined. Some are best left separate, especially those that need to load in a specific order or that come from third-party sources you don’t control.

Before you start: backup and benchmark your site

Before you touch any files or install optimization plugins, take a few minutes to protect and evaluate your site.

Backup your WordPress site. Use a plugin like UpdraftPlus or your hosting provider’s built-in backup tool. That way, you can restore your site if anything breaks.
Run a speed test. Tools like PageSpeed Insights, GTmetrix, and Pingdom Tools can show you:
- How many JavaScript files are being loaded
- Which ones are render-blocking
- Total load time and potential optimizations
Note which scripts are causing slowdowns. Focus on those that come from your own theme or plugins first—they’re usually the safest to combine.

Option 1: combine JavaScript using a WordPress plugin

If you’re not comfortable writing code or editing theme files, plugins are your best bet. They offer a safer and more beginner-friendly way to combine and optimize scripts.

Recommended plugin options

Each of these handles JavaScript combining a little differently, but they’re all designed to improve performance:

Autoptimize – Most popular plugin for combining and minifying JavaScript, CSS, and HTML. Simple UI with advanced controls like async and defer.
Asset CleanUp – Great for unloading unnecessary scripts and combining only the ones you need. Excellent control over where scripts load.
Fast Velocity Minify – Automatically combines and compresses CSS and JS files. Offers performance-focused settings.
W3 Total Cache – A full caching suite that also handles minification and combining of JavaScript.

For most users, Autoptimize is the easiest to get started with. Let’s walk through how to use it.

How to combine JS with Autoptimize

Install and activate the plugin. Go to Plugins > Add New, search for “Autoptimize,” then click Install and Activate.
Open the Autoptimize settings. Navigate to Settings > Autoptimize in your dashboard.
Enable JavaScript optimization. Check the box labeled “Optimize JavaScript Code?” This tells Autoptimize to compress and combine your JS files.
Aggregate JS files. Make sure “Aggregate JS-files?” is also checked. This step is what actually combines the separate files into one.
Use optional settings carefully. You can also enable:
- “Also defer JS files?” – Tells the browser to load JS after parsing the page.
- “Add try-catch wrapping?” – Helps avoid JavaScript errors from breaking your layout.
Save changes and clear cache. Click Save Changes and Empty Cache. Then visit your site in a new incognito window to test how it loads.
Run a speed test again. See how your score improved and check the waterfall view to confirm that multiple JS files are now combined into one.

Option 2: combine JavaScript manually via functions.php

If you’re comfortable editing theme files and want more control, you can manually combine scripts yourself. This method is more flexible but also riskier, so take it slow and test frequently.

Step-by-step: combine external JS manually

Find out which scripts your site loads. Open your site in Chrome, right-click anywhere on the page, and choose Inspect. Go to the Network tab and filter by JS to see which files are being loaded and from where.
Download and combine the JS files. Right-click on each relevant file and save them to your computer. Open each in a text editor (like VS Code or Notepad++) and paste their contents into a new file, one after the other. Keep third-party libraries (like jQuery) separate unless you’re sure they won’t cause conflicts.
Upload the combined file to your theme. Use an FTP client or your hosting file manager to upload the new combined.js file into your theme’s /js folder.
Enqueue the new script in WordPress. Open your theme’s functions.php file (or create a custom plugin) and add:

function load_combined_js() {
wp_enqueue_script(‘combined-js’, get_template_directory_uri() . ‘/js/combined.js’, array(), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘load_combined_js’);

This tells WordPress to load your new combined script at the bottom of the page (true in the last parameter = load in footer).
Deregister or dequeue duplicate scripts. If WordPress or plugins are loading the same scripts individually, you’ll want to remove them:
function remove_duplicate_js() {
wp_dequeue_script(‘old-script-handle’);
wp_deregister_script(‘old-script-handle’);
}
add_action(‘wp_print_scripts’, ‘remove_duplicate_js’, 100);
Replace ‘old-script-handle’ with the actual handle used by the theme or plugin. You may need to check the plugin documentation or use Query Monitor to find it
Test everything. Refresh your site, check for broken layouts or missing functionality, and use the browser console to check for JavaScript errors.

Async and defer: control how JavaScript loads

Even after combining your JS files, your site can still benefit from controlling when and how scripts are loaded.

Async loads scripts during page parsing and executes them right away. Best for scripts that don’t depend on others.
Defer loads scripts in the background but waits until the page is fully parsed to execute. Best for most combined scripts.

To apply defer to your combined script, add this to functions.php:

function defer_combined_js($tag, $handle) {     if ('combined-js' !== $handle) return $tag;     return str_replace(' src', ' defer="defer" src', $tag); } add_filter('script_loader_tag', 'defer_combined_js', 10, 2);

This ensures your script doesn’t block the browser from rendering the page.

You can also use the Async JavaScript plugin (by the same developer as Autoptimize) for easier control of async and defer attributes without code.

Common issues and how to fix them

Combining scripts can cause problems if you’re not careful. Here’s what to watch out for:

JavaScript errors or missing features. If something stops working—like forms, sliders, or menus—check the browser console. It could be a script conflict or missing dependency.
Broken third-party tools. Some scripts (like Facebook Pixel, Google Ads, or live chat widgets) need to load separately. Don’t combine these—just defer or async them.
Caching issues.
After combining files, clear all your caches: plugin cache, browser cache, and CDN cache if you’re using one.
Script load order problems. Some scripts must load after others (e.g., jQuery before jQuery plugins). If you combine them in the wrong order, features may break.

If something goes wrong, you can always disable the plugin or restore from your backup.

Tips for maintaining performance

Once you’ve combined your scripts and optimized performance, keep things running smoothly by:

Updating your combined file regularly. If your theme or plugins update their scripts, your combined file might need updating too.
Avoiding over-combining. Don’t include scripts that are already loaded from CDNs efficiently or those that don’t benefit from combining.
Monitoring your site. Use GTmetrix, WebPageTest, or Pingdom Tools monthly to make sure performance hasn’t slipped.
Using a CDN. A CDN like Cloudflare can serve your combined script faster to users around the world.

Next steps for combining external JavaScript in WordPress

Combining JavaScript in WordPress can dramatically improve load times and performance—but it needs to be done carefully. With the right tools and testing, you can clean up your site’s script loading and deliver a faster experience to every visitor.

Start with a plugin like Autoptimize for the easiest path. Then, if you need more control, consider manually combining your scripts and adding defer or async behavior.

Ready to upgrade your WordPress experience? Professional hosting improves speeds, security, and reliability for a website and a brand that people find engaging and trustworthy.

Don’t want to deal with server management and maintenance? Our fully managed hosting for WordPress is the best in the industry. Our team are not only server IT experts, but WordPress hosting experts as well. Your server couldn’t be in better hands.

Click through below to explore all of our hosting for WordPress options, or chat with a WordPress expert right now to get answers and advice.