决定是否应采用关键 CSS
以证据为起点，而不是以审计标签为依据。在代表性的移动和桌面配置上记录优先页面的冷缓存加载。检查瀑布图和跟踪：样式表是否正在延迟首次内容渲染，并且其大小或位置是否足以成为重要因素？DevTools Coverage 会显示一次会话中使用的 CSS，而不是每个路由或每种状态。
先尝试维护成本更低的工作：删除未使用规则、压缩并启用压缩输出、仅在需要的路由加载样式，并避免使用简单的 CSS @import 链。web.dev 将提取和延迟视为高级技术。
经测量的首次渲染延迟与 CSS 相关、冷访问很重要且初始布局能被保持。
如果瓶颈来自服务器延迟、图像、字体、JavaScript 或已足够小的样式表，内联 CSS 很可能不会带来帮助。
将初始视口定义为测试矩阵
初始视口（有时称为“fold 以上”）是访客滚动之前看到的内容。它没有统一的高度：设备、缩放、语言、cookie 和内容变体会改变它。单个桌面截图可能遗漏手机或翻译后的标题。
使用命名的配置文件。包含窄屏和宽屏布局、关键断点、不同的登录结构，以及任何可能进入页面顶部的同意横幅、促销、维护信息或校验错误。
记录用于生成和测试该集合的模板、视口、语言、身份验证、同意和顶部页面变体。
测试快速滚动、菜单和表单聚焦；如果延迟的规则会在完整 CSS 应用前出现其控制，会被视为不安全。
从单一可信源提取小量样式
从生产构建生成关键 CSS。提取可以识别在某一视口中使用的规则，但要审查条件、动态和过渡规则。不要将第二套设计系统手动复制到模板中；随着组件和标记演进，它会出现偏差。
保持输出与发布一起生成并版本化，源 CSS 保持权威。仅内联在首次可用状态所需的规则。大型内联块会增加 HTML 大小，并且不能像外部 CSS 那样在后续页面从缓存复用。在称改动为改进前，比较冷访问和热访问的表现。
跟踪压缩后内联字节数、剩余样式表字节数和重复规则。减少一个阻塞请求并不一定带来净收益。
当提取为空、超过内联大小预算或与已审查基线意外不同步时，触发构建报警。
安全加载剩余 CSS 并尊重策略约束
剩余的样式表必须在页面下方内容和后续状态看起来完整之前到达。一种常见模式是预加载（preload）CSS 为 style，然后在加载完成后将其切换为 stylesheet，同时提供无 JavaScript 的回退。Preload 会尽早请求资源；它不会应用 CSS。样式不完整会导致可见重绘。
在使用内联加载处理器之前检查 Content Security Policy。web.dev 提示策略可能禁止内联 onload JavaScript，因此使用与策略兼容的加载器或其它设计。禁用 JavaScript 时也要测试。带媒体查询的文件适用于真正的条件样式（例如打印）；不匹配的媒体查询不会阻塞渲染，尽管它可能仍会下载。
验证没有 JavaScript 的访客能否收到完整 CSS 并完成优先流程。
单独调查首次视口出现的迟到字体或图片；关键 CSS 不会改变它们的获取行为。
测试视觉、功能与缓存回归
在每个命名视口和顶部页面状态上使用视觉比对。检查无样式文本、重叠、隐藏导航、缺失焦点指示、布局位移和延迟应用延迟样式时的突变。测试键盘导航、触摸路径、错误和快速滚动。如果延迟的规则使控件无法使用，则该规则应属于关键路径或需要修改设计。
测试冷访问和热访问。冷测显示移除 CSS 等待是否改善渲染；热测显示重复内联字节的代价。测试已缓存的先前 HTML 和部署后的回访。保留兼容的资源，因为已缓存的 HTML 可能会请求它们，并且不要覆盖带指纹的样式表 URL。
比较首次内容（First Contentful Paint）和主要可见内容（Main Visible Content），然后用跟踪解释收益或回归。
包含焦点、对比度、动画偏好、缩放和可读顺序。渲染更快不等于通过，无障碍问题仍然不合格。
将其作为可逆的交付功能运营
给此流水线指定负责人并记录其输入、产物、模板、测试配置文件和内联大小限制。每当 CSS、标记、组件库、功能开关或位于“fold 以上”的第三方发生变化时运行测试。Coverage 可指导审查，但一次记录无法证明某条规则在所有路由、视口、语言或状态下都是安全的。
在可行时将此功能作为可回滚配置发布。记录已知良好的样式表路径、工件版本、构建标识和恢复方法。如果出现回归，先恢复兼容交付，然后诊断遗漏的状态。SIU 使用该工作流在客户影响扩散前稳定关键路径。
新的横幅、同意流程、语言、本地断点或账户布局都需要重新生成并测试。
将模板和交付配置恢复为兼容的生成；不要编辑旧文档可能引用的不变资产 URL。