How to combine external JavaScript in WordPress to boost site speed

Download all in one WordPress cheat sheet

A slow-loading website is a huge problem. However, there are plenty of ways to overcome it, such as properly combining external JavaScript in WordPress.

While the solution might be simple, it would work like a charm. In this article, we will show you why you should combine external JavaScript files in WordPress and how to do it using a few simple steps.

Why do you have to combine external JavaScript files?

When you request an HTML page, the browser sends an inquiry for all the needed resources. All files, including JavaScript ones, are then fetched from the server and loaded into the browser again.

In every request, JavaScript files are downloaded together but executed in the order they appear in the HTML. While the separate download itself might slow down the website, the sequence processes might keep you waiting even more.

JavaScript and CSS files without async/defer attributes are render-blocking resources that prevent the page from rendering until they are completely loaded and processed. As these files are commonly located in the head of a web page, this can delay the initial page render and cause performance issues.

To avoid performance issues, check your website’s performance by conducting a speed test.

There are many websites like Pingdom, GTMetrix and Google PageSpeed Insights that will help you to do that. All you have to do it put your website link, and click Analyse.

Here are the examples of our testing site results:

Ideally, the result should be within the green categories (fast). Or at least, ensure that your site is not in the red category. If that happens, take immediate action.

Usually, you get a warning if more than five JavaScript files are found. Once you locate the issues, you are ready to fix them.

HTTP/2

Released in 2015, HTTP/2 — Hypertext Transfer Protocol version 2 — remains the standard for most websites, though HTTP/3 has emerged as the latest protocol since 2020. HTTP/2 was developed as an enhanced version of HTTP/1.1, which had been the standard since 1989. The enhancement of HTTP/2 is intended to:

• Improve page load speed
• Enable parallel downloads
• Enable multiplexing
• Make a compression of request headers
• Head-of-line or package blocking

HTTP/2 has several methods to reduce latency, which will impact the overall website performance.

Keep in mind that this tutorial on combining external JavaScript files is meant for those who use HTTP/1.1.

How to combine external JavaScript files in WordPress?

As mentioned earlier, multiple JavaScript files will add to the total render time and trigger a warning when conducting a page load speed test.

As a solution, you can combine external JavaScript files in WordPress, turning all of them into a single file.

While manually copying and pasting JavaScript files into one might seem simple, incorrect execution of these tasks can be more harmful than helpful due to JavaScript’s steep learning curve.

Instead, you can use a plugin to combine external JavaScript in WordPress to make your life easier.

One of the best plugins for this is Autoptimize.

This plugin can help you handle minification tasks for HTML, CSS, or JavaScript files. Regularly updated, with than 900,000 active installations, this plugin is highly recommended.

While you can use it for free, you can get its premium versions for more features: Autoptimize Pro Configuration ($167).

Once installed and activated, go to the WordPress dashboard -> Settings -> Autoptimize. Under the JS, CSS & HTML menu, enable the Optimize JavaScript Code. Then, click Save Changes. The optimization is automatic, so you can immediately test your web page load speed again to see the improvements.

Additionally, if you want to combine CSS files, enable the Optimize CSS Code option. If you’re using CDN, you can enable all the options, including the CDN options.

Conclusion

Website loading speed plays a crucial role in user experience and SEO. If you encounter any issues with performance, it’s best to address them as soon as possible.

One way to improve loading times is by combining external JavaScript files. While this can significantly boost speed, doing it manually requires a solid understanding of code.

To minimize the risk of errors, consider using a plugin instead. Autoptimize is a popular WordPress plugin that handles this automatically—just install it, and it will take care of the optimization for you.

All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.