Minimize and merge JS / CSS files and use image sprites that still provide performance benefits when using HTTP / 2?

Question

With the new HTTP / 2 protocol, the overhead created by repeated HTTP requests to the same server is significantly reduced.

With that in mind, are there any significant performance benefits for minimizing and concatenating JavaScript / CSS files and combining images into sprites? Or are these methods no longer useful when using HTTP / 2?

Answer 1

They are still useful. HTTP / 2 reduces the impact of some of these methods, but does not eliminate their effects .

Minimization remains as useful as ever . Although HTTP / 2 introduces a new compression for message headers, it has nothing to do with minimization (as for message bodies). The compression algorithms for message bodies are the same, so minimization saves as much as before.

Concatenation and sprites will have less impact than before, but they will still have some effect . The biggest problem with uploading multiple files instead of a single file with HTTP / 1 is not really a problem on the HTTP side, in and of itself: bandwidth-based overheads require a separate request for each file, but this is overshadowed by the overhead of session termination TCP / IP, when you are done with one file, then run a new one for the next and repeat this for each file you want to download.

The biggest emphasis in HTTP / 2 is the elimination of time overhead: HTTP / 1.1 tried to do this using pipelining, but it didn’t catch it in the browser (Presto is the only engine that got it completely right, and Presto is dead). HTTP / 2 is another attempt that improves HTTP / 1.1 methods, and also makes this thing non-optional, and it will be more successful. It also eliminates some of the bandwidth-based overhead when creating multiple requests by compressing headers, but it cannot completely eliminate this overhead, and when loading multiple files, these requests still need to be done (as part of a single TCP / IP session, so the overhead costs less, but not zero). Thus, although the impact of concatenation and writing is proportionally less, there is still some influence, especially if you use a lot of files.

Another thing to consider when it comes to concatenation and writing is compression. Concatenated files of similar types tend to compress better than single files , because the compression algorithm can use the similarity between concatenated pieces of data. A similar principle applies to sprites : placing similar images in different areas of the same file usually leads to a reduction in the file, since image compression can use similarities in different regions.

Answer 2

It may be a little late, but I want to point out a few alternative points that should also be covered.

Firstly, some kind of javascript is usually used to minimize JavaScript, which has advantages beyond the bandwidth - it does not allow people to easily analyze the code, which does not allow ordinary users to use verbose methods and ideas for malicious actions - even well-built sites may have problems with this. Of course, this does not replace security, and advanced users can always decrypt in-depth code.

Another is that not all browsers or connections will use HTTP / 2, at least not right away, so if the performance of some HTTP / 2 functions is barely noticeable on HTTP / 2 clients, why not take advantage of those still over HTTP /1.1?

Finally, at the end of the day, the best way to determine how something affects the speed of your server is to compare it.

Answer 3

So far, all the answers have tacitly assumed that you would want to download ALL .CSS and .JS files for each page. The advantage of using http / 2 and storing separate .CSS and .JS files is that you can only hit the ones you need, and downloading is not always faster than efficient downloading.

Answer 4

Yes, it is still useful.

Along with gzip compression, the page will be smaller.

Imagine that you are using a very slow GPRS network (56 Kbps, 500 ms).

You have 50 tiny images, 30 javascripts and 20 css files.

This means that with two parallel connections, you should wait more than 100 * 500 ms only for requests.

Now each image is about 3-4kb. What can take several milliseconds (5-8?).

CSS and Javascript files now range from 20 KB to 600 KB.

This will kill your site with huge transfer times.

Reducing the time it takes to transfer files will increase the speed at which the website loads.

So, YES , this is still useful!

Answer 5

Minifying JS can still reduce the size of many characters; inflatedJargonSymbolizerTokenManager will become _a . One example I found showed that JQuery GZipped is still twice the size of JQuery.min GZipped.

I also want to note that, although you did not mean otherwise, the dystroy comment is correct, and actually contradicts the poorly written Wikipedia explanation; Concatenating JavaScript files can now be less useful. Their minimization still has its advantages. I just wanted to mention this if you accidentally got any information there. In fact, I would edit the page myself if I hadn’t been worried about getting into the battle for editing.

CSS probably has fewer chances to reduce characters. Theoretically, all he gets is the removal of spaces and comments.