lighthouse性能评分基于fcp、tti、tbt、cls、si五项指标加权计算,其中tbt权重最高(30%),反映主线程阻塞对交互流畅性的影响;各指标对应真实体验问题,优化需落实到具体技术动作,并结合crux数据验证真实用户表现。

Lighthouse 对页面渲染性能的评分不是看单一指标,而是综合多个核心 Web 指标加权计算得出,重点反映用户真实感知的加载与交互体验。它不测“代码写得漂不漂亮”,而是测“用户看到内容快不快、点按钮顺不顺、滚动稳不稳”。
Performance 评分由五项指标按权重组合:
FCP(首次内容绘制)×0.15
TTI(可交互时间)×0.25
TBT(总阻塞时间)×0.3
CLS(累积布局偏移)×0.2
SI(速度指数)×0.1
其中 TBT 权重最高,说明主线程是否被 JS 长任务拖住,是当前影响渲染流畅性的关键瓶颈。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
关键渲染指标对应的真实问题
- LCP > 2.5s? 用户盯着空白或骨架屏太久——大概率是首屏大图未优化、字体未预加载、或服务端响应慢。
- CLS > 0.1? 页面元素乱跳——常见于图片/广告没设宽高、动态插入 DOM 时没预留空间、字体闪烁未处理。
- TBT 高? 页面卡顿、点击无响应——说明 JS 打包过大、未拆分、含同步 heavy logic(如复杂数据处理),主线程持续忙碌。
- TTI 延迟? 不只是加载慢,更是“加载完还不能用”——常因大量非关键 JS 在首屏执行,或未延迟初始化第三方脚本。
- FCP 慢? 首字/首图出不来——关键资源(HTML、CSS、字体)被阻塞,比如 CSS 文件太大、未内联首屏样式、服务器延迟高。
优化要落在具体动作上
- 图片必须用
<img loading="lazy">+srcset+ WebP 格式,主图建议加fetchpriority="high" - 关键 CSS 内联进 HTML,非关键 CSS 用
media或onload动态加载 - JS 脚本统一加
defer;第三方 SDK(统计、客服)延迟到idle时再加载 - 所有
<img><iframe></iframe><video></video>必须声明width和height,避免布局抖动 - 启用 Brotli 压缩 + 强缓存策略(
Cache-Control: public, max-age=31536000) - 使用
contain: content或will-change明确提示浏览器哪些区域会频繁变化,减少重排开销
别只信 Lighthouse 分数
它在模拟 4G + 中端设备下运行,结果偏保守。分数 90+ 不代表真实用户也快——要结合 CrUX(Chrome 用户体验报告)看实际 FCP/LCP 的 75 分位值。CI 流程中建议设性能预算:比如 LCP ≤ 2.5s、CLS ≤ 0.1,超限自动阻断发布。
不复杂但容易忽略
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










