关键 CSS 生成器

一个免费的浏览器小部件，用于高级关键 CSS 生成器和首屏优化器。

首屏优化器

关键 CSS 生成器和首屏优化器

介绍

Critical CSS 生成器能够解决 Google 的 Core Web Vitals 问题，纯粹基于最小 CSS消除未使用的 CSS惩罚。它能够实现像素完美的结果。

最佳关键 CSS 结果是在真实浏览器中实现的。

浏览器小部件在要提取关键 CSS 的页面上执行，因此可以完全原生访问原始 CSS 环境。

您可以选择要从中提取关键 CSS 的样式表或内联样式表元素。这对于创建可以在页面之间共享的关键 CSS 很方便。

浏览器小部件还具有从样式表中删除关键 CSS 的功能。

该工具是无间谍的。没有谷歌分析或跟踪。使用安全，可以通过 Service Worker 缓存在本地使用。

浏览器小部件提供了更高级的关键 CSS 软件示例，可以通过 Google Cloud 中的 Chrome 浏览器使用该软件。有关更多信息，请参阅我们的专业优化插件。

安装

要安装小部件，拖动此链接🗔 关键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. 基于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 步：在页面上启动浏览器小部件

导航到要提取关键 CSS 的页面并启动浏览器小部件。单击此处获取安装说明。

第 2 步：生成关键 CSS

可以通过标题中的“工具”选项卡访问关键的 CSS 生成器。

使用文档中的选项配置 JSON。

第三步：优化结果

关键 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 去除器的结果