Login
Sign Up
What Is Code Minification and Concatenation & How Does It Affect Website Performance?
Benefits and Problems of Minifying and Combining HTML, CSS and JavaScript Files
What Is Code Minification and Concatenation & How Does It Affect Website Performance?

What Is Code Minification and Concatenation & How Does It Affect Website Performance?

Optimizing your website's code sounds scary.

And honestly - it's not the easiest thing in the world.

Developers spend years learning how website optimization works.

It requires technical skills and knowledge of modern best practices. 

While the process might be complex, the concepts behind it aren't. 

In fact, most of them are completely logical and intuitive. Including minification (reducing file size) and concatenation (combining files). 
Let's see why.

 

What is HTML, CSS and JavaScript Minification? 

 

–úinification is the process of removing unnecessary elements from your code to reduce its size.

By reducing the size of HTML, CSS, or JavaScript files, you reduce the time needed for them to be transferred. Logically, your website loads faster.

Minimized CSS code example

Now, why would you ever need to do this? 

Because developers often leave comments, whitespace, line-breaks and other unnecessary elements in their code. These elements help them write and review code, but they don't help browsers. In fact, they slow them down.

Imagine an eCommerce website with thousands of pages. If the code for each page isn't minified, the browser has more work to do each time it loads a different page.

The same can happen for any WordPress website. Some themes and plugins are filled with unnecessary data. 

So, if you don't want your browser wasting time on comments and line breaks, minification is the way to go.

 

How Minification Improves Page Speed

A smaller code file equals a faster load time. It's that simple.

And no - minification doesn't affect the functionality of your website. 

Since you're only removing the unnecessary part of the code, nothing changes except the file size. Web servers and browsers can read minified code just fine.

So, by making files smaller, they move around faster. Huge shock.

This principle applies to all websites. Tiny blogs and massive eCommerce stores can both benefit from minification. 

Let's move on to concatenation.

 

What is CSS and JavaScript Concatenation? 

 

Concatenation means joining or combining two things together. 

Concatenation example

In programming, concatenation is the operation of joining two strings together, i.e., joining a bunch of different files into fewer or just one file. Most often, those are CSS or JavaScript files.

Concatenation reduces the number of files that the browser must download.

Since the browser has less requests to make, the whole page loads faster.

 

How Concatenation Improves Page Speed

Concatenation reduces the number of HTTP requests a browser has to make. 

The fewer the requests, the faster the browser gets the needed files. 

Again, this is a simple and logical idea. 

After all, you wouldn't go to the store five times to buy milk, sugar, flour, eggs and yeast. You'd go once. Even if all the products combined weight more.

And if it were all so simple, you wouldn't be reading this right now. 

Unfortunately, it's not.

 

The Problems With (JavaScript) Concatenation

In a perfect world, there would be no issues with anything I just described.

Developers would write code, minify and concatenate it, test it and deploy it. No bugs, just a lightning-fast website or app.

In the real world, things don't work this way.

Developers write code with line breaks, comments and whitespace because it's much more convenient. Businesses rush to get to market sometimes at the expense of testing. WordPress websites come pre-packed with layers of code that might or might not be optimized.

Tons of things can (and do) go wrong all the time.

In this messy environment, concatenation can cause some problems.

 

Combining JavaScript files can be especially tricky.

If you've ever used a concatenation tool, you know this is true. Usually, when you click "Optimize JavaScript" (or a similar button), you end up with a broken page. Unfortunately, this happens with a ton of tools.

On top of that, the arrival HTTP/2 added even more confusion to this topic.

I don't want to get too technical here, so the TL;DR is this: 

HTTP/2 improves page speed for a lot of websites without any optimization. It does that mainly via its server push, request multiplexing and header compression capabilities. 

Because of that, many people think that concatenation is no longer a best practice

At NitroPack, we don't believe that's the case. By combining files, you still reduce the total number of resources. And as this article from Google's Web Fundamentals page says, "The fastest and best-optimized resource is a resource not sent."

On top of that, browsers still have connection limitations.

Again, I won't go into technical details here. If you want to get more info on this subject, check out this article on the differences between HTTP/1 and HTTP/2.

 

HTTP 1.1 connections schema

HTTP/2 connections schema

 

The point I'm making is this - there's a ton of confusion caused by HTTP/2 when it comes to concatenation. The information is all over the place. That's why it's hard to determine what's best for your website.

Of course, not everyone relies on HTTP/2. As of May 2020, 45.2% of websites use HTTP2

For the rest, concatenation is still a no-brainer. Even if it can cause a few initial bugs.

Let's see how you can take advantage of it.

 

How You Can Minify and Combine Your Website's Resources

 

If all of this sounds sketchy, trust your instincts. 

This is a complex technical topic that got ever more complicated with the arrival of HTTP2. I wouldn't advise you to go about it without a developer.
Most experienced web developers can do everything I just described by hand. But it would be time consuming and expensive.

Now, you can absolutely use a free tool to minify and combine your resources. It might work fine, or it might break something on your website. If you're feeling lucky, go ahead.
 
Or you can simply use a service that handles this (and all the other aspects of speed optimization) for you.

NitroPack has all the features you need for a fast website. Including minification and concatenation. 

Most importantly - it offers technical support when you need it. 

Check out NitroPack by signing up for our free plan.

Stay tuned

Subscribe to our newsletter and stay updated!