Lighthouse是Chrome内置的网页加载速度量化评估工具，支持通过开发者工具、扩展程序、命令行及Network面板四种方式运行，并提供LCP、FCP、TBT、CLS、SI五大核心性能指标分析。
如果您希望量化评估当前网页的加载速度表现，Lighthouse 是 Chrome 浏览器内置的专业审计工具，可直接测量关键性能指标并生成结构化报告。以下是使用 Lighthouse 测试网页加载速度的具体操作路径：
一、通过开发者工具启动Lighthouse
此方式无需额外安装组件，适用于所有支持 Lighthouse 的现代 Chrome 版本，能对当前页面执行完整加载周期的自动化测试。
1、在谷歌浏览器中打开目标网页。
2、按下 F12 或右键页面空白处选择“检查”以打开开发者工具。
3、点击顶部标签栏中的 Lighthouse 选项卡（部分旧版显示为“Audits”）。
4、在左侧面板中确认设备类型（推荐勾选 移动设备 并启用 Slow 4G 网络节流 以模拟真实弱网场景）。
5、确保 Performance 类别已被勾选，其他类别可根据需要补充选择。
6、点击 “生成报告” 按钮，Lighthouse 将自动刷新页面并执行完整加载流程审计。
7、等待约 30–60 秒，报告生成后，页面将展示包括 LCP、FCP、TBT、CLS、SI 在内的全部核心性能指标数值与评分。
二、使用Chrome官方扩展程序运行Lighthouse
该方式独立于开发者工具界面，适合不熟悉 DevTools 的用户或需快速跨页面复用检测流程的场景，支持一键触发且保留历史报告入口。
1、访问 Chrome 网上应用店，搜索关键词 “Lighthouse”，确认发布者为 Google LLC 后点击“添加至 Chrome”。
2、安装完成后，刷新目标网页，在浏览器右上角工具栏找到 灯塔图标（形状为蓝色灯塔轮廓）。
3、点击图标，在弹出窗口中保持默认设置，或手动勾选 Performance 及所需维度。
4、点击 “Generate report”，插件将接管当前标签页并执行完整加载分析。
5、分析结束后，系统自动打开一个新标签页，展示完整的 HTML 格式报告，含可视化图表与逐项优化建议。
三、通过命令行工具（CLI）执行Lighthouse审计
该方式面向开发者，支持参数化配置、批量网址扫描及集成至 CI/CD 流程，可导出 JSON 或 HTML 报告用于自动化比对与归档。
1、确保本地已安装 Node.js 18.0+ 及 npm 包管理器。
2、在终端中执行命令：npm install -g lighthouse 完成全局安装。
3、运行审计指令：lighthouse https://example.com --output html --output-path=./report.html --view --emulated-form-factor=mobile --throttling-method=devtools。
4、命令执行期间，Chrome 将以无头模式启动，加载指定 URL 并完成全链路性能采集。
5、完成后，报告自动在默认浏览器中打开，同时生成本地 report.html 文件供离线查阅或团队共享。
四、利用Network面板辅助验证Lighthouse结果
Network 面板提供毫秒级资源加载时序视图，可用于交叉验证 Lighthouse 中识别出的慢资源、阻塞请求或异常重定向，增强诊断可信度。
1、在开发者工具中切换至 Network 标签页。
2、勾选 “Disable cache” 并点击左上角红色圆点启用录制。
3、刷新页面，观察瀑布图（Waterfall）中各资源的 Start Time、Duration、Latency 和 Transfer Size。
4、按 “Waterfall”列排序，定位耗时最长的请求；按 “Size”列排序，识别体积过大的未压缩资源。
5、右键任一请求，选择 “Block request URL” 可临时屏蔽可疑资源，重新运行 Lighthouse 对比性能变化。
五、查看并解读Lighthouse性能核心指标
Lighthouse 报告中 Performance 类别下的五个核心指标共同构成加载速度评价体系，每一项均对应明确的用户体验阶段，不可单独孤立看待。
1、Largest Contentful Paint (LCP)：测量最大内容元素（如主图、标题区块）在视口内完全渲染的时间，理想值 ≤ 2.5 秒。
2、First Contentful Paint (FCP)：记录页面首次向用户呈现文本、图像或非空白 canvas 的时间，理想值 ≤ 1.8 秒。
3、Total Blocking Time (TBT)：统计 FCP 至 TTI 之间主线程被长任务阻塞的总时长，理想值 ≤ 200 毫秒。
4、Cumulative Layout Shift (CLS)：衡量页面加载过程中意外布局偏移的程度，理想值 ≤ 0.1。
5、Speed Index (SI)：反映页面内容在首屏中视觉填充的快慢程度，数值越低越好，理想值 ≤ 3.4 秒（移动端）。
