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

FCP高但Lighthouse评分不错这种情况是可能的。Lighthouse性能评分是基于多个指标综合计算的，包括但不限于FCP、LCP（最大内容绘制）、TBT（总阻塞时间）和CLS（累计布局偏移）。就算FCP时间长，如果其他关键指标表现优秀，整体评分还是能保持不错的水平。

关于你提到的loading动画，它实际上不会影响FCP的计算。官方文档里说，FCP是指页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间点。你的loading动画属于CSS控制的内容，只要HTML结构已经渲染出来，就算是达到了FCP的标准。

不过为了进一步优化FCP，你可以检查下首屏资源的加载情况，确保关键请求尽早发出。还有就是看看有没有不必要的阻塞渲染的JavaScript或者样式文件。把一些非关键的样式放到 print 或者 media 查询里，这样就不会阻碍首屏内容的渲染了。

<link rel="stylesheet" href="styles.css" media="print">

这个改动可以把一些不影响首屏展示的样式延迟加载。当然这些都是优化建议，具体还得结合你的项目实际情况来看。有时候网络环境差异也会导致测试结果不一样，多跑几次测试取平均值更靠谱些。

这个问题的关键是理解 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 和实际用户体验。