是时候告别 Google 字体了：缓存性能

我曾在原型设计以及月活跃用户超过 1000 万的产品中使用过 Google 字体。它上手极其简单，并且提供了令人惊叹的字体探索体验。这也是为什么它目前仍在超过4200 万个网站上使用的原因！

这种便利是有代价的：性能。很多人已经详细指出了多次请求的代价。如果你想要剩余的速度提升，那么最好下载你用过的 Google 字体并自行托管。

这并不是什么新鲜事。事实上，这种做法已经被提倡多年了。甚至谷歌自己也在2018 年 Google I/O 大会上关于 Web 性能的演讲中建议其他公司自行托管字体。

自托管字体 vs. Google 字体

从本质上讲，即使对字体和 CSS 进行了优化，Google 字体也无法比自托管字体更快。

Sia 写了一篇很棒的文章，比较了 Google 字体和不受 CDN 影响的自托管字体的性能。

优化预加载的自托管字体：

优化预加载的自托管字体：

旧有的性能论证

因此，如果底线性能对自托管字体有利：有什么论据可以让我们开发人员相信 Google 字体的性能至少与自托管方法一样好？

Google Fonts 的设计初衷是分发到全球 CDN 上，并从中获得缓存优势。用户通过该 CDN 请求字体。他们很可能之前已经从其他网站下载过字体资源。

“[…] 我们的跨站点缓存设计使得您只需在任何网站上加载一次字体，我们就会在任何其他使用 Google 字体的网站上使用相同的缓存字体。”

• https://fonts.google.com/about

推翻旧的绩效论证

自 2020 年 10 月发布的 Chrome v86 以来，字体等跨站资源无法再在同一个 CDN 上共享。这是由于浏览器缓存分区造成的（Safari 多年来一直存在这种情况）。

在这篇 Google 文章中，他们解释了什么是分区浏览器缓存。它的引入只是为了防止可能存在的跨站跟踪机制。

其他浏览器中的缓存分区

Safari 非常重视隐私。它多年来一直在规避这种跨站跟踪攻击。Chrome 终于来了。其他基于 Chromium 的浏览器仍然需要通知或实现该功能。

✅ Chrome：自 v86（2020 年 10 月）起
✅ Safari：自 2013 年起
🚫 Firefox：计划实施
🚫 Edge：很可能很快就会推出
🚫 Opera：很可能很快就会推出
🚫 Brave：很可能很快就会推出
🚫 Vivaldi：很可能很快就会推出

结论

无论 Google 字体资源是否缓存在 CDN 上，每个网站都会重新下载。自行托管字体可获得更佳性能。旧有的性能论调已不再有效。

感谢您查看这篇文章！

Simon Wicki 是柏林的一名自由开发者。曾在 JustWatch 开发 Web 和移动应用。精通 Vue、Angular、React 和 Ionic。热爱前端、技术、Web 性能和非虚构类书籍。

👉在 Twitter 上关注我，关注我的最新动态。