重要な CSS ジェネレーター

高度な重要な CSS ジェネレーターとスクロールせずに見える範囲のオプティマイザーのための無料のブラウザー ウィジェット。

スクロールせずに見えるオプティマイザ

クリティカル CSS ジェネレーターとアバブザフォールド オプティマイザー

導入

クリティカル CSS ジェネレーターを使用すると、純粋に最小限の CSS に基づいて、Google の Core Web Vitalsの未使用 CSSペナルティを解決できます。これにより、ピクセルパーフェクトな結果を達成することができます。

最も重要な CSS の結果は、実際のブラウザーで達成されます。

ブラウザー ウィジェットは、重要な CSS が抽出されるページで実行されるため、元の CSS 環境に完全にネイティブ アクセスできます。

重要な CSS を抽出するスタイルシートまたはインライン スタイルシート要素を選択できます。これは、ページ間で共有できる重要な CSS を作成するのに便利です。

ブラウザ ウィジェットには、重要な CSS をスタイルシートから削除する機能もあります。

このツールはスパイフリーです。 Google アナリティクスや追跡はありません。安全に使用でき、Service Worker キャッシュを介してローカルで使用できます。

ブラウザ ウィジェットは、Google Cloud の Chrome ブラウザを通じて使用できる、より高度な重要な CSS ソフトウェアの例を提供します。詳細については、専門的な最適化プラグインを参照してください。

インストール

ウィジェットをインストールするには、このリンクをドラッグ🗔 重要な CSSか、以下のコードをコピーして貼り付けます。

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="重要な CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

特徴

1. 高度なクリティカル CSS ジェネレーター

   1. 最高の CSS パーサーの 1 つであるPostCSSに基づいてカスタム開発されました。
   2. レスポンシブ クリティカル CSS用に複数のビューポート (デスクトップ + モバイル) をサポートします。
   3. クリック、マウス イベント (ホバー、移動など)、スクロール、カスタム JavaScript コードの実行などを含むブラウザー コントロールのような操り人形師。
   4. 生の最適化されていない純粋な重要な CSS 出力。

2. スクロールせずに見えるオプティマイザ

   1. 重要な CSS と元の CSS を比較します。
   2. カスタマイズ可能なピクセル メジャー ルーラー。

3. 高度な最適化ツール

   1. スタイルシートから重要な CSS を削除する未使用の CSS リムーバー。
   2. プロ仕様の CSS 圧縮 (ミニファイ) および最適化ソフトウェア。
   3. 壊れた CSS の修復。不正な CSS を修正するツール。
   4. オートプレフィクサー。ブラウザのプレフィックスを CSS に適用するツール。
   5. CSS の統計と分析。
   6. CSS美化。
   7. 高度な CSS リント。
   8. 重複 CSS リムーバー。
   9. 最適化のヒントを備えた CSS lint に接続された高度な CSS エディター。

使い方

ステップ 1: ページでブラウザー ウィジェットを開始する

重要な CSS を抽出するページに移動し、ブラウザー ウィジェットを起動します。インストール手順については、ここをクリックしてください。

ステップ 2: 重要な CSS を生成する

重要な CSS ジェネレーターには、ヘッダーの[ツール]タブからアクセスできます。

ドキュメントのオプションを使用して JSON を構成します。

ステップ 3: 結果を最適化する

重要な CSS ジェネレーターの出力は未加工であり、圧縮などのさらなる最適化が必要です。

エディター メニューの[最適化]ボタンを使用すると、高度なコードの最適化と圧縮を適用できます。

ドキュメンテーション

重要な CSS ジェネレーター

重要な CSS ジェネレーターは、次のオプションを受け入れます。

設定例を表示

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "スクロールせずに見える CSS 検出用のビューポートを設定します。"
    },
    {
      "wait": 1000,
      "notes": "ビューポートがレンダリングできるようになるまで 1000 ミリ秒待ちます。"
    },
    {
      "run": true,
      "notes": "重要な CSS ジェネレーター (スクロールせずに見える CSS の計算) を実行します。"
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-menu DOM 要素で新しい MouseEvent を発生させます。"
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "スクリプトを実行します。この場合、次のビューポートに進む前にメニューを閉じます。"
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Critical CSS ジェネレーターのUI アクション

重要な CSS ジェネレーターは、Puppeteer のようなブラウザー コントロールを提供します。 ui_actionsパラメーターは、UI 状態の変化を時系列で定義する UI アクション オブジェクトを含む配列を受け入れます。

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "個人用のUIアクションの説明"
}

設定例を表示

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "スクロールせずに見える CSS 検出用のビューポートを設定します。"
    },
    {
      "wait": 1000,
      "notes": "ビューポートがレンダリングできるようになるまで 1000 ミリ秒待ちます。"
    },
    {
      "run": true,
      "notes": "重要な CSS ジェネレーター (スクロールせずに見える CSS の計算) を実行します。"
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-menu DOM 要素で新しい MouseEvent を発生させます。"
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "スクリプトを実行します。この場合、次のビューポートに進む前にメニューを閉じます。"
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

未使用の CSS リムーバー

未使用の CSS リムーバーは、重要な CSS エクストラクターと同じソフトウェアを使用し、UI アクションによる Puppeteer のようなブラウザー コントロールなど、ほぼ同じ構成オプションを受け入れます。このツールを使用すると、未使用の CSS を抽出することもできます。

設定例を表示

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

重複CSSリムーバー

重複 CSS リムーバーを使用すると、2 つのスタイルシートを比較して、重複する CSS を削除または抽出できます。

設定例を表示

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

2 番目の入力フィールドは、スタイルシートのインデックス番号を受け入れます。スタイルシートのインデックスは、設定タブのスタイルシートの概要で確認できます。

スタイルシート インデックスの概要

新しいスタイルシートを作成して、スタイルシートをアップロードしたり、外部 URL からスタイルシートを比較したりできます。その後、URL をインポートするか、スタイルシートをアップロードして、重複する CSS リムーバーで新しいスタイルシートのインデックスを使用できます。

スタイルシートのインポートまたはアップロード

設定したら、ボタンを押して重複 CSS リムーバーを開始します。 CSS コメントには、縮小された CSS の基本的な統計が表示されます。

重複CSSリムーバーの結果