安装 Lighthouse CLI

Lighthouse 工具

• 在 DevTools 中选择 Lighthouse 标签（可能需要点击 >> 展开）
• 选择测试类型（性能、SEO、无障碍等）
• 选择设备（移动端/桌面端）
• 点击“生成报告”
• 报告包含性能评分、优化建议和详细指标

Performance 面板

• 用于深入分析运行时性能
• 点击录制按钮后刷新页面
• 查看详细的加载时间线和性能指标
• 分析主线程活动、渲染时间等

核心性能指标查看

Web Vitals 指标

• 在 DevTools 中进入 Performance Insights 面板
• 或使用控制台命令：console.log(performance.getEntriesByType('navigation'))

关键指标

• LCP绘制）：PerformanceObserver 监测
• FID（首次输入延迟）：现已演变为 INP
• CLS（累积布局偏移）：Chrome 已内置监测

实用技巧

网络节流模拟

• 在 Network 面板点击“Online”下拉菜单
• 选择不同的网络条件（3G、4G、慢速3G等）
• 或自定义网络速度

缓存控制

• 在 Network 面板勾选“Disable cache”禁用缓存测试首次加载
• 不勾选则测试缓存加载

性能录制

• Performance 面板中点击“Screenshots”可录制屏幕变化
• 有助于可视化分析加载过程

扩展工具

Chrome 扩展

• PageSpeed Insights（谷歌官方）
• Web Vitals（实时显示核心指标）

命令行工具

# 运行测试
lighthouse https://example.com --view

在线工具（补充）

1. PageSpeed Insights：https://pagespeed.web.dev/
2. WebPageTest：https://www.webpagetest.org/
3. GTmetrix：https://gtmetrix.com/

最佳实践建议

1. 多次测试取平均值
2. 在不同网络环境下测试
3. 使用无痕模式避免扩展干扰
4. 对比首加载和缓存加载
5. 关注真实用户指标（通过 Chrome UX Report）

这些工具组合使用可以全面分析网页加载性能,找出瓶颈并进行优化。