并分离了您的 CSS，并且通过附加组件加载

ishanijerin1 · Post by **ishanijerin1** » Tue Mar 18, 2025 10:17 am

方的 CSS ，否则 <head> 之外的 CSS 仍将被视为阻止渲染。

通过这种方式按需加载 CSS 可以减少关键链，消除灯塔中的“删除未使用的 CSS”警告，并减少 CPU 执行，因为浏览器需要解析的选择器更少。

当然，CSS 压缩也是必须的，但是大多数现代构建过程都会通过删除所有不必要的字符和注释等来自动减少 CSS（和 JS）文件大小。

4. 通过内联关键 CSS 来删除阻止渲染的 CSS
如果您已经精简、最小化了最少或零附加 CSS，那么您可能能够内联任何剩余的折叠 CSS。

内联关键 CSS 涉及直接在 HTML 中的 <style></style> 标记中输出 CSS，而不是向 CSS 文件发出请求，从而避免了额外的请求并允许元素更快地呈现。如果CSS 文件在服务器上压缩时小于 14KB，您应该会受益于更快的渲染时间，并且 FCP 和 LCP 的关键指标会受到积极影响。

在追求最佳性能的过程中，这一步通常是法国号码最难实现的一步；绝大多数网站和大多数 CMS 平台几乎总是存在一定程度的渲染阻塞 CSS。我们之所以能够实现这一点，是因为我们对网站进行了大量定制，而这些定制建立在支持这些修改的 WordPress 开源性质之上。

内联关键 CSS 所带来的不同可以通过下面的WebPageTest瀑布图来演示，该图模拟了通过 4g 连接的低端设备。

在第一个瀑布图中，您可以看到渲染阻塞 cri