audit-speed

Audit Speed

深入审计 Core Web Vitals，并通过根因分析树提供资源优化建议。

Core Web Vitals 阈值

指标	良好	需要改进	较差
LCP（最大内容绘制）	< 2.5s	2.5s - 4.0s	> 4.0s
CLS（累积布局偏移）	< 0.1	0.1 - 0.25	> 0.25
INP（交互到下一次绘制）	< 200ms	200ms - 500ms	> 500ms
FCP（首次内容绘制）	< 1.8s	1.8s - 3.0s	> 3.0s
TTFB（首字节时间）	< 800ms	800ms - 1800ms	> 1800ms

开始之前

收集以下背景信息：

1. 哪些页面？ 首页、关键落地页或特定的慢速页面。
2. 当前得分。 如果用户有 Lighthouse 或 PageSpeed Insights 数据，请从这里开始。
3. 技术栈。 CMS、框架、托管服务——这决定了可采用哪些优化方式。
4. 已知限制。 无法移除的第三方脚本、限制优化空间的设计要求。

如果没有可用数据，建议使用 Google PageSpeed Insights 检查关键 URL。

LCP 根因分析树

LCP 衡量最大可见元素完成渲染的时间。请按以下方式诊断：

TTFB 是否较慢（> 800ms）？

• → 服务器响应时间问题
• 检查：托管服务质量、CDN 配置、数据库查询、服务端渲染时间
• 修复：升级托管服务、添加 CDN、优化服务端代码、启用缓存

LCP 元素是否为图像？

• → 图像优化问题
• 检查：图像格式（使用 WebP/AVIF）、图像尺寸（提供响应式尺寸）、LCP 图像是否启用了延迟加载（不应启用延迟加载）
• 修复：转换为现代格式、添加 width/height 属性、为 LCP 图像使用 fetchpriority="high"、预加载 LCP 图像

LCP 元素是否为文本？

• → 字体加载问题
• 检查：阻塞渲染的自定义字体、字体文件大小、font-display 策略
• 修复：使用 font-display: swap 或 optional、预加载关键字体、仅保留实际使用的字符并生成子集字体

是否有阻塞渲染的 CSS/JS 延迟了 LCP？

• 检查：<head> 中的大型 CSS 文件、内容显示前同步执行的 JS
• 修复：内联关键 CSS、延迟加载非关键 CSS、异步加载/延迟加载 JS

CLS 根因分析树

CLS 衡量意外的布局偏移。请按以下方式诊断：

图像/视频是否缺少尺寸？

• → 浏览器无法在加载前预留空间
• 修复：为所有 <img> 和 <video> 元素添加 width 和 height 属性，使用 CSS aspect-ratio

广告或嵌入内容是否动态注入内容？

• → 动态内容将现有内容向下推移
• 修复：使用 min-height 为广告位预留空间，对延迟加载的内容使用 contain-intrinsic-size

字体是否导致文本重排？

• → 自定义字体加载时出现 FOUT（无样式文本闪现），导致布局偏移
• 修复：使用 font-display: optional（不进行替换，不会发生偏移），或匹配后备字体的度量值

折叠线以上是否插入了动态内容？

• → 横幅、Cookie 提示或通知将内容向下推移
• 修复：使用覆盖层而非内联插入，或通过固定高度的容器预留空间

INP 根因分析树

INP 衡量对用户交互的响应能力。请按以下方式诊断：

主线程是否被长任务阻塞？

• 检查：JavaScript 执行时间、第三方脚本、大型 DOM
• 修复：使用 requestIdleCallback 或 setTimeout 拆分长任务，对大型模块进行代码拆分

事件处理程序是否执行了繁重的同步工作？

• 检查：触发大量 DOM 更新的点击处理程序、每次按键都进行表单验证
• 修复：对输入进行防抖处理、使用 requestAnimationFrame 更新视觉效果、将工作转移到 Web Worker

第三方脚本是否在争用主线程？

• 检查：分析工具、聊天组件、A/B 测试工具、社交媒体嵌入内容
• 修复：延迟到交互后再加载、对嵌入内容使用 loading="lazy"、考虑移除价值较低的脚本

资源分析

拆解页面总大小：

资源类型	大小	评估	操作
HTML	[x] KB	[正常/较大]	压缩，减少内联样式/脚本
CSS	[x] KB	[正常/较大]	移除未使用的 CSS、压缩、提取关键 CSS
JavaScript	[x] KB	[正常/较大]	代码拆分、摇树优化、延迟加载非关键脚本
图片	[x] KB	[正常/较大]	使用现代格式、提供响应式尺寸、对首屏以下内容启用延迟加载
字体	[x] KB	[正常/较大]	子集化、限制字体系列/字重、预加载关键字体
第三方资源	[x] KB	[正常/较大]	检查必要性、延迟加载、尽可能自行托管

基准：

• 页面总大小低于 1.5 MB 为良好
• 大多数网站的 JavaScript（压缩后）应低于 300 KB
• CSS（压缩后）应低于 100 KB
• 第一方字体应低于 100 KB

输出格式

速度审计：[URL 或域名]

Core Web Vitals

指标	数值	评级	根本原因
LCP	[数值]	良好 / 需要改进 / 较差	[已识别的原因]
CLS	[数值]	...	...
INP	[数值]	...	...
FCP	[数值]	...	...
TTFB	[数值]	...	...

资源明细 [资源分析表格]

优先修复项

按影响程度排列每项未达标指标的修复措施：

1. [指标]：[根本原因]

   • 当前值：[数值]
   • 目标：[阈值]
   • 修复方法：[具体操作]
   • 预估影响：[高/中/低]

2. ...

快速见效项 列出只需少量工作即可完成的优化：

• 为图片添加 width/height
• 为 LCP 图片设置 fetchpriority="high"
• 延迟加载非关键 JavaScript
• ...

---

专业提示： 使用免费的 CWV Impact Calculator 估算修复 Core Web Vitals 对流量的影响，并使用 Critical CSS Generator 提取 首屏 CSS。SEOJuice MCP 用户可以运行 /seojuice:page-audit [domain] [url]，即时获取 CWV 评分、Lighthouse 数据和资源明细。