クリティカルCSS抽出ツール
クリティカルCSS抽出ツール：ファーストビューのスタイルをインライン化 | We.Inc
HTMLとCSSを貼り付けて画面サイズを選ぶと、スクロール前に表示される部分をスタイルするルールだけを残します。インラインのstyleブロックとpreloadパターンをコピーできます。
クリティカルCSS抽出ツール
クリティカルCSSとは、訪問者がスクロールする前に見る部分を描画するのに必要な、少数のルールのことです。ページのHTMLとスタイルシートをここに貼り付けて画面サイズを選ぶと、このツールが固定サイズのフレームでページをレイアウトし、表示される要素に一致するルールを残して、インラインのstyleブロックと遅延読み込み用のスタイルシートリンクを出力します。
抽出ツールが残すもの
- スタイルルール
- セレクターが、上端が指定した高さ内にある要素に一致する
- その要素は最初の表示で描画される
- html, body, :root, *
- 常に残す
- 基本のフォント、色、カスタムプロパティは表示されるすべてに影響する
- @mediaブロック
- 一致する内部ルールだけを残す
- 他の画面サイズでも正しく初回描画される
- @font-face
- 常に残す（オフにできます）
- 表示されるテキストにはフォントの宣言が必要
- @keyframes
- 残したルールがその名前を使っている
- 表示される要素のアニメーションが引き続き動く
ブラウザーは、headにあるすべてのスタイルシートを待ってから描画を始めます。最初の画面に必要な少数のルールをインライン化し、完全なファイルはブロックせずに読み込めば、ページがより早く表示されます。このツールは、貼り付けたコードからその選択を自動で行います。ブラウザー内で動作し、URLを取得することはないため、リンクではなくページの最終的なHTMLとCSSを貼り付けてください。
- ページのHTML（bodyの中身だけで十分です）と、スタイルシートのCSSを貼り付けます。
- 画面サイズのプリセットを選ぶか、幅とファーストビューの高さをピクセルで入力します。
- ツールはスクリプトを無効にしたサンドボックスのフレームで、そのサイズでHTMLを描画し、各セレクターを画面上の要素と照合します。
- head用のインラインstyleブロックと、後から完全なスタイルシートを読み込むpreloadリンクをコピーします。統計情報には、残したルールの数と結果のサイズが表示されます。
- スマートフォンとデスクトップのサイズでそれぞれ実行し、2つの結果を統合しましょう。ファーストビューの境界はそれぞれ異なる位置にあるからです。
- :hoverや:focusなどのインタラクティブな状態は要素自体で照合されるため、表示されるボタンはhoverのルールを保持します。結果を最小にしたい場合は手作業で削除してください。
- 読み込み後にJavaScriptで追加されるコンテンツは貼り付けたHTMLに含まれないため、そのスタイルは検出されません。ページがブラウザー内で自身を構築する場合は、描画後のHTMLを貼り付けてください。
- インラインブロックは小さく保ちましょう。web.devは、最初の数回の往復で届くよう、ファーストビューのコンテンツを圧縮後約14 KB以内に収めることを推奨しています。
- ページ上部が変わるたびに抽出をやり直しましょう。古いクリティカルCSSは、初回読み込み時にスタイルのない状態が一瞬表示される原因になります。
よくある質問
CriticalやPenthouseパッケージと同じものですか？
同じ考え方を、より簡単な方法で実現しています。これらのコマンドラインツールは、ビルド済みのページに対して実際のヘッドレスブラウザーを操作します。このページはあなたのブラウザーと貼り付けたコードを使うため、結果は近似値として扱い、後でページをテストしてください。
preloadリンクにonloadが必要なのはなぜですか？
rel=preloadとas=styleの組み合わせは、スタイルシートを適用せずにダウンロードします。onloadハンドラーがファイル到着後にrelをstylesheetに切り替えることで、初回描画をブロックせずに適用されます。noscriptのコピーは、スクリプトを無効にしている訪問者のためのものです。
CSSをインライン化するとキャッシュに悪影響がありますか？
インラインのルールはHTMLページごとに毎回送信されるため、ブロックは小さく保つべきです。完全なスタイルシートは引き続き別ファイルなので、初回訪問後は通常どおりキャッシュされます。
公開中のサイトを読み込めますか？
いいえ。ブラウザー上の静的ページは他サイトのコードを読み込めないため、何も取得しません。ページを開いてソースとスタイルシートを表示し、両方を貼り付けてください。貼り付けた内容がアップロードされることはありません。
CSSにTailwindのようなフレームワークを使っている場合は？
@tailwindや@importの行を含むソースではなく、ビルドで生成されたコンパイル済みのCSSファイルを貼り付けてください。抽出ツールは完成したルールに対して動作し、HTML内のユーティリティクラスは他のセレクターと同様に照合されます。
ファーストビューの境界は実際どこにあるか
- ファーストビューの境界は1つではありません。縦向きのスマートフォンは650ピクセルの高さを表示し、ノートパソコンは800、大きなモニターはそれ以上を表示します。訪問者が最もよく使うサイズを選び、多くの人がすぐにスクロールを始めるため、境界線の下に余裕を持たせましょう。
- 抽出ツールは、要素の上端が指定した高さより上にある場合に、その要素を表示中とみなします。画面内で始まり画面外で終わる縦長のヒーローも残されますが、それが望ましい動作です。
出力をページに組み込む
- インラインのstyleブロックは、headの中で描画に関わる他のものより前に配置します。通常のスタイルシートリンクをpreloadパターンに置き換え、残りのCSSが初回描画を妨げずに読み込まれるようにします。
- ブラウザーの開発者ツールでネットワークを低速化して結果を確認しましょう。完全なファイルが届いたときに何かがずれたりスタイルが変わったりする場合は、表示される要素のルールが漏れています。それをインラインブロックに追加してください。
ツールが出力する読み込みパターン
クリティカルなルールをインライン化し、残りをブロックせずに読み込む
これはweb.devで紹介されているパターンです。styleブロックに抽出したルールを入れ、preloadリンクが完全なファイルを取得して読み込み時に適用します。noscriptの行はフォールバックです。
ブラウザー内抽出ツールの既知の制限
手作業で確認すべきこと
- スクリプトで追加されるスタイル
- 検出されない、フレーム内ではスクリプトが実行されない
- テンプレートではなく描画後のHTMLを貼り付ける
- 幅と高さのない画像
- 高さがゼロになり、後のコンテンツが上に詰まることがある
- 画像にwidthとheight属性を追加する
- Webフォント
- ダウンロードされないため、テキストの折り返しが変わることがある
- ファーストビューの高さの下に余裕を持たせる
- ブラウザーが拒否するセレクター
- 照合前にブラウザーが破棄する
- 構文を修正する、統計に読み込んだルール数が表示される
- 非常に長いページ
- 意図どおり最初の画面だけが残る
- 必要な画面サイズごとに再実行する
クリティカルCSSを抽出
ツールはサンプルのベーカリーページを読み込んだ状態で開くため、自分のコードを貼り付ける前に結果を確認できます。
ページのHTML
スタイルシートのCSS
画面サイズ
タブレット 820 x 1000
ノートPC 1366 x 768
デスクトップ 1920 x 1000
幅（px）
ファーストビューの高さ（px）
@font-faceルールを常に残す
指定サイズでのページ表示、スクリプト無効
破線がファーストビューの境界を示します。
{read}件のルールを読み込み、{kept}件を残しました。クリティカルCSSは圧縮前で{bytes}バイトです。
ページをレイアウト中...
一致するルールがありません。HTMLとCSSが同じページのものか確認してください。
これをheadにインライン化
その後、完全なスタイルシートをこのように読み込む
styleブロックをコピー
preloadリンクをコピー
サンプルを再読み込み
両方の入力欄をクリア
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る