Critical CSS ジェネレーター。

Critical CSSとは

Critical CSSとは、viewportの表示領域をレンダリングするために使われるCSS宣言の集まりです。この表示領域は、一般に「above the fold content」と呼ばれます。スクロールせずにブラウザ画面に表示されるWebページの部分を指します。訪問者が最初に目にする部分であるため、この表示領域のレンダリングを最優先にする必要があります。Critical CSSを使えば、これを実現できます。

Critical CSSを使うべき理由

結論から言えば、圧倒的に速いからです。 Critical path（above-the-fold）CSSは、CSS配信の最適化において最も重要で効果の高い手法の1つです。 モダンブラウザの仕様上、外部ファイルからのスタイルはすべてrender blockingとして扱われます。 つまりブラウザは、ページのhead内にある外部CSSファイルをすべてダウンロードし終えるまで、レンダリング（具体的にはレンダーツリーの生成）を開始しません。ブラウザが1つ以上のCSSファイルをダウンロードする場合、容易に100ms以上のブロックが発生します。Google PageSpeed Insightsでも、ページの読み込みを高速化するためにrender blockingリソースの排除が推奨されています。
これを回避する方法の1つが、Critical CSSを使うことです。Critical CSSは、ページの表示部分だけを描画するために必要なCSSの集まりです。通常、このCritical CSSはページのhead内にインラインで配置されます。これにより、ブラウザはレンダリングを開始する前にCSSファイルをダウンロードする必要がなくなります。そしてページが表示されている間に、ブラウザはバックグラウンドで残りのCSSファイルをダウンロードします。

Critical CSSジェネレーターの使い方

まず、対象ページのCritical Path CSSを生成します。ページのURLを入力し、「Generate Critical CSS」をクリックするだけです。数秒後に、抽出されたCSSが表示されます。
そのCSSをコピーし、ページの<head>内、<title>直下の<style>タグ内に貼り付けます。
次のステップは、元のCSSの読み込みを遅延させることです。遅延には3つの方法があります。

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

非Critical CSSのキャッシュ

ブラウザキャッシュにまだCSSファイルが保存されていない初回訪問者に対して、Critical CSSは圧倒的な高速化をもたらします。一方、再訪問者の場合はブラウザキャッシュからCSSファイルを読み込めるため、通常Critical CSSの必要性はほとんどありません。

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

Critical CSSの導入後、スタイルシートを結合したほうが速くなるのでしょうか？これに対する単純な答えはありません。スタイルシートを結合したほうが速い場合もあれば、そうでない場合もあります。これはcritical rendering pathに関係しています。優先度の高いリソースが5つを超える場合は、通常、いくつかのスタイルシートを結合するのが合理的です。

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

このCritical CSSジェネレーターは、独自のNodeJsプラットフォーム上で動作します。実際のChromeベースのWebブラウザで対象のWebページにアクセスします。複数の異なるviewportでWebサイトを検証し、表示領域（ページの可視部分）のレンダリングに使われているスタイルシートの箇所を特定します。その後、レンダリングに必要なCSSをクリーンアップしてminifyします。

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

はい、あります。「Core Web Vitals」プラグインという名称で、当ツールのCritical Path抽出機能と連携するように専用設計されています。

フィードバック / ベータ版について

現在、Critical CSSジェネレーターはbeta版です。常に実験と改善を続けている段階です。うまく動作しない場合も、心配はいりません。5分後にもう一度試してみてください。

フィードバックや追加してほしい機能がありますか？ お知らせください