關鍵 CSS 生成器

用於高級關鍵 CSS 生成器和首屏優化器的免費瀏覽器小部件。一種以盡可能少的 CSS 實現像素完美結果的工具。

最佳關鍵 CSS 結果是在真實瀏覽器中實現的。

瀏覽器小部件在要提取關鍵 CSS 的頁面上執行，因此可以完全原生訪問原始 CSS 環境。

您可以選擇要從中提取關鍵 CSS 的樣式表或內聯樣式表元素。這對於創建可以在頁面之間共享的關鍵 CSS 很方便。

瀏覽器小部件還具有從樣式表中刪除關鍵 CSS 的功能。

該工具是無間諜的。沒有谷歌分析或跟踪。使用安全，可以通過 Service Worker 緩存在本地使用。

The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.

安裝

要安裝小部件，拖動此鏈接🗔 關鍵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);

首屏優化器

關鍵 CSS 生成器和首屏優化器

關鍵 CSS 生成器能夠解決 Google 的 Core Web Vitals 純粹基於最小 CSS刪除未使用的 CSS懲罰。

特徵

1. 高級關鍵 CSS 生成器

   1. 基於PostCSS定制開發，最好的 CSS 解析器之一。
   2. 支持響應式關鍵 CSS的多視口（桌面 + 移動）。
   3. Puppeteer 喜歡瀏覽器控件，包括單擊、鼠標事件（懸停、移動等）、滾動、自定義 javascript 代碼執行等等。
   4. 原始未優化的純關鍵 CSS 輸出。

2. 首屏優化器

   1. 將關鍵 CSS 與原始 CSS 進行比較。
   2. 可定制的像素測量標尺。

3. 高級優化工具

   1. 未使用的 CSS 移除器，用於從樣式表中移除關鍵 CSS。
   2. 專業的CSS壓縮（minify）和優化軟件。
   3. 損壞的 CSS 修復。修復格式錯誤的 CSS 的工具。
   4. 自動前綴。將瀏覽器前綴應用於 CSS 的工具。
   5. CSS 統計和分析。
   6. CSS美化。
   7. 高級 CSS 棉絨。
   8. 重複的 CSS 去除器。
   9. 高級 CSS 編輯器連接到帶有優化提示的 CSS lint。

如何使用

第 1 步：在頁面上啟動瀏覽器小部件

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

第 2 步：生成關鍵 CSS

可以通過標題中的“工具”選項卡訪問關鍵的 CSS 生成器。

Configure the JSON using the options in the the documentation.

第三步：優化結果

關鍵 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
    }
  ]
}

關鍵 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 移除器可以比較兩個樣式表並移除或提取重複的 CSS。

顯示示例配置

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

第二個輸入字段接受樣式表索引號。您可以在設置選項卡上的樣式表概述中找到樣式表的索引。

樣式表索引概述

您可以上傳樣式表或通過創建新樣式表比較來自外部 URL 的樣式表。然後，您可以導入 URL 或上傳樣式表，並在重複的 CSS 刪除器中使用新樣式表中的索引。

導入或上傳樣式表

配置完成後，按下按鈕啟動重複的 CSS 移除器。 CSS 註釋將顯示生成的簡化 CSS 的基本統計信息。

重複 CSS 去除器的結果