器上压缩时小于 14KB,染时间,并且 FCP 和 LCP 的关键指标会受到积极影响。
在追求最佳性能的过程中,这一步通常是最难实现的一步;绝大多数网站和大多数 CMS 平台几乎总是存在一定程度的渲染阻塞 CSS。我们之所以能够实现这一点,是因为我们对网站进行了大量定制,而这些定制建立在支持这些修改的 WordPress 开源性质之上。
内联关键 CSS 所带来的不同可以通过下面的WebPageTest瀑布图来演示,该图模拟了通过 4g 连接的低端设备。
在第一个瀑布图中,您可以看到 法国号码 渲染阻塞 critical.css 文件是第 3 个请求。在这里,所有重要的“开始渲染”和 FCP 垂直绿线出现在 2.3 秒标记处。
关键渲染瀑布图 - 较慢
但在内联关键 CSS 文件(压缩后约 8KB)后,运行相同测试时差异非常显著,因为开始渲染和 FCP 时间快了 500 毫秒以上。尽管由于包含内联 CSS 的 HTML 稍大,第一个字节时间增加了约 100 毫秒。
关键渲染瀑布图 - 更快
以响应式(且负责任)的方式生成图像
优化不佳的图片会对性能和核心网络要素产生重大影响,尤其是出现在首屏的图片。针对图片性能的最佳实践也与更好的可访问性和技术 SEO 因素密切相关。