用途:指导优化 Google Core Web Vitals(CWV)——影响搜索排名的用户体验指标,属技术 SEO 范畴,为移动端和桌面端确认的排名因素。
覆盖三项指标:LCP(Largest Contentful Paint,最大内容绘制),衡量加载性能,即最大内容元素渲染完成的时间;INP(Interaction to Next Paint),衡量响应性,于 2024 年 3 月 12 日取代 FID;CLS(Cumulative Layout Shift),衡量视觉稳定性,即意外布局偏移。
目标阈值(基于第 75 百分位现场数据):LCP 良好 ≤2.5s,需改进 2.5–4.0s,差 >4.0s;INP 良好 ≤200ms,需改进 200–500ms,差 >500ms;CLS 良好 ≤0.1,需改进 0.1–0.25,差 >0.25。来源为 Google Page Experience。
初始评估:若项目存在根级 contextus.md 则读取并只加载相关模块;无 Contextus 时使用现有项目材料或用户提供的事实,缺失信息主动询问,不另建并行上下文系统。需识别:工具(GSC Core Web Vitals 报告、PageSpeed Insights、Chrome DevTools)、失败指标、页面类型(Hero、文章、产品、列表,LCP 候选元素不同)。
LCP 优化:慢服务器响应则降低 TTFB、使用 CDN、优化服务器;渲染阻塞资源则延后非关键 CSS/JS、内联关键 CSS;大图则用 WebP/AVIF、压缩、设宽高防止 CLS;客户端渲染则对首屏内容用 SSR/SSG;第三方脚本则异步加载、延后非关键项。LCP 候选通常是 Hero 图、大文本块、视频封面;首屏图片应使用 loading="eager",切勿懒加载 LCP。
INP 优化:长任务则拆分超过 50ms 的任务、用 requestIdleCallback 或 Web Workers;重型事件处理器则防抖/节流、延后非关键工作;主线程阻塞则减少第三方脚本;布局抖动则批量 DOM 读写、避免强制重排。
CLS 优化:无尺寸图片则始终设置 width 和 height;动态内容则为广告、嵌入预留空间、使用 min-height;网页字体则用 font-display: optional 或 swap、预加载关键字体;动画则用 transform 而非 top/left/width。为图片、广告、嵌入预留空间,定义加载前尺寸;避免在未预留空间的情况下在已有内容上方插入内容。
工具与监控:GSC 用于 Core Web Vitals 报告、URL 分组、现场数据;PageSpeed Insights 用于实验室与现场数据、移动与桌面;Chrome DevTools 用 Performance 面板、LCP 元素、布局偏移叠层。
输出格式:当前状态(哪些指标未达标)、按影响排序的修复建议、参考(Web Vitals、Page Experience)。
相关技能:image-optimization、google-search-console、mobile-friendly、rendering-strategies、site-crawlability。
调用说明:首次使用时可用 1–2 句说明覆盖范围与意义,再给主体输出;后续使用或用户要求跳过时直接输出主体。
限制:资料未提供具体定价、平台支持范围或安装方式。