How to Combine External Javascript in WordPress

Combining external javascript is one of the solutions for slow loading WordPress sites. This easy tutorial will show you how and should help your web pages load more quickly.

The need to combine external Javascript files

Some of the plugins/themes added into your site come with a bunch of javascript files. Javascript adds interactive behavior and functionality to your web pages. When you request a web page, all javascript and other file types are fetched from the server and loaded into the browser. You may have experienced clicking a link to a webpage and may be instantly directed but find that not all contents are visible yet. Some sections might not appear completely unless their corresponding .js libraries are fully loaded.

As you add more plugins or functionality to your website, resources that need to be loaded increase over time causing the page to load quite slowly, putting the website at risk of high bounce rate. You can conduct a speed test on your site to confirm whether or not you need to do some optimization.

We use GTMetrix to do site speed testing.

Here’s a sample speed test result:

GTMetrics Result after Combining External Javascript

Solution to slow page load in WordPress: Use a Plugin

This slow page loading problem causes some site owners to either subscribe to a faster, more expensive hosting or remove those embedded videos, high-resolution images, or large typography that causes the slow-down. Fast servers sure make a difference, but as you add more dynamic elements into your site, speed may at some point be jeopardized. One way to resolve this issue is to combine all external javascript files into one single file. Doing so will significantly reduce the fetch-and-load time. You can do it manually by copying and pasting scripts into a single file and then removing all the other files. Sounds tedious, but the good news is, in WordPress, there are plugins that help make this task easier. Some of the most popular ones are the following:

Autoptimize
WP Super Cache

Use one of these plugins to optimize your site by speeding up loading time. Through minification, they both combine all your external javascript files, thus loading up as one single .js file, completing the process more quickly. The minification also works with html and css files.

How to use AUTOPTIMIZE

Let’s have a look at Autoptimize.

Autoptimize

Upon activation of this plugin in your WordPress site, you can go to Dashboard >> Settings >> Autoptimize. Go to the JS, CSS & HTML tab, then tick the box next to Optimize JavaScript Code to enable this function.

Optimize JavaScript Code

Click the Save Changes button at the bottom of the page.

Save Optimize JavaScript Code

Autoptimize also has CSS, HTML, CDN options, among others, found on the same settings page.

When you are done with your preferred settings, you may go back to GTMetrix to run another speed test and see if there is any change in your site stats.

Here’s a screenshot of the speed testing result after enabling the optimization of javascript code in Autoptimize.

GTMetrics Result before Combining External Javascript

 

Widget Options solution to slow page load in WordPress: Enable Widget Cache

If you are a Widget Options user, you can speed up your site loading time by caching WordPress widget output! Cache them all for better performance or exclude any widget you want. This widget option feature will Improve your site loading speed by caching widget output via Transient API. You can easily cache all widgets or exclude whichever you want via a check box provided on each widget option.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

 

I hope this quick tutorial helps! Visit our blog for more interesting WordPress articles and more.