Lighthouse 性能评分低于 50 分如何排查主要瓶颈？

Lighthouse 性能评分低于 50 分通常意味着页面加载过程中存在严重的渲染阻塞或主线程长时间忙碌，优先排查最大内容绘制（LCP）和总阻塞时间（TBT）。

先说结论：评分过低大多由资源加载顺序不当或服务器响应慢导致，需按指标权重逐个击破。

先定位：查看 Lighthouse 报告中的“机会”和“诊断”板块，找出扣分最多的指标。
先做：优先优化图片大小、启用压缩缓存、延迟非关键 JavaScript 执行。
再验证：修改后在无痕模式下复测，对比具体指标数值变化而非仅看总分。

命令速用版

npx lighthouse https://example.com `--view` `--output` html

上述命令会在本地启动测试并自动打开 HTML 报告，适合需要留存记录的场景。若使用 Chrome DevTools，可直接在“Lighthouse”面板点击“分析页面加载性能”。

为什么会这样

Lighthouse 评分是基于多个性能指标的加权计算结果，其中核心网页指标（Core Web Vitals）占比很高。当评分低于 50 分时，通常代表用户体验受到明显影响，常见原因包括服务器响应时间（TTFB）过长、图片未压缩、JavaScript 执行阻塞主线程或 CSS 渲染阻塞。

分步处理与代码实战

1. 生成基准报告
在无痕模式下运行 Lighthouse，避免浏览器扩展干扰。保存 HTML 报告以便对比。

2. 消除渲染阻塞资源（JS 优化）
检查“机会”板块中的“消除渲染阻塞资源”。对于非关键 JavaScript，修改 HTML 中的 script 标签：

<!-- 原代码：阻塞解析 -->
<script src="main.js"></script>

<!-- 优化后：延迟执行 -->
<script src="main.js" defer></script>

<!-- 或者异步加载（无依赖场景） -->
<script src="analytics.js" async></script>

若使用构建工具（如 Webpack），可配置 splitChunks 将 vendor 代码分离，避免主包过大。

3. 图片资源优化具体方案
针对“高效分发图片”建议，采取以下措施：

格式转换：将 PNG/JPG 转换为 WebP 格式。
响应式图片：使用 srcset 适配不同屏幕。
懒加载：为下方图片添加 loading="lazy"。

<img src="image.webp" srcset="image-small.webp 480w, image-large.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="description" loading="lazy">

4. 服务器响应时间优化配置示例
如果“服务器响应时间”建议出现，检查后端逻辑或启用服务器端缓存。Nginx 配置示例：

server {
    listen 80;
    server_name example.com;

    # 启用 Gzip 压缩
    gzip on;
    gzip_types text/plain application/json application/javascript text/css;

    # 静态资源缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

怎么验证是否生效

完成优化后，再次运行相同配置的 Lighthouse 测试。对比前后报告中具体指标的变化，例如 LCP 时间是否缩短、TBT 毫秒数是否降低。不要仅依赖总分，因为网络波动可能导致分数小幅震荡。

常见坑

缓存干扰：测试时未禁用缓存或使用了 Service Worker 缓存旧资源，导致数据不准。
扩展程序：未在无痕模式测试，安装的浏览器插件注入了额外脚本，拉低评分。
第三方脚本：广告、统计代码等第三方资源不可控，必要时可异步加载或按需加载。
网络环境：本地测试与生产环境网络差异大，建议结合 Chrome UX Report 真实用户数据参考。

参考来源

Google Web Developers - Lighthouse 概述：https://developer.chrome.com/docs/lighthouse/overview/
web.dev - 性能评分计算方法：https://web.dev/performance-score/