クリティカルなんとかの関係やウェブ・フォントにおいて、CSSの遅延読み込みを行う気運は高まっている。様々なアイディアがあって、普通にCSSの内容を読み込んでhead要素に追加するものや、link要素を動的に追加するもの、予めlink要素をrel=stylesheetなしで書いておいて後で追加するものなどがその主なものだ。最後の手法ではrel=subresourceを追加して書いておくと、一部ブラウザーでダウンロードが速く始まるんじゃないかというアイディアを持った。
サポートが広いのでprefetchかなと思ったけど、書いたそのページ内で使うリソースの先読みに使うものではないような印象で、すぐさま使う場合はsubresourceの方が適切なようだ。Chromeがそういうイメージで実装してるという話で、ウェブ標準では特に細かく規定はないようではある。
<html>
<head>
<style>
/* Critical Styles */
</style>
<link class="async-css" href="main.css" rel="subresource">
</head>
<body>
...
<script>
var css = document.querySelectorAll('.async-css');
for (var i = 0, l = css.length; i < l; i++) {
css[i].rel = 'stylesheet';
}
</script>
</body>
</html>特に難しいことはない。rel=subresourceで即キャッシュに持ってきてくれるはずなので、ドキュメントのパース(レンダリングではない)と平行してダウンロードされることが期待できる。つまりbody要素の最後やDOMContentLoadedイベントでCSSを追加する場合よりも速くにダウンロードが開始されるのではないだろうか。
rel=stylesheetに入れ替える時点でダウンロードが終わってない時にどうなるかは謎(下手をするとリクエストがやり直されたりしそう)なので、実際に使う時はちゃんと検証する必要がある。
遅延読み込みそのものは、その後襲うリペイントやリフローに比べればさほどコストの高いものでもないのでどうやっても良さそうだが、保守性が高そうなのはlink要素を予め書いておく方法だと思う。その上で更に早期に読み込みを開始させるためにrel=subresourceを併用するのは悪くなさそうだ。