A typical speed recommendation is to consolidate (or concatenate) multiple JavaScript or CSS files into a single file. Does this still make sense?
The idea is that consolidating multiple files into a single file reduces how many requests need to be made when the browser/robot is loading a webpage. If you have a lot of small files that have to be loaded, those requests add up and can slow down the website’s load time.
The catch, however, is that HTTP/2 and HTTP/3 introduced multiplexing. This fixed the “head of line blocking” problem in HTTP/1. In simple terms, a large file in the front of the line blocked other files from loading. It made sense to keep your line as short as possible by sending as few JS or CSS files as possible to load the webpage.
Multiplexing fixes this by allowing multiple files to be requested simultaneously from the server by the browser. As a result, multiple JS and CSS files can load more quickly. In some cases, multiple files can load more quickly than a consolidated file!
So, does that mean you shouldn’t consolidate multiple files? The answer isn’t that easy. After all, speed recommendations are nuanced and there is never a simple, one-size-fits-all answer.
To take a specific example, let’s say you have two larger JavaScript files used everywhere on your website. These two JS files do not change frequently (following the initial development work). In this case, consolidating these two files into a single file means the browser would only need to make one request and cache one file. This could reduce the website’s total load time.
However, if one of the two files is not used everywhere on the website, then consolidation will worsen speed. The browser would have to download a large file on every page but that file would contain a lot of unused JavaScript code. That adds overheard and will slow the website.
Also, if one of those two files changes often, then you would also have to change the combined file often. The browser wouldn’t be able to cache this file and instead would have to re-download the entire consolidated file each time the website is loaded. Instead, you could send two separate files, allowing the unchanged file to be cached, and that would likely result in faster load times.
Ultimately, you need to carefully consider each JavaScript and CSS file on your website and test out the impact of consolidation. Consolidate where it makes sense, especially if you have an excessive number of file requests or files that do not change that often. I have seen consolidation go a long way to help improve website speed. However, remember that consolidation may worsen performance in certain situations.
| Pros: Consolidate Files | Cons: Do Not Consolidate Files |
| Caching Optimization: If two or more JS or CSS files are used frequently and are not updated often, consolidating them can help optimize caching, as the browser would only need to request and cache one file. | Inefficient Cache Utilization: If one part of the consolidated JS or CSS file changes, the whole file needs to be redownloaded and the cache is invalidated. This can lead to increased bandwidth usage and slower load times. |
| Reduced HTTP Overhead: consolidating JS or CSS files reduces the total amount of HTTP requests, saving some bandwidth. If you have many small files, these requests can add up. However, this benefit is generally minor compared to the advantages of multiplexing. | Hinders Multiplexing: HTTP/2 and HTTP/3 can handle multiple JS or CSS files simultaneously, leading to better performance. Consolidating files can hinder this feature because the browser is essentially blocked from getting other files it might need. |
| Easier Management: Depending on your build process and the structure of your project, having fewer, larger JS or CSS files might be easier to manage than many smaller files. | Wasted Data: Users might end up downloading parts of the consolidated JS or CSS file that are not used on certain pages, leading to unnecessary data usage. Even with consolidation, it is important to remove unused code form JS and CSS files. |