はてなブックマーク

https://jakearchibald.com/2016/link-in-body/ の「The future of loading CSS」についての簡単なメモ（抄訳ではない）。詳細はリンクを参照していただきたい。おすすめです。 CSSは普通headで最初の方に読み込ませるんだけど、Critical Rendering Path を最適化することを考えると、最初に表示される箇所など必要最小限のCSSだけをhead内で読み込んで、あとは遅延読み込みしたりしてレンダリングをブロックさせないようにした方がいい（そして量が少なければinline CSSにする）。でもscriptタグのasync属性のようにCSSを非同期的に読み込む手段がないから、Javascript使ってloadイベント後などに読み込ませるみたいな手間がかかる。そのうえ、閲覧する端末によって最初に表示される領域は違うので、ど

と記述すると、PreloadでCSSを取得して、読み込みが終わったらstylesheetを適用させるみたいな感じになる。Preloadはレンダリングをブロックしないので、非同期にCSSを読み込みつつ、読み込み終わったら適用させるみたいなことができる。シンプルでいい。 これは Preload: What Is It Good For? の MARKUP-BASED ASYNC LOADERの箇所に書いてある話で、現在はChrome Canaryのみで対応されていて、問題なければ4月中頃にChromeで使えるようになるらしい。 Preloadについては、仕様には下記のように書いてある。 The preload keyword on link elements provides a declarative fetch primitive that addresses the above use