ファーストビューで使う規則を抽出します

フロントエンド開発者がページ上部を早く見せるため、最初の描画に本当に必要な CSS だけを切り出したい場合に役立ちます。

ファーストビューで使う規則を抽出します。入力内容を外部へ送らず、確認やコピー、調整がしやすい実用的な結果をブラウザー内だけで作成できます。

使い方

ページの上部に表示される部分のHTMLを貼り付けます。
2つのダッシュで作られた区切り行を追加します。
そのページで使用されている完全なスタイルシートを区切りの下に貼り付けます。
抽出を実行して、最初のレンダリングに必要なルールを取得します。

使用例

フロントエンド開発者が、ヘッダーとメニューをすばやく表示する必要があるホームページを調整しています。ヘッダーのHTMLを貼り付け、2つのダッシュを追加し、完全なスタイルシートを含めます。出力は、さらなる最適化の前にクリティカルCSSブロックを準備するのに役立ちます。その後、コピーで結果をテストして、不足しているルールを探します。

入力

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

制限と形式

このツールはURLからページを取得しません。HTMLとCSSを自分で提供する必要があります。
JavaScriptや複雑な疑似要素によって追加されたスタイルは欠落する場合があります。
抽出したルールを展開する前にブラウザでテストしてください。
非常に大きなページでは、より小さく意図的な選択が必要になる場合があります。
コメントや未使用のルールは、出力を重くする可能性があります。

処理の場所

貼り付けたHTMLとCSSはブラウザ内に留まります。ルールの抽出はデバイス上で行われ、ページから何も送信されません。ページを離れた後、結果は保持されません。

よくある質問

どのHTMLを提供すればよいですか？

スクロール前にユーザーが見るマークアップ、たとえばヘッダー、ナビゲーション、最初のコンテンツブロックを提供してください。クリティカルCSSはその初期ビューポートに依存します。範囲を広げすぎると、通常は焦点の定まらないルールになります。

一部のルールが欠落しているのはなぜですか？

ツールは貼り付けたHTMLとCSSを読み取りますが、ページのJavaScriptは実行しません。後から追加されるクラスや、ブラウザによって計算されるスタイルは存在しない場合があります。最初のレンダリングで必要な場合は手動で追加してください。

抽出したCSSを直接公開できますか？

まずコピーでテストしてください。初期レイアウトが損なわれていないこと、フォントが利用可能なままであることを確認します。クリティカルCSSは通常、あらゆる状況でメインのスタイルシートを置き換えるのではなく、補完するものです。