Lighthouse是Chrome内置的网页性能综合评分工具，通过LCP、FCP、CLS等核心指标生成量化分数。操作步骤：打开开发者工具→切换至Lighthouse面板→选择设备类型→勾选性能审核→点击分析，30～90秒后生成报告；异常时可用Performance面板录制帧数据验证；导出HTML报告并逐项比对优化效果。
你需要给网站一个量化性能分数，不是只看加载时间或帧率曲线，而是获得包含LCP、FCP、CLS等核心指标的综合评分报告——这正是Chrome内置Lighthouse工具的核心用途。
用Lighthouse生成网页性能跑分报告
这是最直接获取“跑分”的方式，Chrome已原生集成Lighthouse，无需安装插件或命令行环境。
第一步：打开目标网页，按 F12 或右键空白处选择“检查”，唤出开发者工具。
第二步：点击顶部标签栏中的 Lighthouse 选项卡。若未看到该标签，请先关闭所有其他面板（如Console、Network），确保开发者工具处于默认布局。
第三步：在左侧面板确认URL正确，将“设备”设为“桌面”或“移动设备”——【选错设备类型会导致LCP、CLS等指标计算逻辑不同，分数偏差可达20分以上】。
第四步：勾选全部审核类别，尤其确保“性能”被选中；取消勾选“PWA”“SEO”等非必要项不会影响性能分数，但勾全更利于后续优化排查。
第五步：点击“分析网页加载情况”按钮，浏览器会自动刷新页面、运行审计、生成报告。整个过程约30～90秒，期间请勿操作页面或切换标签页。
通过Performance面板手动验证关键帧指标
当Lighthouse分数异常，或你想确认首屏渲染是否真如报告所言流畅，就得下钻到Performance面板看原始帧数据。
方法一：快捷录制首屏加载全过程
打开开发者工具→切换到Performance选项卡→点击顶部的“Start profiling and load page”图标（带刷新箭头的圆点）→等待页面完全加载并稳定2秒→自动停止并生成火焰图。
方法二：手动控制录制时机
点击左侧圆形Record按钮→立即在地址栏按Enter刷新页面→待页面交互可用后（如按钮可点、滚动顺畅）再点击Stop→重点观察绿色Painting区块是否密集连续，有无超过16.66ms的单帧紫色Rendering长条。
注意：必须勾选Screenshots，否则无法对照帧截图判断LCP元素是否在第1帧就出现；不勾选则Lighthouse报告里的“最大内容绘制”可能误判为后期渲染。
导出并比对多次Lighthouse结果
单次跑分受缓存、网络抖动、后台进程干扰，真实优化需看趋势而非绝对值。
1. 每次生成Lighthouse报告后，点击右上角三个点→选择“Export report”→保存为HTML文件，文件名建议含日期和测试条件（例：lighthouse_20260914_desktop_cache-off.html）。
2. 若需对比优化前后差异，打开两个HTML报告，在浏览器中并排查看“Performance”大类下的具体子项得分，重点关注First Contentful Paint、Largest Contentful Paint、Cumulative Layout Shift三项数值变化。
3. 不要依赖Summary总分升降判断优化成败——有时FCP快了但CLS恶化，总分微升实则体验倒退；必须逐项核对。
