关键 CSS 是我在性能报告中经常看到但总是忽略的东西。我知道它是什么意思。这意味着只将渲染立即可见内容所需的 CSS 放入 <head> 中的 <style> 标签中，以便在第一个网络请求中获取，然后异步加载其余部分，这将有助于页面加载速度更快。
您可能也在 Lighthouse 性能报告中看到了提示。
我不是那种喜欢复杂构建流程的人，不幸的是，许多关键 CSS 工具都涉及将其包含在现有的构建流程中。
我了解到Jetpack Boost，它旨在（除了其他性能方面的事情之外）使 WordPress 网站的关键 CSS 变得更容易。拥有一个（免费的！）插件来处理这一点对我来说非常有吸引力。
Jetpack Boost 可在 WordPress 插件目录中免费获取，因此它的安装方式与任何其他插件一样。
激活插件会在 WordPress 管理菜单中添加一个“Jetpack Boost”项，该项会链接到一个方便的屏幕，该屏幕运行方式有点像 Lighthouse，但在 WordPress 中。而且您会发现，那里有一个选项可以生成关键 CSS。我所要做的就是启用该功能，Jetpack Boost 就会开始工作。
该过程运行起来并不需要很长时间。我切换窗口查看了一下邮件，当我切换回来时，它已经完成了。而且，嘿，看看它在我偷懒的时候为我做了什么
只需点击一个按钮就能做到这一点，真是太棒了！但是我们必须进行苹果与苹果的比较，对吧？让我们回到 Lighthouse 中看看它怎么说。
我们甚至可以查看源代码以查看证据确实存在于布丁中
看到 Jetpack 团队如此专注于性能，并且为此专门开发了一个插件，这真的很酷。性能一直是 Jetpack 设置的一部分。但是像这样将其置于中心位置确实允许 Jetpack 以超越基本设置的方式处理更多有趣的性能方面的事情，例如评分和关键 CSS。我想我们会看到更多 Jetpack 的性能设置在某个时候迁移到新的插件。
感谢 Jetpack 团队！这是一个非常好的增强功能，并且非常及时，考虑到Google 最近对核心 Web 指标的推动及其对 SEO 的影响。