FCP 太慢，首页白屏时间长怎么办？

长孙舒婕提问于 2026-03-02 09:16:21 阅读 15

前端

我用 React 做了个首页，但 Lighthouse 测出来 FCP 超过 4 秒，用户看到的是一片白屏，特别影响体验。我已经把关键 CSS 内联了，也用了懒加载，但还是没改善。

页面结构很简单，就是个带 logo 和 loading 动画的首屏，代码如下：

function App() {
  return (
    <div className="hero">
      <img src="/logo.svg" alt="Logo" />
      <div className="spinner"></div>
    </div>
  );
}

logo.svg 是个小图标（不到 5KB），spinner 是纯 CSS 动画。为什么 FCP 还是这么高？是不是因为 React 本身太重了？有没有办法让首屏内容更快渲染出来？

我来解答赞 4 收藏

反馈

1 条解答

爱学习的智慧 Lv1

哎呀，这个问题我之前也踩过坑！4秒FCP确实太惨了，用户估计早就关页面走人了。

说实话，问题就出在你用React来渲染首屏内容。你想啊，浏览器得先下载JS bundle，解析执行React，然后React再创建DOM，最后才渲染出来。这中间全是阻塞操作，白屏时间能不长嘛。

最简单粗暴的解决方案是，直接在HTML里写首屏内容，别等React。在你的 public/index.html 里这样搞：

对，就是在React挂载的那个root div里面直接写死首屏HTML。浏览器解析HTML就能立即渲染，完全不用等JS。等React加载完成后会自动接管并替换这部分内容。

另外记得把关键CSS也内联到head里，spinner的动画样式别放外部文件了。

还有几个可以排查的点。打开Chrome DevTools的Network面板，看看你的JS bundle有多大。如果超过200KB，说明打包有问题，可能引入了没用的库。用 source-map-explorer 分析一下bundle构成，把没用到的依赖干掉。

如果bundle体积还是降不下来，可以考虑用 React.lazy 做路由级别的代码分割，首屏只加载必要的代码。

对了，如果你的首页是静态内容居多的，其实可以考虑换成Next.js做SSG，或者干脆用纯HTML + CSS写首页，React只用来做后续的交互部分。

试试看，这个改动应该能让FCP降到1秒以内。搞完记得再跑一次Lighthouse看看效果！

2026-03-02 09:18