前端性能优化核心指标介绍

一、网页性能优化核心指标（一定要会）

✅ 1️⃣ Core Web Vitals（最重要）

这是 Google 官方排名 & 体验指标。

指标	全称	衡量什么	理想值
LCP	Largest Contentful Paint	首屏最大内容渲染时间	≤ 2.5s
FID	First Input Delay	首次交互延迟	≤ 100ms
INP	Interaction to Next Paint（取代 FID）	交互响应	≤ 200ms
CLS	Cumulative Layout Shift	页面抖动	≤ 0.1

✅ SEO / 性能 / 用户体验核心

✅ 2️⃣ 传统性能指标（辅助）

指标	含义
TTFB	首字节时间（后端 + 网络）
FP / FCP	首次绘制
TTI	可交互时间
Load	页面完全加载

二、Chrome DevTools → Performance 面板

✅ 它是干嘛的？

“还原浏览器执行全过程”
用来找 为什么慢

✅ 核心能力

JS 执行耗时
主线程阻塞
渲染 / 重排 / 重绘
用户交互延迟
FPS / 卡顿

✅ Performance 里你要看什么？

1️⃣ 时间轴（Timeline）

从左到右是时间
每一段颜色代表：
- JS（黄）
- Rendering（紫）
- Painting（绿）

2️⃣ Main Thread（最重要）

长任务（Long Task > 50ms）
JS 执行是否阻塞

3️⃣ Events & Timings

LCP / CLS 标记
用户输入响应点

✅ 适合场景

✅ 页面卡顿
✅ 操作不流畅
✅ JS 性能问题
✅ 动画掉帧

📌 适合“工程师深挖”

三、Lighthouse（DevTools / CLI）

✅ Lighthouse 是什么？

“基于规则的自动性能评测工具”

会给你一个 分数 + 建议清单

✅ Lighthouse 四大模块

模块	说明
Performance	性能
Accessibility	可访问性
Best Practices	最佳实践
SEO	搜索引擎友好

✅ Lighthouse 性能指标来源

Lighthouse 的 Performance 分数，主要基于：

LCP
INP
CLS
Speed Index
TBT（Total Blocking Time）

✅ 输出你会看到什么？

✅ 分数（0–100）
✅ “Opportunities”（可优化项）
✅ “Diagnostics”（诊断信息）

示例：

图片未压缩
JS 阻塞渲染
未使用缓存

✅ 适合场景

✅ 快速评估页面质量
✅ 回归测试
✅ 测试 / 产品验收
✅ CI 自动化

📌 适合“发现问题”

四、PageSpeed Insights（PSI）

✅ 它是什么？

Google 官方线上性能检测工具

🔗 https://pagespeed.web.dev/

✅ PSI 的两类数据（非常重要）

✅ 1️⃣ Field Data（真实用户数据）

来自 Chrome 用户
最近 28 天
Core Web Vitals ✅ 最真实、最权威

✅ 2️⃣ Lab Data（实验室数据）

基于 Lighthouse
模拟网络 / 设备
可复现

✅ PSI 看什么？

✅ Core Web Vitals 通过 / 未通过

LCP / INP / CLS 是否达标
SEO 强相关

✅ 性能建议

和 Lighthouse 类似，但：

更偏 Google 视角
更偏 SEO & 用户体验

✅ 适合场景

✅ SEO 评估
✅ 上线前质量评估
✅ 对外展示性能
✅ 与竞品对比

五、三者如何配合使用（重点）

#✅ 推荐工作流（实战）

text

PageSpeed Insights
   ↓（发现问题）
Lighthouse
   ↓（定位问题类型）
Performance
   ↓（精确定位代码）

✅ 对比总结表（记住这个）

工具	强项	适合谁
Performance	精确分析	前端 / 工程
Lighthouse	快速诊断	测试 / 评审
PSI	真实用户数据	SEO / 产品

六、测试人员常用结论模板（可直接用）

页面 LCP 为 3.2s，未达标（≤2.5s）
CLS 为 0.18，存在布局抖动
Lighthouse Performance 得分 62
主要问题为图片资源未优化及 JS 阻塞渲染

七、一句话总结（记住）

Performance 告诉你“为什么慢”
Lighthouse 告诉你“哪里不对”
PageSpeed Insights 告诉你“真实用户体验好不好”

如果你愿意，我可以：

帮你把这套内容整理成 测试文档 / PPT
用你的网站跑一遍实例讲解
或做一份 性能测试 checklist

直接告诉我你用来干什么即可 ✅

前端性能优化核心指标介绍 ​

一、网页性能优化核心指标（一定要会） ​

✅ 1️⃣ Core Web Vitals（最重要） ​

✅ 2️⃣ 传统性能指标（辅助） ​

二、Chrome DevTools → Performance 面板 ​

✅ 它是干嘛的？ ​

✅ 核心能力 ​

✅ Performance 里你要看什么？ ​

1️⃣ 时间轴（Timeline） ​

2️⃣ Main Thread（最重要） ​

3️⃣ Events & Timings ​

✅ 适合场景 ​

三、Lighthouse（DevTools / CLI） ​

✅ Lighthouse 是什么？ ​

✅ Lighthouse 四大模块 ​

✅ Lighthouse 性能指标来源 ​

✅ 输出你会看到什么？ ​

✅ 适合场景 ​

四、PageSpeed Insights（PSI） ​

✅ 它是什么？ ​

✅ PSI 的两类数据（非常重要） ​

✅ 1️⃣ Field Data（真实用户数据） ​

✅ 2️⃣ Lab Data（实验室数据） ​

✅ PSI 看什么？ ​

✅ Core Web Vitals 通过 / 未通过 ​

✅ 性能建议 ​

✅ 适合场景 ​

五、三者如何配合使用（重点） ​

#✅ 推荐工作流（实战） ​

✅ 对比总结表（记住这个） ​

六、测试人员常用结论模板（可直接用） ​

七、一句话总结（记住） ​

前端性能优化核心指标介绍

一、网页性能优化核心指标（一定要会）

✅ 1️⃣ Core Web Vitals（最重要）

✅ 2️⃣ 传统性能指标（辅助）

二、Chrome DevTools → Performance 面板

✅ 它是干嘛的？

✅ 核心能力

✅ Performance 里你要看什么？

1️⃣ 时间轴（Timeline）

2️⃣ Main Thread（最重要）

3️⃣ Events & Timings

✅ 适合场景

三、Lighthouse（DevTools / CLI）

✅ Lighthouse 是什么？

✅ Lighthouse 四大模块

✅ Lighthouse 性能指标来源

✅ 输出你会看到什么？

✅ 适合场景

四、PageSpeed Insights（PSI）

✅ 它是什么？

✅ PSI 的两类数据（非常重要）

✅ 1️⃣ Field Data（真实用户数据）

✅ 2️⃣ Lab Data（实验室数据）

✅ PSI 看什么？

✅ Core Web Vitals 通过 / 未通过

✅ 性能建议

✅ 适合场景

五、三者如何配合使用（重点）

#✅ 推荐工作流（实战）

✅ 对比总结表（记住这个）

六、测试人员常用结论模板（可直接用）

七、一句话总结（记住）