如果您的 WordPress 网站使用付费 WordPress 主题或官方 WordPress 主题存储库中的流行主题，则该主题很可能是为各种用例开发的。而且您可能只使用了主题中所有可用功能的一小部分。
在这种情况下，您的网站正在加载大量未使用的 CSS，这些 CSS 不是您网站页面样式所必需的。例如，您使用的 WordPress 主题可能也具有 WooCommerce 页面的样式，但如果您仅在 WordPress 网站上运行博客，那么您就没有使用您网站上的 WooCommerce 页面包含的 CSS，从而提供未使用的服务CSS 给用户。
如果您已经在 Google Pagespeed 工具上测试过您的网站，您可能已经意识到您的网站存在未使用的 CSS 问题。在本指南中，我们将向您展示如何首先检查未使用的 CSS，然后使用免费工具从您的 WordPress 站点中删除未使用的 CSS。
如何检查未使用的 CSS
Google Chrome DevTools（当您单击上下文菜单中的“检查”选项时看到的那个）在 Sources 选项卡中有一个 Coverage 功能。您可以使用 Coverage 选项来查找您的网站加载的未使用的 CSS 和 JS。
- 在桌面上的 Chrome 中打开您的网站。
- 右键单击您网站上的空白区域，然后选择 检查 从上下文菜单。
- 点击 来源 标签，按 Ctrl + Shift + P 打开命令窗口，然后键入 覆盖面 并选择 开始检测覆盖率并重新加载页面 从可用的命令。
- 在 Coverage 选项卡下，单击 网址过滤器 字段并在此处输入您网站的根域以仅显示内部 CSS/JS 文件。
└ 检查 未使用的字节 列以查看从您的主题加载到 CSS/JS 文件中的数据百分比。
- 单击 CSS 文件以查看您的站点加载的未使用的 CSS（用红色条标记）。当前页面上正在使用的 CSS 将显示为绿色条。
一旦您分析了您网站上加载的所有未使用的 CSS，就可以将其删除。有多种免费工具可用于从网页中删除未使用的 CSS。下面是我在自己的项目中测试和使用的流行工具之一。
使用 PurifyCSS Online 删除未使用的 CSS
通常，您可以在 WordPress 中找到几乎所有内容的插件。但是对于删除未使用的 CSS，不幸的是，没有可用的插件。因此，我们将使用手动非 wordpress 特定工具从您的站点中删除未使用的 CSS。
PurifyCSS 是最 友好的非开发人员工具 你可以找到处理未使用的 CSS。该工具有一个简单的 UI，让用户可以提供网站 URL 或 HTML 和 CSS 代码。对于 WordPress，我们将使用 URL 选项并提供指向您网站上各种页面的链接，让该工具从所有页面中获取 CSS 并针对未使用的 CSS 进行优化。
这是您应该放入该工具的页面的快速列表：
- 主页网址
- 您网站上每个类别的多个帖子页面 URL
└ 这是为了确保所有帖子元素都包含 CSS。
- 联系方式、关于、隐私以及您网站上可能拥有的各种不同页面。
- 存档页面、搜索页面、作者页面
- 自定义帖子类型页面
热点提示： 使用您使用或将来可能使用的所有主题元素创建“功能”帖子/页面，例如您通常使用的表格、图片库、代码、Pre、有序列表、无序列表、表格、选项卡、手风琴、古腾堡块， 等等。
在 PurifyCSS Online 工具中使用这个“功能”帖子 URL 来确保包含常用元素的 CSS。
打 清理 CSS 将所有相关 URL 类型从您的站点添加到 PurifyCSS Online 工具后，按钮。
复制该工具生成的新 CSS 并在您的网站上使用它。确保你 备份原来的style.css 在替换由 PurifyCSS 生成的新 CSS 之前，主题中的其他 CSS 文件。
小费： 您可以使用内置的 WordPress 主题编辑器来编辑主题的 CSS 文件，也可以使用 FTP/SFTP 程序连接到服务器并使用记事本编辑器轻松编辑文件。