Chrome浏览器可通过四种方式用Lighthouse量化网页加载性能：一、开发者工具内置Lighthouse，勾选Performance与移动设备节流后生成含LCP、FCP等指标的报告；二、安装官方扩展一键启动并输出HTML报告；三、命令行执行lighthouse指令支持批量与CI/CD集成；四、Network面板辅助验证实际请求耗时。
如果您希望量化评估当前网页的加载性能表现，Chrome 浏览器内置的 Lighthouse 工具可提供标准化、可复现的多维度审计结果。以下是使用 Lighthouse 查看网页加载性能的具体操作路径：
一、通过开发者工具启动 Lighthouse
此方式直接调用 Chrome 内置审计引擎，无需额外安装，适用于所有 60+ 版本 Chrome，能完整捕获页面首次加载全过程并生成含 LCP、FCP、CLS 等核心指标的可视化报告。
1、在 Chrome 浏览器中打开待测网页。
2、按下 F12 键或在页面空白处右键选择“检查”，打开开发者工具。
3、点击顶部标签栏中的 Lighthouse 选项卡（旧版可能显示为“Audits”）。
4、在左侧面板中，确保勾选 Performance 类别，并根据测试目标选择设备类型（推荐勾选“移动设备”并启用 Slow 4G 网络节流）。
5、点击 “生成报告” 按钮，Lighthouse 将自动刷新页面并执行完整加载周期审计。
6、等待约 30–60 秒，报告生成后，页面将展示各项性能得分及对应优化建议。
二、使用 Chrome 官方扩展程序运行 Lighthouse
该方式绕过开发者工具界面，适合不熟悉 DevTools 的用户或需跨页面快速复用检测流程的场景，支持一键触发且自动生成独立 HTML 报告。
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 自动启动无头实例，完成审计并打开生成的 HTML 报告。
四、使用 Network 面板辅助验证加载耗时
该方法不依赖 Lighthouse，而是通过开发者工具 Network 面板直接观察真实网络请求瀑布图与时序节点，可交叉验证 Lighthouse 中的 FCP、LCP 等指标是否符合实际加载节奏。
1、在 Chrome 中打开目标网页后，按下 F12 打开开发者工具。
2、切换至 Network 选项卡，勾选左上角 Preserve log 复选框。
3、按 F5 刷新页面，等待所有请求完成。
4、查看面板底部状态栏中的 Finish 值，即全部网络请求结束的总毫秒数。
5、观察时间轴中 蓝色垂直线（DOMContentLoaded） 与 红色垂直线（load） 对应的时间点，分别代表 DOM 构建完成与所有资源加载完毕时刻。
