Is it worth to extract CSS from Webpack2 bundles in an HTTP2 environment?

Question

Is it worth to extract CSS when I want to build the app using HTTP2 and import(), or it's better if I leave in JS? What is the performance like and are there any limits when appending style nodes into the DOM instead?

Answer 1

That of course will depend on the specificities of the project.

But generally speaking, in my opinion it is worth to extract CSS - even with HTTP 1.1. By combining css files into scripts you deprive yourself of the possibility of caching css. Also, you may suffer from Flash Of Unstyled Content (FOUC). Note that even though HTTP/2 introduces multiplexing requests so that there is no need anymore to reduce the number of requests by combining assets into a single one, still the fastest request is the one not made. By splitting css and javascript files you can make use of browser caching for css files that may change less frequently than scripts.

When the new code gets released a user would not have to download all bundles again if not changed. Because of that, it would be actually useful to bundle your css files into multiple pieces (that is where HTTP2 may be applicable). In typical scenario you would have: vendor styles - libraries that don’t change, core styles - base css that rarely change, components’ css - css modules for specific components.

It is hard to assess general performance of HTTP/2 in the current stage. The technology adoption is still in its infancy, there are no clear best practices to follow that guarantee a success. After some HTTP/2 adoption stories and tests [1], [2], one could conclude that the reality is a bit more complicated that the theoretical divagations. As the above results show, for instance delivering many small assets with HTTP/2 may introduce some additional overhead in terms of compression.

To sum up, one should always try to test and measure the performance hypothesis when trying to adopt HTTP/2 in an applicable scenario since it may not introduce a desired performance gain.

Also take a look at the great slides from Ilya Grigorik. Considering only unbundling css in HTTP/2 is not the case. You should also take a look at server pushes and prioritization in terms of delivering critical assets for the fastest render possible.