先日HTML5minutesという勉強会でクリティカルCSSについてLTをしてきたのだが、
あまり日本では馴染みの無い単語なのでここで説明しておこう。
クリティカルCSSとは
某RPGの大打撃を与える印象のクリティカルヒットとかそうゆうのではなくて、
CSSにおけるブラウザ表示パフォーマンスのTipsである。
クリティカルというのはクリティカルパスのことで、クリティカルパスCSSなどとも呼ばれる。
クリティカルパスとは、プロジェクトの各工程を、プロジェクト開始から終了まで「前の工程が終わらないと次の工程が始まらない」という依存関係に従って結んでいったときに、所要時間が最長となるような経路のこと。クリティカルパスに含まれる工程に遅延が発生すると、その分だけプロジェクト全体のスケジュールも遅延するため、クリティカルパスに含まれる工程は特に遅れてはならない重要な工程として重視されることになる
クリティカルパスとは – IT用語辞典
クリティカルパスCSSでは語呂が悪いのでクリティカルCSSと呼ぶことにする。
クリティカル レンダリング パス — Web Fundamentals
元ネタはGoogle PageSpeed Insightsのパフォーマンス改善の項目にある。
「スクロールせずに見える範囲のコンテンツのサイズを削減する」
リクエストされたデータの量が初期の輻輳ウィンドウを超える場合、サーバーとユーザーのブラウザ間で追加の往復が必要になります。モバイル ネットワークのような遅延の多いネットワークの場合、これによってページの読み込みが大幅に遅れる可能性があります。
これに関しては、元々Googleなど大手のサイトでは実装されていた。
しかし一般的なサイトでは専用のツールが無ければ導入のハードルが高く、実装・運用におけるコストが問題だった。
そんな中、昨今のタスクランナーの普及により、手軽に実装することが可能になってきたため、現在海外を中心に脚光を浴びている。
実装方法はCSSconf EU 2014においてGoogleのAddy Osmaniの講演内で大々的に紹介された。
- HTMLからスタイルシートを抽出
ツールが抽出するか、あらかじめ *.cssファイルを事前に指定するか。どちらでもよい。 - ファーストビューのCSSを生成
ターゲットとするviewportを決める。モバイルとデスクトップのバランスから最適解を一つに絞るか、サーバ側で判別して対応するか。
14KB以下におさめる。※ - クリティカルパスのCSSをにインライン化
- 残りのスタイルは非同期で読込む
※TCPスロースタートにより1回目のレスポンスで送信できるサイズは14KB。
クリティカルCSSを導入して変わること
一番の効果はレンダリングブロックを回避して、いわゆるファーストビューの領域の表示を速くすることで、ページ表示の体感速度が速くなる。
ファーストビュー表示時にはページの読み込みは全ては終わっておらず、ファーストビュー以外の部分は非同期で読み込む。
ページ全体の読み込みスピードに関してはほとんど変わらないと思っていい。
この手法の着眼点はあくまでも重要な部分（ここ言うところのファーストビュー）を一速く表示する為の解決策なのである。
クリティカルCSS実装のツール
ツールに関してはタスクランナー一択だと思う。
npm Packages
grunt
gulp
gulp用のパッケージはないので、上記のcriticalを使用する。
クリティカルCSSの注意点
スライドに書いてあるが、とにかくツールに頼らなければ管理が煩雑になりやすいことが挙げられる。
ツールがなければ導入すら現実的ではない。それも踏まえて導入を検討すべきだ。
更新・運用に関して言えば、修正の度にプラスアルファのフローが増える。
またあまりにもページボリュームが少ない小規模のWebサイトではあまり効果は無いだろう。
その効果を求められないのであれば無理に導入することはない。