最初の画面に素早くスタイルを適用する
クリティカルCSSは、特定のページの最初のビューポートにスタイルを適用するために必要なルールの集まりです。これらを早く配信すると、スタイルシートの残りを読み込んでいる間に、最初の画面をレンダリングできます。
インライン化にはコストがあります。ルールの分だけHTMLが大きくなり、別にダウンロードされるスタイルシートと内容が重複することもあります。有用なのは、実際のレンダリングの遅れをなくせる場合です。スタイルのルールをすべてドキュメントの中に移せばよい、ということではありません。
ビューポートに必要なルールを見つける
代表的なデスクトップとモバイルの幅で、最初の画面を確認します。ヘッダー、ナビゲーション、メインの見出し、画像、コントロールを特定し、それぞれに必要なレイアウト、タイポグラフィ、コンポーネントのルールを調べます。
商品ページとカテゴリの一覧ページでは、必要なルールが異なる場合があります。非表示のメニュー、レスポンシブのブレークポイント、フォントのフォールバックには、デスクトップのスクリーンショットでは見落とす依存関係が潜んでいることがあります。
抽出したスタイルをテストする
ページの残りの部分のために、完全なスタイルシートは引き続き使える状態にしておきます。テスト用ブラウザーで、読み込みをあえて遅らせ、最初の画面にスタイルのない要素、欠けたレイアウトルール、読めないコントロールがないかを確認します。JavaScriptによる読み込みの仕組みが失敗した場合のフォールバックも確認します。
初回の訪問と再訪問を比較します。初回の訪問での改善が、CSSの重複やキャッシュの利点の喪失で相殺されることがあります。リクエストのウォーターフォールとレンダリングのトレースで、変更が元の遅れをなくしているかを確かめます。
デザインの変更に合わせて保つ
フォント、コンポーネント、ブレークポイントを変更した後は、抽出し直して確認します。古くなったクリティカルCSSは、誤ったスタイルが一瞬表示されたり、完全なスタイルシートが届いたときにレイアウトがずれたりする原因になります。
抽出が正しいと言えるような、共通のバイト数の目安はありません。有用な結果は、最初の画面が素早く安定してレンダリングされ、残りのスタイルも確実に読み込まれることです。