CWV 检查清单
我在宣布任何网站或模板可以启动前运行的 12 项检查清单。具体、简洁，专为实际使用而设计。
为什么简短的检查清单有效
长清单从来不会被使用。赢得胜利的 Core Web Vitals 检查清单足够短，工程师可以在推送到生产环境前快速完成，不会觉得这是一项苦差事。我的清单有 12 项。
在启动时通过全部 12 项的网站很少在生产环境中出现 CWV 问题。跳过三四项的网站最终会在第 75 百分位上失败，团队不得不在 Google 注意到后匆忙修复。
12 项内容
1. 英雄图像通过 head 中的 link rel=preload as=image 进行预加载。
2. 首屏图像具有明确的宽度和高度属性，以便在加载前预留布局空间。
3. WebP 格式，质量 82，上传前调整为实际渲染尺寸。
4. 关键 CSS 内联在 head 中，其余内容延迟异步加载。
5. 自托管网络字体，使用 font-display: swap。
6. 每个公开页面的初始 JavaScript 不超过 100KB。
7. 分析、营销和社交像素脚本全部延迟加载。
8. CSS Grid 列使用 minmax(0, 1fr) 而非 1fr，防止长内容溢出。
9. 在内容允许的情况下使用静态渲染。
10. 在源站前使用 Cloudflare 或等效 CDN。
11. 每周通过 Search Console > Core Web Vitals 测量现场数据。
12. 构建时 SEO linter 在出现回归时使构建失败。
如何实际使用它
在任何重大发布前手动检查列表。对于持续的工程工作，在 CI 中自动化第 6、8、11 和 12 项；其余项是在设计时发生的模板级检查，很少出现回归。
当 CWV 在生产环境中出现回归时，这种回归几乎总是由这十二项中的某一项被无声地违反而导致的。诊断流程是：检查列表、找到违反项、修复它、等待 28 天让 CrUX 更新、确认。