首次使用关键 CSS 进行绘制

什么是关键CSS？

关键CSS是确定用户打开页面时看到的网页的第一个区域（称为首屏）所需的CSS规则，并以HTML内联方式呈现。这种技术允许浏览器在不等待外部 CSS 文件的情况下绘制页面。

解决渲染阻塞问题

默认情况下，浏览器会等待页面绘制，直到下载完所有 CSS 文件。这会导致严重的延迟，尤其是在具有大型 CSS 文件的项目中。我们通过关键的 CSS 技术消除了这种等待：

1. 确定页面顶部所需的 CSS 规则。
2. 将这些规则内联添加到 HTML 的 部分。
3. 使用 media="print" onload="this.media='all'" 异步加载主 CSS 文件。

工具

Critical（npm 包）、Penthouse 和 PurgeCSS 等工具可帮助您自动化此过程。您可以将其集成到 Laravel Mix 或 Vite 管道中。

获得

• 首次内容绘制 (FCP) 时间减少 40-60%。
• 用户立即感觉到网站正在加载。
• Lighthouse 性能得分提高 10-20 分。