Web technologies move at an astounding pace. But we often can’t wait for that to happen and solve our problems for us. So we develop workarounds to compensate for existing deficiencies. These workarounds are spread online and become canon. Then technology evolves, and we no longer need these workarounds. Combining your CSS and JSS files was one example.
Unfortunately, the advice persists. Old articles aren’t updated. Many of the original writers have moved on, or even forgotten that they wrote about it. Often, people simply aren’t up to date on what’s happening and continue to follow outdated advice. Many times, people simply regurgitate what they see online without checking the date or bothering to verify if stuff is still valid.
And so it goes on and on. Sometimes, old advice is not only useless but actively harmful. And if you’re still adhering to the practice of combining your JS and CSS files, you are actively harming your site speed. In this article, I’ll give you the updated advice in response to new technologies.
The Previous Need to Combine Static Files Like CSS and JS
In the old days of HTTP, there was a limit to the number of simultaneous connections a browser could open to the server via TCP. So if your website needed to serve 20 static resources to a browser, it could at most offer only 8 or so simultaneous downloads via separate TCP connections.
This means that each file had a separate “line” to the browser. And if those lines got filled up, we had to wait for some of the downloads to end before starting new connections. This led to unnecessary serialization of requests, and slowed down page loads.
Hence Sub-Domain Hosting
Website owners tried all kinds of interesting ways to sidestep these limits. One of these was hosting your files on a subdomain instead of the main domain, since browsers wouldn’t count connections to the sub-domain as belonging to the main site’s “quota”.
Unfortunately, this leads to more complexity, more management, and doesn’t solve the problem if you still had too many static files.
The Result? Combining CSS and JS Files
This is why someone got the bright idea to combine their static files. So instead of 10 CSS files, you had just one. And while we were at it, we could minify them as well. Problem solved!
But Combining JS Files Isn’t Smart
HTTP/2 Means No More Limits
Technology has moved on. Now, all browsers support HTTP/2 which allows us virtually unlimited simultaneous connections over a single TCP connection via multiplexing. Here’s an example of HTTP/2 in action on my website:
As you can see, it’s all downloading at the same time. Combining your JS and CSS files is no longer necessary!
Combining your Files is Bad for your CDN
Another drawback of combining files is that each time you make a change to JS or CSS, your entire combined file changes. This means you have to remember to invalidate the CDN cache, and wait for your changes to propagate to all POPs.
Without this, only the specific file in question will change, and the others can be downloaded as usual at high speeds. So the impact of making changes is reduced if you don’t combine your files.
In summary, the advice to combine your CSS and JS files is outdated. It’s no longer necessary and can actually harm your site by slowing things down and making your CDN more inefficient. Remember to always question the advice behind “well-known” practices and see if technology has moved on. If it has, then the chances are you don’t need to follow it anymore!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!