關鍵 CSS 生成器
一個免費的瀏覽器小部件,用於高級關鍵 CSS 生成器和首屏優化器。
首屏優化器
介紹
Critical CSS 產生器能夠解決 Google 的 Core Web Vitals 問題,純粹基於最小 CSS消除未使用的 CSS懲罰。它能夠實現像素完美的結果。
最佳關鍵 CSS 結果是在真實瀏覽器中實現的。
瀏覽器小部件在要提取關鍵 CSS 的頁面上執行,因此可以完全原生訪問原始 CSS 環境。
您可以選擇要從中提取關鍵 CSS 的樣式表或內聯樣式表元素。這對於創建可以在頁面之間共享的關鍵 CSS 很方便。
瀏覽器小部件還具有從樣式表中刪除關鍵 CSS 的功能。
該工具是無間諜的。沒有谷歌分析或跟踪。使用安全,可以通過 Service Worker 緩存在本地使用。
瀏覽器小工具提供了更進階的關鍵 CSS 軟體範例,可以透過 Google Cloud 中的 Chrome 瀏覽器使用該軟體。有關更多信息,請參閱我們的專業優化插件。
安裝
要安裝小部件,
拖到收藏夾欄或複制並粘貼下面的代碼。x.pagespeed.pro
跨域持久設置並離線或在localhost
上使用小部件。特徵
高級關鍵 CSS 生成器
- 基於PostCSS定制開發,最好的 CSS 解析器之一。
- 支持響應式關鍵 CSS的多視口(桌面 + 移動)。
- Puppeteer 喜歡瀏覽器控件,包括單擊、鼠標事件(懸停、移動等)、滾動、自定義 javascript 代碼執行等等。
- 原始未優化的純關鍵 CSS 輸出。
首屏優化器
- 將關鍵 CSS 與原始 CSS 進行比較。
- 可定制的像素測量標尺。
高級優化工具
- 未使用的 CSS 移除器,用於從樣式表中移除關鍵 CSS。
- 專業的CSS壓縮(minify)和優化軟件。
- 損壞的 CSS 修復。修復格式錯誤的 CSS 的工具。
- 自動前綴。將瀏覽器前綴應用於 CSS 的工具。
- CSS 統計和分析。
- CSS美化。
- 高級 CSS 棉絨。
- 重複的 CSS 去除器。
- 高級 CSS 編輯器連接到帶有優化提示的 CSS lint。
如何使用
第 1 步:在頁面上啟動瀏覽器小部件
導覽至要提取關鍵 CSS 的頁面並啟動瀏覽器小工具。按一下此處以取得安裝說明。
第 2 步:生成關鍵 CSS
可以通過標題中的“工具”選項卡訪問關鍵的 CSS 生成器。
使用文件中的選項配置 JSON。
第三步:優化結果
關鍵 CSS 生成器的輸出是原始的,需要進一步優化,例如壓縮。
編輯器菜單中的優化按鈕可以應用高級代碼優化和壓縮。
文檔
關鍵 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
在當前 UI 狀態上運行關鍵 CSS 生成器。每次 UI 狀態更改時都需要重複此操作,以便發現新的首屏 CSS 代碼。
{
"run": true
}
wait
在繼續下一步操作之前等待幾毫秒。
{
"wait": 1000
}
viewport
設置視口大小。
{
"viewport": "1300x900"
}
scroll
滾動視口。該選項接受數值(距離頂部的像素)、百分比字符串 ( 50%
) 或具有[x,y]
位置(以像素為單位)的數組。
{
"scroll": 400
}
event
在可選的 DOM 選擇器上觸發瀏覽器事件 ( new Event()
)。
{
"event": "click",
"selector": "a.link"
}
mouseevent
在可選的 DOM 選擇器上觸發鼠標事件 ( new MouseEvent()
)。該操作接受帶有MouseEvent 選項的mouseEventInit
參數,其中包括設置 x,y 坐標的能力。當省略mouseEventInit
時,默認選項為{"bubbles": true,"cancelable": true}
。
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
評估 JavaScript 代碼。此操作允許在頁面上執行 javascript 代碼,例如,在進一步更改 UI 狀態之前關閉彈出窗口。
{
"script": "Popups.close();"
}
fn
執行一個 javascript 函數。此操作可以執行預配置的 javascript 函數。額外的選項"promise":true
可以期待一個承諾並等待承諾解決,然後再繼續下一個動作。
{
"fn": "action_to_perform",
"promise": true
}
notes
每個操作對像都接受一個notes
參數,該參數可用於添加描述性文本。
{
"script": "add_to_cart();",
"notes": "個人使用的 UI 操作說明"
}
示例 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。
未使用的 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。
重複 CSS 去除器的示例配置
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
第二個輸入字段接受樣式表索引號。您可以在設置選項卡上的樣式表概述中找到樣式表的索引。
您可以上傳樣式表或通過創建新樣式表比較來自外部 URL 的樣式表。然後,您可以導入 URL 或上傳樣式表,並在重複的 CSS 刪除器中使用新樣式表中的索引。
配置完成後,按下按鈕啟動重複的 CSS 移除器。 CSS 註釋將顯示生成的簡化 CSS 的基本統計信息。