在使用 PageSpeed Insights 检查网站性能时，常常会看到“减少未使用的 CSS”和“缩减 CSS”这样的优化建议，特别是在没有进行过性能优化的网站上，这两项建议几乎总是出现在报告中。
为什么会出现这种情况呢？原因在于，我们在建设网站时所使用的 WordPress 主题和插件，为了满足更广泛的需求，往往会内置大量适配不同场景的 CSS。这样的设计虽然在功能实现上很灵活，但对网站性能来说，却意味着许多我们并不需要的 CSS 会被加载到页面上，导致页面加载变慢，从而影响网站的整体速度，并触发 PageSpeed Insights 提出的优化建议。
怎么减少未使用的CSS
对于不熟悉技术的站点运营者，PageSpeed Insights 通常会给出一个简单的建议：“减少或改变加载未使用 CSS 的 WordPress 插件数量”。这个方法虽然简单有效，但对于大部分网站来说，插件往往是必须的。而在使用多功能高级主题时，未使用的 CSS 更可能来源于主题本身，而非插件。
如果希望从根本上减少未使用的 CSS，最有效的做法就是清理主题或插件代码中的冗余 CSS。对于具备一定技术能力的朋友，可以参考以下步骤进行手动优化：
- 分析页面加载的 CSS：使用浏览器开发者工具（如 Chrome DevTools）查看页面加载时实际使用的 CSS 和未使用的 CSS。
- 精简和剔除无用的 CSS 规则：根据分析结果，删除页面中未使用的 CSS 代码，确保只保留与当前页面相关的样式。
- 使用工具自动优化：可以使用一些工具，如 PurifyCSS 或 UnCSS，这些工具能够帮助自动剔除未使用的 CSS 代码。
- 将 CSS 文件按需加载：根据页面需求，采用按需加载 CSS 的方式，减少不必要的 CSS 文件加载。
关于减少未使用的CSS的实操指南
本站之前也发表过一些关于减少未使用的CSS的实操指南，有一定技术能力的朋友可以参考下面的文章尝试优化一下。
使用 Purgecss 删除WordPress主题中未使用的 CSS 来减小 CSS 文件体积
开发WordPress主题的时候，为了保证效果，同时加快开发速度，我们经常会使用一些 CSS 框架。主题开发完成后，这些 CSS 框架中其实有很大一部分 CSS 样式是没有在主题中使用的。 「删除未使用的 CSS」是网站前端优化中必不可少的一个步骤。如果不使用工具，我们是无法手工完成这个步骤的，太费时间不说，还容易遗漏。而目前 WordPress 还没有很方便的移除未使用的CSS 的工具或插件，这就导致了很多朋友做…
反注册WordPress主题或插件中的 JavaScript 和 CSS 文件
在开发WordPress主题的时候，为了实现更好的效果和加快开发速度，我们经常会使用一些插件，很多插件会注册自己的 JavaScript 文件和 CSS 文件到前端，为了和主题更好的结合，我们可能会把插件的 CSS 或 JS 文件集成到我们开发的主题中。这时候插件自带的 JavaScript 文件和 CSS…
WooCommerce按需加载前端资源 提高页面打开速度
按需加载是网站前端优化中很重要的一条原则， 而WooCommerce为我们提供的前端资源中，却没有很好的遵循这一原则，WooCommerce虽然对 CSS 进行了一些分离，但是分离得并不合理，这就导致了页面中出现很多不必要的 CSS。 对于使用默认WooCommerce样式的网站来说，这样的设置可能没有什么问题。但是如果我们需要对网站进行较为精细的定制开发，就避免不了要添加很多 CSS，如果把这些 CSS 放在一个文件了，这个文件很快就 […]
仅在特定的 WordPress 页面上按需加载 JavaScript，优化页面性能
在WordPress主题或插件中加载 JavaScript 时，官方推荐的方法是使用 wp_enqueue_script() 来加载，该函数可以指定 JavaScript 的依赖库，指定 JavaScript 文件的版本，设置在页面头部或者底部加载，非常灵活和方便。但是，该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是，我们可以通过 WordPress…
为了提升网站性能，减少未使用的 CSS 是关键。虽然减少插件数量可一定程度上优化，但更有效的方式是手动清理主题或插件代码中的冗余 CSS。通过工具或手动剔除无用样式，并按需加载 CSS，可以显著提升网站加载速度，改善用户体验。
