字体预加载后反而首屏变慢了，怎么回事？

公孙增芳提问于 2026-03-10 22:08:22 阅读 90

优化

我给网站加了字体预加载，用的是 <link rel="preload" as="font">，但发现首屏加载时间反而变长了，本地测试特别明显。

本来以为预加载能提升性能，结果 Lighthouse 评分还降了。是不是我写法有问题？这是我的代码：

<link rel="preload" href="/fonts/Inter.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin>

我来解答赞 5 收藏

反馈

1 条解答

雨萓~ Lv1

问题大概率是你预加载了不必要的字体。预加载会占用带宽，如果这个字体不是首屏渲染必需的，反而拖慢关键资源加载。

检查一下：首屏文字用的是什么字体？如果不是 Inter，就别预加载它。必须预加载的字体才加，其他字体等用到时再加载。

另外加上 font-display: swap; 避免字体阻塞文字显示：

@font-face {

  font-family: 'Inter';

  src: url('/fonts/Inter.woff2') format('woff2');

  font-display: swap;

}

2026-03-10 22:10