删除 WordPress 中未使用的 CSS 的正确方法

拥有大量未使用的代码会大大降低您的网站速度。 WordPress 中常见的嫌疑人之一是不必要的 CSS 代码。 幸运的是，有几种方法可以防止您的网站性能不佳并停止破坏用户体验。 虽然一种方法是手动方法，但它需要大量的开发经验。 另一个对初学者更友好的选择是专注于现有工具并删除 WordPress 中由主题和插件添加的未使用的 CSS，只需单击几下即可。

如何成功删除 WordPress 中未使用的 CSS

您可能知道，WordPress 使用了许多插件、主题和其他第三方库。 它们都带来了许多功能来改善您的网站功能。 但是，大多数情况下，大多数都带有大量您实际上不使用的功能。 然而，如果您不专门使用 WordPress 专业人员来维护和优化您的网站，它将为每个访问者加载所有内容。 这会导致传输大量未使用的 CSS 并减慢网站本身的速度。 因此，性能不佳会减少您的网站流量并降低您的搜索排名。

在许多情况下，删除 100% 未使用的代码非常困难，几乎是不可能的。 但即使删除最少量或冲突的脚本，也会提高您的网站性能。 除了典型的代码“最小化”之外，还有几种方法可以在不破坏您的网站的情况下减少未使用的 CSS 代码的影响。

为什么未使用的 CSS 还在那里？

因为 CSS 负责设置 WordPress 网站外观的样式，所以您可以找到的每个主题都包含它。 不仅主题，而且许多插件都有自己的样式和自定义选项。 更不用说各种网站构建器、库，甚至是单个元素，您只使用其中的一小部分。 一般来说，一些插件不会对网站产生太大影响。 但是，如果有很多，累积效应真的会减慢您的网站。

删除未使用 CSS 的工具

虽然有许多工具可以帮助您删除未使用的 CSS，但大多数工具并不适用于所有情况。 当然，对于静态网站，它们中的大多数都会很有帮助。 但是，动态网站通常通过使用 JavaScript 注入 CSS 类来加载和设置元素。 这是更难的部分，因为很难检测到这些类。 例如，动态样式产品和购物车页面的电子商务网站。

在开发过程中考虑它

从一开始就摆脱未使用的 CSS 的一种解决方案是在网站开发期间考虑它。 您基本上可以将 CSS 代码拆分为不同的文件，每个文件都有特定的用途。 但是，大多数人更喜欢使用 WordPress 主题来避免从头开始构建网站。 这就是您必须非常熟练或找到 WordPress 专家为您做这件事的地方。

使用 UnusedCSS 在线解决方案

另一种方法是使用像 UnusedCSS 这样的高级解决方案来轻松查找和清理您的 CSS 问题。 这个工具的优点是它能够扫描你的 JavaScript 文件并搜索注入。 它的一些最显着的特点是：

• 自动查找未使用的 CSS 规则
• 为您提供干净的 CSS 供下载
• 探索响应式设计和媒体查询规则
• 检查网站是否有更改
• 更改预览
• 和更多

PurgeCSS 用于删除额外的 CSS

这是另一个在开发过程中非常有用的工具。 那些使用 Bootstrap、Foundation 和类似 CSS 框架的人会发现它非常有用。 由于您可能只使用了一小部分 CSS 规则，因此该工具可以帮助您过滤掉所有未使用的样式。 基本上，这是使您的 CSS 文件显着减小的好方法。

自动优化插件

下一个是非常流行的 WordPress 插件。 有了它，您可以轻松地缩小、组合和缓存样式。 它在页眉中注入必要的规则、内联关键 CSS、缩小 HTML 并将脚本移动到页脚。 本质上，它可用于实现图像的“延迟加载”、优化字体和异步非组合 JavaScript。 每个网站都可以从这个广泛的插件中受益。

WP火箭

您可以找到的最适合初学者的选项之一。 WP Rocked 为您的页面和速度优化提供有效的解决方案。 它不仅可以让您在速度测试中获得满意的结果，而且可以明显改善访问者的用户体验。 当您想删除未使用的 CSS 时，只需激活它，打开“文件优化”并继续“优化 CSS 交付”选项。 它将为您提供一个仅包含必要的 CSS 规则的 CSS 文件，该文件将在其他文件之前加载。 此外，WP Rocket 将自动清除缓存，并允许您缩小和聚合 CSS 文件。

使用 Asset CleanUp 删除未使用的 CSS

您可以使用 Asset CleanUp 从主题和插件中卸载未使用的文件。 它允许您分别为每个页面完成此任务。 虽然这有点复杂且耗时，但它是一种非常有效的使用方法。 就像其他一些插件一样，它具有“测试模式”选项，以防止对您的实时网站产生不良影响。 但是，资产清理也可以帮助您删除未使用的 JavaScript 文件。 最后，当您测试访问者看到的内容时，您可以简单地选择卸载所有不必要的内容。

使用 Perfmatters 优化你的 CSS

此列表中最后但并非最不重要的是高级性能插件之一。 Perfmatters 将帮助您删除未使用的 CSS 和 JavaScript。 注册、安装和激活后，您将能够访问其脚本管理器。 除其他选项外，这可以帮助您轻松修改每个页面或帖子。 本质上，它为您提供了一个简单的仪表板菜单，您可以使用它来删除单独页面或整个网站上任何未使用的 CSS 和 JavaScript。 就像 CSS 一样，您可以使用它来组合或缩小 JavaScript 文件以获得更好的性能。

提高网站速度的其他注意事项

考虑使用 CDN 来交付 CSS 文件——以显着降低 CSS 或任何其他文件的加载速度。

定期缩小和合并大部分 CSS 文件——从 WordPress 中的 CSS 中删除不必要的规则、类和多余字符。 但是，由于代码的复杂性、此类文件的大小以及后续的额外优化，这是否对所有大型网站都有帮助是有争议的。

完全删除 WordPress 中未使用的 CSS 的每一部分几乎是不可能的。 但是，您可以使用上述方法相当公平地加速您的网站。 这取决于案例的数量，但如果您的 WordPress 网站确实有大量未使用的代码，那么差异将非常明显。 另一方面，有时即使是很小的变化也可能意味着一切。 虽然目标不是拥有世界上最快的网站，但细微的变化很重要。 但是，其他努力应该集中在内容和对用户的有用性上，而不是在搜索引擎测试中赢得最高速度的位置。