Similar to resource minification, combining (concatenating) resources makes the browser’s job easier.

Combining your CSS/JavaScript files into just one CSS/JavaScript file reduces the amount of network requests a browser has to make.

That way, the browser finds and downloads everything it needs to render the page much quicker.

This is especially useful for websites that use HTTP/1. Even if you use HTTP/2, it still makes sense to combine resources.

While HTTP/2 addresses some issues related to resource requesting, browsers continue to have connection limitations. You can still benefit by reducing the total number of files they must look for and download.

Most websites today use the @media rule in media queries. Media queries allow developers to tailor a website to mobile phones, laptops, tablets, etc.

Media queries are also an important part of the Responsive Web Design approach to building websites and web apps.

While awesome, this approach can sometimes create unnecessary CSS files. That’s why NitroPack has an additional option to merge resources for media "screen" and "all."

If this option is disabled, NitroPack treats the @media screen and @media all values as separate. This leads to the creation of two CSS files instead of one. And that’s exactly what we’re trying to avoid by combining resources.

On the other hand, by enabling this option, you make sure that NitroPack treats @media screen and @media all the same. This ensures that only one CSS file is created.

You might’ve noticed that the “Combine JavaScript” option is turned off by default.

Why is that?

Well, combining JS files is notoriously tricky. Several things can go wrong during the process.

For example, with some websites, you can find JS scripts in the code, framework, theme and plugins. These scripts often depend on one another to work.

Let’s say script1 depends on script2, which depends on script 3. In that case, the browser must load and run them in a specific order. The browser must run script3 first, followed by script2 and finally - script1.

Any other order would break something.

After concatenation, scripts can show up all over the new combined JS file. As a result, browsers load and run them in the wrong order. And that’s just one possible problem.

But with NitroPack, you’re highly unlikely to encounter such issues. Through tons of testing and many iterations, we’ve made huge improvements in this area. Currently, our “Combine JS” option is stable and safe to use.

However, being an Advanced Feature, it’s meant to be used by tech-savvy users. Some tweaks to your website’s JS code might be required beforehand.

That’s why we recommend getting an expert familiar with your website’s setup to run thorough tests. That way, you can determine whether changes must be made to your website’s code before combining the JS files.

In short, the “Combine JS” option is turned off by default as a fail-safe. This ensures stability for everyone, regardless of their background or technical expertise.

Finally, even if you encounter some minor issues, don’t worry. You can simply disable the “Combine JS” option and purge your cache to return to your website’s previous state. There’s no risk of damaging your original website files.