为什么页面FCP很高但Lighthouse评分却不错？

这个问题的关键是理解 Lighthouse 的评分机制和 FCP 的计算方式，你的监控大概率没错，现象是合理的。

先说 Lighthouse 评分这个事。性能评分不是只看 FCP 一个指标，而是多个指标的加权组合。以 Lighthouse 10 为例，权重分布大概是这样的：LCP（最大内容绘制）占 25%，TBT（总阻塞时间）占 30%，CLS（累积布局偏移）占 25%，FCP 其实只占 10%，SI（速度指数）占 10%。所以你的 FCP 确实拖了后腿，但如果 LCP、TBT、CLS 表现还可以，整体评分拉到 80 多分完全正常。

再来分析你的 loading 动画问题。你这段 CSS 本身不会影响 FCP 的计算时机，但问题可能出在 HTML 结构上。FCP 测量的是浏览器首次渲染任何「文本、图像、非空白 canvas 或 SVG」的时间。注意这里的关键词：文本和图像。

你那个 loading 条是纯 CSS 的背景色块加动画，它不算「内容」，不会触发 FCP。浏览器会觉得「这页面还没渲染出真正的内容呢」，所以 FCP 计时器一直在等，等到真正的文字或图片出来才记录。

我猜你的页面结构可能是这样的：loading 动画先显示，然后 JS 加载数据，最后渲染真正的内容。这种情况下 FCP 被推迟到内容渲染完成，而不是 loading 出现的时间。

要验证这个问题，你可以在 loading 区域加一点文字：

<div class="loading">

  <span class="loading-text">加载中...</span>

</div>



<style>

.loading-text {

  position: absolute;

  left: 10px;

  top: 10px;

  font-size: 14px;

  color: #666;

}

</style>





这样 FCP 就会在 loading 文字出现时触发，时间点会大幅提前。当然这只是测试手段，不是让你真这么干，毕竟用户看到「加载中」三个字也没啥意义。



真正要解决 FCP 高的问题，得看你的具体场景。如果是单页应用，骨架屏是个常见方案，用灰色的占位块模拟页面结构，这些占位块会被识别为内容：



<!-- 骨架屏，FCP 会更早触发 -->

<div class="skeleton">

  <div class="skeleton-header"></div>

  <div class="skeleton-content"></div>

</div>



<style>

.skeleton-header {

  height: 60px;

  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

}



.skeleton-content {

  height: 200px;

  margin-top: 20px;

  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

}



@keyframes shimmer {

  0% { background-position: -200% 0; }

  100% { background-position: 200% 0; }

}

</style>





骨架屏的渐变背景会被当作内容处理，FCP 能提前到首屏渲染阶段。



另外还有个容易踩的坑，如果你的页面依赖 JS 才能渲染内容，记得检查一下是不是有 render-blocking 的资源。打开 DevTools 的 Performance 面板跑一次，看看 FCP 标记之前都在干嘛。常见的问题是同步 JS 阻塞了渲染，或者字体文件加载阻塞了文字显示。



说回你的场景，如果 loading 动画是纯展示性的，不用太纠结 FCP 这个指标。真正要关注的是 LCP，那个才是用户感知的「页面主要内容出来了」的时间点。FCP 有时候会骗人，比如你加个「加载中」文字 FCP 就好了，但用户体验没有任何提升。



总结一下：你的现象合理，Lighthouse 评分是综合计算的结果；loading 动画没触发 FCP 是因为它不是「内容」；要优化 FCP 可以加骨架屏或文字占位，但更重要的是关注 LCP 和实际用户体验。