PageSpeed insights 优化建议——减少未使用的CSS、缩减 CSS
在使用 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 文件体积
本文介绍了如何使用Purgecss工具移除WordPress主题中未使用的CSS样式，以减小CSS文件体积并优化前端性能。通过Gulp配置和示例代码，详细讲解了Purgecss的安装、使用及注意事项，包括处理动态生成的CSS类和与Tailwind CSS框架的配合。适合有一定Gulp使用经验的开发者阅读。
反注册WordPress主题或插件中的 JavaScript 和 CSS 文件
本文介绍了如何在WordPress中反注册插件加载的JavaScript和CSS文件，以减少不必要的HTTP请求并优化网站性能。通过使用wp_deregister_script和wp_deregister_style函数，开发者可以移除插件中多余的资源文件，从而提升页面加载速度并避免与主题代码的冲突。文章还提供了具体的代码示例，帮助开发者快速实现这一优化措施。
WooCommerce按需加载前端资源 提高页面打开速度
本文介绍了如何通过按需加载WooCommerce前端资源来提升页面打开速度。WooCommerce默认的CSS加载方式可能导致不必要的资源加载，影响性能。文章提供了具体的代码示例，展示如何根据不同的页面类型（如商品列表页、购物车页、结算页等）加载特定的CSS文件，从而优化网站性能。适合需要进行WooCommerce定制开发的用户参考。
仅在特定的 WordPress 页面上按需加载 JavaScript，优化页面性能
本文介绍如何在WordPress中仅在特定页面上按需加载JavaScript，以优化页面性能和减少服务器开销。通过使用wp_enqueue_script()函数和条件判断，可以灵活控制脚本的加载，避免不必要的资源浪费。适合需要优化页面加载速度的WordPress开发者参考。
为了提升网站性能，减少未使用的 CSS 是关键。虽然减少插件数量可一定程度上优化，但更有效的方式是手动清理主题或插件代码中的冗余 CSS。通过工具或手动剔除无用样式，并按需加载 CSS，可以显著提升网站加载速度，改善用户体验。
