The javascript programming language helps web pages display dynamic content. On WordPress websites, for example, Javascript is used to embed audio and video. It is also used to display image galleries, interactive menus, countdown timers and more.

Javascript files use the file extension .js and on a typical WordPress website, Javascript files are inserted into pages by the WordPress theme and WordPress plugins that are activated. For example, your theme’s home page slider may require a file called slider.js to function correctly, whereas your contact form page may require a file called form.js.

I believe Javascript is essential to modern WordPress websites. Unfortunately, it can also make a website slow if it is not optimised correctly.

In the first versions of the Hypertext Transfer Protocol, Javascript can slow down websites as each Javascript file had to be downloaded and executed in order for the page to be displayed correctly. A popular optimisation technique for tackling this problem is to combine multiple Javascript files in order to reduce the number of HTTP requests a browser has to make. The technique is sometimes referred to as Javascript aggregation.

In this article, I will explain why many website owners combine external Javascript in WordPress and share some useful WordPress plugins which can be used to perform this task. I will also talk about why combining external Javascript files is no longer necessary for most website owners.

Why Combine External Javascript Files in WordPress?

Whilst Javascript functions can be added directly into HTML using the SCRIPT tag, it is common practice to save Javascript code in an external file instead. It is more practical to do this as it separates the code and allows Javascript functions to be called by many pages.

Each Javascript file that is required by a web page has to be downloaded by the browser during the page rendering process.

Page Rendering	When someone views a web page, the browser builds the page by processing each line of code in order. This is known as page rendering.
HTTP Requests	A request to access a file on a server is called an HTTP request. The browser, therefore, has to make an HTTP request for each Javascript file that is required for the page.

When files are downloaded in sequential order, a high number of HTTP requests can increase the time it takes to load a web page. So by combining external Javascript files in WordPress, you can greatly reduce the number of HTTP requests that are made during page rendering.

Some search engines recommend combining external Javascript into two files.

Important Javascript Functions (File 1)	The first Javascript file contains important functions which are required to render the initial page load correctly.
Less Important Javascript Functions (File 2)	The second Javascript file contains less important functions that can be called once the page has been loaded.

If a web page requires nine Javascript files to display correctly, combining external JS files in WordPress could help you reduce the total number of HTTP requests for Javascript code from nine to only two. External CSS files can also be combined, reducing the number of HTTP requests of a page even further.

Will My WordPress Site Be Faster if I Combine External Javascript Files?

Due to improvements in the Hypertext Transfer Protocol, it is no longer essential to combine Javascript files and CSS files unless your web hosting company does not have support for HTTP/2.

In HTTP/1.0 and HTTP/1.1, each Javascript and CSS file had to be downloaded in sequential order. This meant that one file had to be downloaded completely before the next file could start downloading. The HTTP/2 protocol, which was launched in 2015, resolved this problem by allowing parallel downloads. As all external resources can be downloaded at the same time, there are no longer any benefits to combining files if HTTP/2 is available.

HTTP/2 is currently supported by 95.6% of internet browsers. As of 6 January 2022, HTTP/2 is used by 46.9% of all websites online, though you can see from the graph below that this figure is significantly higher among the most popular websites on the internet.

If your web host has support for HTTP/2, combining files may slow down your website as combined Javascript files are larger than the files they aggregated. This is because it takes longer for a browser to download two large Javascript files than many small Javascript files that are downloaded at the same time.

Two techniques I do recommend using with Javascript are minification and defer parsing.

Minify	Minification involves removing unnecessary characters such as whitespace and comments. This results in the Javascript file being smaller.
Defer Parsing	Javascript code slows down the page rendering process. Two techniques called Defer and Async can be used to address this issue.

Please read my article about deferring Javascript parsing in WordPress for a better understanding of why Javascript slows down the page rendering process.

How to Combine External Javascript in WordPress

If your web hosting company still uses HTTP 1.1, it is still recommended to combine external Javascript files and CSS files in WordPress.

Be sure to run performance tests before and after combining files so you know how page loading times have been affected. You can do this using GTmetrix, Google PageSpeed Insights and the Pingdom Website Speed Test.

Autoptimize

Autoptimize is one of the most effective optimisation plugins available to WordPress users. It supports minification for HTML and file combination and minification for Javascript and CSS. Javascript files can also be deferred instead of aggregated to prevent render-blocking and there are optimisation options for Google Fonts too.

I have used Autoptimize on many WordPress websites as it always improves page loading times.

Asset CleanUp

Asset CleanUp is a highly-configurable optimisation WordPress plugin that supports minification, combination and deferring of Javascript and CSS. It also lets you clean up HTML and provides many tools for managing fonts and reducing their effect on page loading times.

One feature of Asset Cleanup that stands out is the Javascript and CSS manager. This lets you specify exactly which pages Javascript and CSS files are loaded on across your website.

WP Super Minify

WP Super Minify does things a little differently by only giving you the option of compressing Javascript and compressing CSS. When selected, WP Super Minify will combine, minify and cache your files.

If you’re looking for a simple optimisation solution that just works, this may be the plugin for you.

Combining External Javascript Files Using a WordPress Cache Plugin

The best WordPress caching plugins include many additional optimization tools to help you improve website performance. There is therefore a high chance that your existing WordPress caching solution allows you to combine external Javascript and CSS files.

In WP Rocket, for example, there are options to minify and combine Javascript and CSS files. Javascript files can also be deferred to prevent render-blocking.

My recommendation is to test page loading times using file combination using your preferred WordPress caching plugin and then compare the results to standalone Javascript optimization solutions such as Autoptimize and Asset CleanUp.

Final Thoughts

I hope you have enjoyed this look at combining external Javascript files. As you have seen, it is no longer necessary to aggregate Javascript files if your web host supports HTTP/2 as downloading files in parallel is more effective.

If your web host only offers support for HTTP/1.1, you can combine external javascript in WordPress in order to reduce page loading times.

Recommended Read: Remove unused CSS in WordPress

Thanks for reading.

Kevin