簡単な手順でWebページの読み込み時間を高速化！クリティカルCSSを抽出してくれるツール -Critical CSS Generator

サイト構築 -CSS

Post on:2025年6月17日

クリティカルCSSを使用する主な利点

クリティカルCSSを使用する主な利点は、下記の3つです。

Webページの体感的な読み込み時間の短縮。
Lighthouseスコアの向上。
SEOとユーザーエクスペリエンスの向上。

特に低速な接続環境であるほど効果が高く、スマホユーザーに有効です。

クリティカルCSSについて詳しくは、下記をご覧ください。

CSSを最適化してページの読み込み時間を高速化する方法

Critical CSS Generatorの使い方

Critical CSS Generatorの使い方は、簡単です。
まずは、下記ページにアクセスします。

Critical CSS Generator

WebページのURLを入力し、ファーストビューで想定するビューポートサイズ（幅・高さ）をし、「Generate CSS」をクリックするだけです。

URLを入力して、「Generate CSS」をクリック

当ブログのトップページで実際に試してみました。

CSSをざっと見たところ、確かにファーストビューに必要なCSSでした。が、それなりのボリュームだったのでクリティカルCSSをインラインで記述するのは断念しました。

クリティカルCSSの記述方法

Step 1: クリティカルCSSをインライン化する

生成されたCSSをHTMLドキュメントの<head>タグ内の<style>タグにコピペします。重要なポイントは、他のCSSやJavaScriptよりも前に記述することです。

<style>
  /* クリティカルCSS */
</style>

<style>

/* クリティカルCSS */

</style>

Step 2: クリティカルでないCSS

クリティカルでないCSSの<link>タグは、</body>終了タグの直前に配置します。これにより、ブラウザはクリティカルCSSでスタイル設定された最初のコンテンツを最初にレンダリングできるようになります。もちろん、<head>内からこれらの<link>を削除することを忘れないでください。

<html>
    ...
    <body>
    ... 
      <link rel="stylesheet" href="vendors.css">    // クリティカルでないCSS
      <link rel="stylesheet" href="style.css">    // クリティカルでないCSS
    </body> 
  </html>

<html>

...

<body>

...

</body>

</html>

Step 3: JavaScriptで遅延させる（オプション）

読み込みを最適化するために（特に低速な接続環境）、<head>内でJavaScriptを使用して、ページコンテンツの読み込み後にクリティカルでないCSSを読み込むという方法もあります。その場合はStep 2の代わりにこの方法を使用してください。

window.addEventListener("DOMContentLoaded", function () {
      console.log("✅ Page loaded, now loading non-critical stylesheets...");
      // --- クリティカルでないCSSを定義 ---
      let stylesheets = [
        // "vendors.css", // クリティカルでないCSS
        // "style.css",   // クリティカルでないCSS
        // クリティカルCSS以外のすべてのスタイルシートを記述します
      ];
      // ----------------------------------------------
      // 残りのスクリプトは変更なし
      let loadedCount = 0;
      function checkAllStylesLoaded() { loadedCount++; if (loadedCount === stylesheets.length) { console.log("✅ All non-critical stylesheets loaded..."); } }
      stylesheets.forEach(function (href) { var link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.onload = checkAllStylesLoaded; link.onerror = () => console.warn(`Failed to load stylesheet: ${href}`); document.head.appendChild(link); });
    });

window.addEventListener("DOMContentLoaded", function () {

console.log("✅ Page loaded, now loading non-critical stylesheets...");

// --- クリティカルでないCSSを定義 ---

let stylesheets = [

// "vendors.css", // クリティカルでないCSS

// "style.css", // クリティカルでないCSS

// クリティカルCSS以外のすべてのスタイルシートを記述します

];

// ----------------------------------------------

// 残りのスクリプトは変更なし

let loadedCount = 0;

function checkAllStylesLoaded() { loadedCount++; if (loadedCount === stylesheets.length) { console.log("✅ All non-critical stylesheets loaded..."); } }

stylesheets.forEach(function (href) { var link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.onload = checkAllStylesLoaded; link.onerror = () => console.warn(`Failed to load stylesheet: ${href}`); document.head.appendChild(link); });

});