Trevor Davis on how we’ll link up CSS when we go all-in on HTTP/2:
This is the opposite of what we have done as best practice for years now. But in order to take advantage of multiplexing, it’s best to break up your CSS into smaller files so that only the necessary CSS is loaded on each page. An example page markup would look something like this:
<link href="stylesheets/modules/text-block/index.css" rel="stylesheet">
<div class="text-block">
...
</div>
<link href="stylesheets/modules/two-column-block/index.css" rel="stylesheet">
<div class="two-column-block">
...
</div>This idea shares some DNA with Critical CSS. Loading CSS with <link> is blocking, so load as little of it as you can right away and load the rest of it as you need it. There is no penalty for loading the stylesheets individually because of HTTP/2 multiplexing, and loading them right before the HTML that uses them actually takes advantage of the blocking by not allowing the rendering of the HTML before the CSS for it is gotten. Plus you’ll be able to break cache on these smaller bits of CSS as needed, just bear in mind it might not compress as well.
The thing is… for any browser that doesn’t support HTTP/2 (e.g. IE 10, Opera mobile/mini, UC browser), while this technique will still work, it will be pretty bad for performance. This will be an easier call to make on projects that don’t need to support those browsers for whatever reason.
