技能介绍

要解决的问题

Core Web Vitals 是 Google 用于排名的页面体验信号，包含 LCP、CLS、INP 三个指标。团队往往等 Lighthouse 报告出来才发现分数难看，但报告只告诉你“哪里慢”，不告诉你“哪段 HTML 导致了慢”。CoreWebVitals 技能解决的正是这个问题：在写页面的阶段静态审计 HTML，把那些与 CWV 问题高度相关的写法提前揪出来。

核心能力与检查方式

技能按三个指标分组审计：

LCP（≤ 2.5s）：先识别首屏最大的可见元素（hero 图、CSS background-image、大标题、视频封面），再检查阻塞项——LCP 图片缺少 fetchpriority="high"、被错误地 loading="lazy"、未通过 <link rel="preload"> 预加载、<head> 中存在渲染阻塞的 CSS/JS、图片仍是 JPG/PNG 旧格式。字体方面检查关键字体是否 preload、@font-face 是否设置 font-display: swap。
CLS（≤ 0.1）：检查 <img>/<iframe> 是否缺失宽高属性、广告位与 embed 是否预留固定空间、字体导致的 FOIT、动态注入内容是否挤占现有布局，以及动画是否使用 top/left/width/height 这类触发重排的属性（应改用 transform）。
INP（≤ 200ms）：检查 <script> 是否缺 async/defer、内联脚本是否超过 50 行、是否在 HTML 属性里直接挂事件处理器、第三方脚本是否同步加载，并统计第三方脚本数量（0–3 通过，4–8 警告，9+ 直接 FAIL）。
通用项：CSP、dns-prefetch、preconnect 是否就位，DOM 元素数是否超过 1500，移动端是否声明 width=device-width 的 viewport。

最后按问题数量给出风险等级：0 个为 LOW，1–3 个为 MEDIUM，4+ 个为 HIGH。

适用边界

这是静态模式审计，不是实测工具——真实的 CWV 分数需要 Lighthouse 或 CrUX 的真实浏览器数据。技能也明确豁免了几类情况：Next.js 会自动处理图片优化与字体加载，需先判断框架再标记；内联关键 CSS 是有意为之，不算 CLS 风险；type="module" 的脚本天然延迟，不应标记为渲染阻塞；AMP 页面有自己的性能模型。在隔离环境加载、不占用主线程的第三方脚本不计入 INP 统计。