Combine External JavaScript and CSS
In many cases, websites contain multiple JavaScript and CSS files which must all be fetched from the server in order to fully load the web page. This process of downloading each file separately however, takes more time as additional requests must be made which consequently increases latency. This article will focus on how to combine external JavaScript and CSS.
Why combine external JavaScript and CSS files?
Combining your external JavaScript and CSS files is beneficial for a few reasons. First off, the number of requests can be drastically reduced given your website uses multiple CSS and JS files to render the page. If for example, your page loads 5 external CSS files and 5 external JS files, combining your JavaScript and CSS into a single separate file each would result in 8 less requests.
Additionally, all CSS files are render blocking which means that the more CSS files are loaded, the more likely this will interrupt your page's critical path. Having multiple JavaScript files can also be troublesome to the parsing of your HTML document given they are not deferred properly. Read our article to learn more about how to defer parsing of JavaScript.
How to combine external JavaScript and CSS Files?
The method used for combining external JavaScript and CSS is basically the same for both file types. However there are a couple of things to consider for each, which is explained in the section below.
Combine external JavaScript
When combining JavaScript, it is recommended to combine your existing files into 2 main files. One file should contain the JavaScript needed in order to render the page, while the other file should contain all other JS which in turn should be deferred. This will allow you to load the web page much more quickly as the browser does not have to download and execute non-critical JS while it is trying to load above-the-fold content.
As for how to combine the JS files, this can simply be done by copy / pasting the code from one file into another. For example, once the code from FileA has been copied to FileB, FileA can be removed along with the call for this file within the HTML document.
Combine external CSS
To combine external CSS files, you can simply copy / paste all of your CSS code into one main file. Therefore all of the content from within the other CSS files will now reside within the main file allowing the browser to only make one request for a CSS file instead of multiple. Similar to JavaScript, once the code from external files has been moved to the main CSS file, the calls for the old CSS files should be removed from the HTML document.
Additionally, avoid using @import to import all of your external CSS files into one main file. This method can introduce additional delays since it is unable to download multiple style sheets in parallel. Instead use the method described above which physically combines the CSS from one file into another, instead of just importing multiple files into one.
HTTP/2 and combining external files
Combining your JavaScript and CSS files is a useful method to reduce HTTP requests as well as latency if you are delivering them via the HTTP/1.x protocol. However, with the creation and vast adoption of HTTP/2, implementing this recommendation can actually harm the deliverability of your assets. Since HTTP/2 can handle parallelized downloads, it is not restricted in terms of HTTP requests such as HTTP/1.x was.
If you end up combining all JS and CSS files into one file each and a request is made for a component within that file, it only has one option - to request the single large file. However, if the files aren't concatenated and a request is made for a component in a single file, the download time will be much shorter as the file is not part of a large "master" file.
With HTTP/2, it is important to focus more heavily on the caching of files via a CDN, leveraging browser caching, etc. Concatenating JS and CSS files is no longer best practice with this new protocol.
Other JavaScript and CSS optimization tips
Combining external JavaScript and CSS is one recommendation for helping to improve overall page performance by optimizing these two file types if you are still using HTTP/1.x. For additional suggestions regarding improving the performance of your JavaScript and CSS read our other how-to articles below.