为什么我的页面FCP这么慢，明明首屏内容很简单？

巧梅~ 提问于 2026-03-24 12:50:21 阅读 36

前端

我最近用Lighthouse测性能，发现FCP（首次内容绘制）居然要3秒多，但首页就一个标题和一段文字，按理说不应该啊。我已经把关键CSS内联了，字体也用了font-display: swap，但还是慢。

这是我的关键CSS部分：

body {
  font-family: 'CustomFont', sans-serif;
  margin: 0;
  color: #333;
}
.hero {
  padding: 2rem;
  background: #f8f9fa;
}
h1 {
  font-size: 2.5rem;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

是不是这个opacity动画影响了FCP？浏览器到底怎么判断“内容已绘制”的？

我来解答赞 6 收藏

反馈

2 条解答

Zz智玲 Lv1

问题就出在 h1 的 opacity 动画上，浏览器认为元素透明度为0时不计入FCP。直接把 opacity: 0 去掉或者改成 opacity: 1 就能解决。顺便检查一下网络请求，确保字体文件加载没拖后腿。

h1 {

  font-size: 2.5rem;

  opacity: 1; /* 修改这里 */

  animation: fadeIn 0.5s forwards;

}

@keyframes fadeIn {

  to { opacity: 1; }

}

记得测试下其他动画效果，别让用户体验太突兀。累死我了，这种小细节最容易被忽略。

2026-03-28 09:02

IT人钰岩 Lv1

FCP变慢可能是由几个因素造成的，即使你的页面内容很简单。首先，浏览器判断“内容已绘制”是指页面上至少有一块文本或非空白的背景被渲染出来。你的关键CSS里用到了动画，特别是opacity: 0开始的fadeIn动画，这可能会影响FCP的判断。

虽然你已经内联了关键CSS并且使用了font-display: swap，但动画和复杂的样式计算仍然可能延迟了首次内容的绘制。你可以尝试移除动画，看看是否能提升FCP时间。

另外，检查一下是否有其他资源阻塞了渲染线程，比如大型脚本文件或者外部资源加载。这些都会拖慢页面的首次绘制。

你可以试试这样调整：

h1 {

  font-size: 2.5rem;

  /* opacity: 0;

  animation: fadeIn 0.5s forwards; */

}

去掉动画，看看FCP有没有改善。如果改善明显，可以考虑在内容加载后再通过JavaScript手动触发动画，而不是一开始就应用。

如果问题依旧存在，建议检查网络请求和资源加载情况，确保所有资源都能快速加载。有时候浏览器兼容性也会带来意想不到的影响，确保你的页面在不同浏览器下的表现一致。

2026-03-24 13:02