如何减少首屏CSS阻塞导致的白屏时间？

东方爱慧提问于 2026-01-27 09:57:25 阅读 28

移动

在优化移动端首页时，发现首屏加载白屏时间超过3秒。明明已经压缩了CSS文件，但开发者工具里Network面板还是显示CSS文件解析阻塞了渲染，这是什么原因？

代码结构大概是这样：<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-css">@font-face {
  font-family: 'MainFont';
  src: url('/fonts/icon.woff2') format('woff2');
}
body {
  transition: all 0.3s;
  font-family: 'MainFont', sans-serif;
}
/* 还有大量全局样式和动画代码 */
</code></code></pre>

尝试过把CSS拆分成多个文件，但首屏需要的样式和其他样式还是混在一起。用link标签引入时，字体加载和过渡效果会不会导致阻塞？有没有办法让首屏只加载必要的样式？

我来解答赞 6 收藏

反馈

2 条解答

Mc.嘉俊 Lv1

这个问题我也遇到过，确实挺头疼的。你已经压缩了CSS，但首屏还是被阻塞，主要原因很可能就是你提到的 @font-face 和全局样式拖累了首屏渲染。

浏览器默认会把 CSS 当作关键资源来加载，即使你拆分了文件，只要首屏需要的样式和其他样式混在一起，它还是会去下载、解析、应用这些 CSS，导致白屏时间变长。

下面是几个我觉得有效的优化方向：

### 1. 提取首屏关键 CSS
你提到首屏样式和其他样式混在一起，这时候就需要提取出首屏关键的 CSS，比如 body 样式、字体设置，以及首屏内容的样式，把它们内联到 HTML 的