Critical CSSジェネレーター。

Critical CSSとは

Critical CSSは、可視領域のviewportをレンダリングするために必要なCSS宣言の集まりです。可視領域のviewportは「アバブ・ザ・フォルドのコンテンツ」とも呼ばれます。スクロールせずにブラウザで表示されるページの部分を指します。訪問者が最初に見るのがこの領域であるため、ここのレンダリングを優先すべきです。Critical CSSを利用することで、これが可能になります。

Critical CSSを使用する理由

一言で言えば、はるかに高速になるからです。 Critical path（アバブ・ザ・フォルド）のCSSは、CSS配信を最適化するための最も重要で効果的な手法の一つです。 すべてのモダンブラウザの仕組み上、外部ファイルのスタイルはすべてrender blockingと見なされます。 つまり、ページのhead内にあるすべての外部CSSファイルのダウンロードが完了するまで、ブラウザはレンダリング（具体的にはレンダーツリーの生成）を開始しません。1つ以上のCSSファイルをダウンロードする際、ページは簡単に100ミリ秒以上ブロックされます。Google PageSpeed Insightsは、ページの読み込み時間を短縮するために、render blockingリソースの排除を推奨しています。
これを回避する方法の1つが、Critical CSSの使用です。Critical CSSは、ページの可視部分を表示するためだけに必要なCSSの集まりです。通常、ページのhead内にインラインで記述されます。これにより、ブラウザはレンダリングを開始する前にCSSファイルをダウンロードする必要がなくなります。ページが表示されている間に、ブラウザはバックグラウンドで最終的なCSSファイルをダウンロードします。

Critical CSSジェネレーターの使用方法

まず、ページのCritical Path CSSを生成する必要があります。ページのURLを入力し、「Critical CSSを生成」を押します。数秒後に抽出されたCSSが表示されます。
そのCSSをコピーし、ページの<head>内、<title>の直下にある<style>タグ内に配置します。
次に、元のCSSの読み込みを遅延させます。これには3つの方法があります。

1. CSSをpreloadし、読み込み時にrelを切り替える
2. media=printでCSSを読み込み、読み込み時にmedia要素を切り替える
3. 元のCSSリンクをページのフッターに配置する

非Critical CSSのキャッシュ

Critical CSSは、ブラウザにCSSファイルがキャッシュされていない新規の訪問者に対して非常に高速です。再訪問者の場合、CSSファイルはブラウザのキャッシュから読み込まれるため、通常はCritical CSSの必要性はほとんどありません。

スタイルシートは結合すべきか？

Critical CSSの実装後、スタイルシートを結合したほうが高速になるのでしょうか。単純な答えはありません。結合したほうが高速な場合もあれば、そうでない場合もあります。これはクリティカルレンダリングパスに関係しています。優先度の高いリソースが5つ以上ある場合は、通常、いくつかのスタイルシートを結合するのが合理的です。

Critical CSSジェネレーターの仕組み

Critical CSSジェネレーターは、独自のNode.jsプラットフォームで動作します。実際のChromeベースのウェブブラウザを使用してページにアクセスします。さまざまなviewportでウェブサイトを評価し、可視領域のviewport（ページの可視部分）のレンダリングにスタイルシートのどの部分が使われているかを判断します。その後、レンダリングに必要なCSSをクリーンアップし、最小化します。

Critical CSSジェネレーターのWordPressプラグインはありますか？

はい、あります。Core Web Vitalsプラグインという名称で、提供しているCritical Path抽出ツールと連携するように特別に設計されています。

フィードバック / ベータ版のステータス

現在、Critical CSSジェネレーターはベータ版のステータスです。継続的にテストや調整を行っています。Critical CSSジェネレーターが機能しない場合は、5分後に再試行してください。

フィードバックや不足している機能がありましたら、お知らせください