GTmetrix Performance Blog

News, updates and guides on GTmetrix and general web performance

Should I combine CSS/JS Files on my Website?

We discuss when you should and shouldn’t combine your website’s CSS/JS files.


 

Overview

Many caching plugins and themes on WordPress (or any other CMS) offer the option to combine your website’s CSS/JS files.

While this was a legitimate recommendation to improve web performance in the past (for sites on HTTP/1.1), it isn’t all that relevant now if your site uses HTTP/2.

In this article, we discuss whether you should combine your website’s CSS/JS files.

 


 

How Does Combination of CSS/JS Files Help?

When enabled, combining your CSS/JS files merges all of your page’s CSS/JS code into a single (or few) CSS/JS file(s).
 

Many plugins offer the option to combine your CSS/JS files.

 
This is a beneficial recommendation for websites on HTTP/1.1 (especially back in the day when it was prominent) as the protocol had a limited number of connections.
 


 

Why Does CSS/JS Combination Make Sense for HTTP/1.1 Pages?

To understand why CSS/JS combination makes sense for HTTP/1.1 pages, let’s talk about how the protocol works.

When the browser needs to fetch your page assets from your origin server, a TCP connection is opened to facilitate network transfer of requests and resources.

External CSS/JS files are considered render-blocking by nature – they block page rendering or block other resource downloads.

While modern browsers are quite smart in how they handle them, they still pose an issue, particularly if you have multiple CSS/JS files as there are more opportunities for render-blocking to occur. WordPress (or any other CMS) can also make this worse, as most plugins will add additional CSS/JS files.

Browsers have a maximum limit for how many concurrent requests can be sent at the same time (e.g., 6 for Google Chrome) so as not to overburden your server.

With HTTP/1.1, the browser can re-use the same TCP connection via Keep Alives to send multiple requests sequentially; however, browsers often open multiple TCP connections in order to send more requests to your server (to retrieve more page assets).

This results in faster downloads of requests for websites on HTTP/1.1, but requires more server resources as too many requests can overload your server.

 

HTTP/1.1 handles requests/responses on a single connection per request. If you have multiple CSS and JS files, you could max out your concurrent connections quite easily and delay subsequent requests or overload your server.

 
There could also be an additional network cost when making these extra connections in the form of latency. Depending on the connection and the overall page load time, this time can be significant.

All this means that reducing the total number of page requests for HTTP/1.1 pages is beneficial in the context of your web performance.

Generally, the fewer requests your page has, the faster it loads.

Combining CSS/JS files reduces the number of page requests, in turn reducing the number of round trips made to your server so that other resources can be retrieved faster.

With HTTP/2, this is less of an issue as the protocol allows multiplexing, which allows requests and responses to be processed in parallel.
 

HTTP/2 uses multiplexing, which allows multiple requests to be served on a single connection, improving download speeds and reducing the burden on your server.

 
This eliminates the need for concurrent connections so there is no need to combine your CSS/JS files.

 


 

Why is Combining CSS/JS Files Potentially Bad?

Combining CSS/JS files may reduce the round trip time required for such requests, but there are other potential drawbacks associated with file combination. We list the most common ones below:
 


 

1) The Combined File May Potentially be Very Large in File Size

Most webpages typically have several CSS and JS files. Combining all the stylesheets or scripts into a singular respective file may result in a very large CSS/JS file.

Even if the combined file is compressed for faster network transfer, the browser has to download, parse, and execute the file before rendering your page – each individual step can be slow on its own, and combined they could be significantly slowing down your page.

It’s also possible that your browser may be parsing and executing code that isn’t needed on the page.

We’ve often seen pages with combined CSS/JS files that are well in excess of 2 MB in uncompressed size. This represents a huge task for the browser to deal with, especially on lower-powered hardware such as mid-tier mobile devices.
 

The larger the uncompressed size of the CSS/JS file, the more work your browser needs to do to process it.

 
Serving excessively large CSS/JS files can potentially extend your page’s Total Blocking Time (TBT) and Time To Interactive (TTI) metrics, resulting in a sluggish page experience for your visitors.
 


 

2) Your Page’s Perceived Performance May Suffer

Websites that load progressively are generally perceived to be faster than websites that are initially blank for a period and then load everything at once.

This is because progressively loading websites provide visual feedback to your users that your page is doing something. Visitors can also start consuming content early on when pages load progressively.
 

Progessive vs Non-Progressive Loading

Progressively loading websites are perceived to be faster than websites where you see nothing at first, then everything at once.

 
As mentioned previously, CSS/JS is considered render-blocking – unless specified, the browser would download, parse, and execute this file first before executing the rest of your page code.

A combined CSS/JS file would need to be dealt with first before the browser can render anything, which could prevent any early rendering of page components.

If the CSS/JS files were separate (i.e., not combined), the browser may have a chance to deal with them individually and start rendering as soon as it’s done with them instead of a single long blocking event.

This way, your visitors may also be able to start seeing content on your page early, reassuring them that your page is doing something.

Lighthouse measures visual loading with the following metrics:

When you combine your CSS/JS files, all of these metrics can potentially get extended.
 


 

3) CSS/JS Combination Can Potentially Break Your Site

Your CSS/JS files are fine when separate but they may not play nice when combined into a single file.

Even if things appear fine visually, some under-the-hood functionality may have broken, which you may not discover until much later.

For example – buttons not working on a page, or page elements disappearing, or a slider not functioning as designed, etc.
 

Many plugins (like WP Rocket) warn you about CSS/JS combination due to their potential to break your site.

 
No matter which plugin you use to combine your CSS/JS files, our recommendation is to always test your site extensively to ensure site functionality isn’t broken.

If you find that combining certain CSS/JS files is breaking site functionality, you’ll need to exclude the relevant files from combination.

 


 

Should I Combine the CSS/JS files On My Website?

As mentioned earlier, it depends – mostly on whether you use HTTP/1.1 or HTTP/2 for your website.
 


 

When Not to Combine CSS/JS Files

We recommend not combining your CSS/JS files if the following cases apply to you:

  • Your website uses HTTP/2
  • You have a complex/large website (i.e., it uses a lot of scripts and/or stylesheets)

With HTTP/2, there is generally no need to combine CSS/JS files as the multiplexing feature eliminates the need for concurrent connections (unlike HTTP/1.1).
 

Don’t combine your CSS/JS files when you’re on HTTP/2 or if your page has many scripts and stylesheets.

 
If you have a large or complex website, you might be better off splitting your CSS and JS into several smaller files as modern browsers are better at managing multiple files at the same time (instead of a single large file).

 


 

When to Combine CSS/JS Files

It’s recommended to combine your CSS/JS files only in the following cases:

  • Your website uses HTTP/1.1
  • You have a simple website with not too many scripts

This is because HTTP/1.1 does have limits on how many concurrent requests can be processed, so combining your CSS/JS files can yield performance benefits.

It’s also worth noting that you can combine your CSS/JS files if you have a relatively simple site with few stylesheets or scripts.
 

Combine your CSS/JS files if you’re on HTTP/1.1 or you have a relatively simple page with few scripts and stylesheets.

 
If your website is complex with many stylesheets and scripts, the drawbacks mentioned above may outweigh any potential performance benefits you may get from combining your files.
 


 

Always Test Your Page

In the end, exercise your best judgement and don’t just enable combination of CSS/JS files blindly.

Check if your site uses HTTP/2 – if it doesn’t, consider switching to HTTP/2 as the protocol offers more efficient handling of pages.

No matter what sort of website setup you have, you should test your pages with and without combination of CSS/JS files to see if it actually improves performance.

For CSS/JS combination – if in doubt, leave it out.

It may be the case that combining CSS/JS actually slows down your website or even worse, breaks it.

 


 

Summary

CSS/JS combination was a performance recommendation that made sense back in the days of HTTP/1.1 but it’s not that relevant anymore with the advent of HTTP/2.

Modern browsers also prioritize early rendering of the page and CSS/JS combination can potentially have more drawbacks than benefits, including breaking your site in many cases.

Test your page with and without combination of CSS/JS files, and only do it if your page is on HTTP/1.1 and has tangible performance benefits.

 


 

Test with different countries, speeds and options

Basic GTmetrix Splash

Get access to more Test Locations, Analysis Options and Connection Speeds!

Sign up for a Basic GTmetrix account and see how your site performs in more scenarios – It’s FREE!


Get Started for FREE

Get Mobile Testing, Premium Locations, and more

Basic GTmetrix Splash

Get more On-Demand Tests, Monitored Slots and Premium Test Locations along with Hourly testing with a GTmetrix PRO plan.

Upgrade to GTmetrix PRO and see how your site performs in all scenarios.


Upgrade now