Critical CSS ジェネレーター。

Critical Path CSS を生成し、Web サイトを高速化します

⚙

3つの簡単なステップで完了する Critical CSS

  1. Critical CSS を作成したいページの URL を入力します
  2. 結果をページの <title> のすぐ下にある <style> タグに貼り付けます
  3. 元のスタイルシートの読み込みを遅延させます
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

Critical CSS とは

Critical CSS は、表示されるビューポートをレンダリングするために使用される CSS 宣言のコレクションです。表示されるビューポートは、「アバブ・ザ・フォールド（ファーストビュー）コンテンツ」と呼ばれることがよくあります。これは、スクロールせずにブラウザで確認できる Web ページの部分です。表示されるビューポートは訪問者が最初に目にするものであるため、そのレンダリングを優先する必要があります。Critical CSS はその実現に役立ちます！

なぜ Critical CSS を使用する必要があるのか

一言で言えば、はるかに高速だからです！ Critical path (アバブ・ザ・フォールド) CSS は、CSS の配信を最適化するために利用できる最も重要で影響力のある手法の 1 つです。 すべての最新ブラウザの仕組みにより、外部ファイルからのすべてのスタイルはレンダリングブロックと見なされます。 これは、ブラウザがページの head 内にあるすべての外部 CSS ファイルをダウンロードするまで、レンダリング（具体的にはレンダーツリーの生成）を開始しないことを意味します。ブラウザが 1 つ以上の CSS ファイルをダウンロードする必要がある場合、ページは簡単に 100ms 以上ブロックされる可能性があります。Google PageSpeed Insights では、ページの読み込みを高速化するために、レンダリングブロックリソースを排除することを推奨しています。
それを回避する 1 つの方法は、Critical CSS を使用することです。Critical CSS は、ページの表示部分のみを表示するために必要な CSS のコレクションです。この Critical CSS は多くの場合、ページの head 内にインラインで表示されます。その結果、ブラウザはレンダリングを開始する前に 1 つ以上の CSS ファイルをダウンロードする必要がありません。その間、ページが表示されているときに、ブラウザはバックグラウンドで最終的な CSS ファイルをダウンロードします。

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

まず、Web ページの Critical Path CSS を生成する必要があります。ページの URL を入力して、「Critical CSS を生成」を押すだけです。数秒後に抽出された CSS が表示されます
その CSS をコピーして、ページの <head> 内、<title> のすぐ下にある <style> タグに配置します
次のステップは、元の CSS を遅延させることです。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 ベースの Web ブラウザを使用して Web ページにアクセスします。さまざまなビューポートで Web サイトを評価し、スタイルシートのどの部分が表示されるビューポート（ページの表示部分）のレンダリングに使用されているかを特定します。その後、レンダリングに必要な CSS をクリーンアップして縮小（minify）します。

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

はい、あります。Core Web Vitals プラグインと呼ばれ、私たちの Critical Path 抽出ツールと連携するように特別に設計されています。

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

現在、Critical CSS ジェネレーターはベータ版のステータスです。つまり、私はまだ常に実験を続けているということです。Critical CSS ジェネレーターが機能しませんか？ご心配なく... 5 分後にもう一度お試しください！

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