谷歌网络字体破坏了CLS分数（FOUT）

Question

最近，我们一直在研究如何为新的“核心网络指标”优化我们的网站，并确定问题与flexbox行有关（已解决），这导致桌面设备的CLS得分很低，在移动设备上，似乎是Google Web字体破坏了CLS得分。当我们添加这个小代码后，一切看起来都很好，CLS得分为0。当我们使用Google Web字体时，得分为0.326（仅适用于移动设备，桌面设备似乎没问题）。

<style>
*:not(i){
    font-family: sans-serif!important;
}
</style>

这是我们使用 Google Fonts 的方式。

<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Source+Sans+Pro:wght@400;900&display=swap">

我们为什么要使用rel="stylesheet"和rel="preload"? 我们了解到，后者在Firefox等浏览器上尚未得到支持，此前字体加载不完全，添加样式表后问题得以解决。

我们尝试将&display=swap值更改为其他建议的值，如block、fallback、optional，但这些都不会影响CLS分数，虽然似乎没有FOUT（使用限制的“快速3G”进行测试）。

我们还尝试自行托管所有字体，但效果并不理想。

尽管如此，我们仍认为这与字体有关。当我们应用上述CSS时，CLS分数为0。这正是我们所寻求的，但我们仍希望使用网络字体。此外，当我们更改&display=swap值时，Lighthouse会出现另一个“警告”，建议使用swap以获得更好的用户体验，但这会导致CLS问题... 有什么想法吗？

这里是只使用上述简单更改（CSS）的结果。

分数：94（移动端）- 93（桌面端）= 很好！

没有上面的CSS和Google Web字体。

得分：69（移动）- 91（桌面）= 移动端可能需要改进.. 桌面端一切正常。

- Anders

---

你可能会发现我提供的这个答案有用（“解决方案”部分）。在多次自己与此作斗争后，我们得出了这个结论，但如果您的字体与Web安全字体不接近，则显然并不总是可行的选择。 - GrahamTheDevRel

@GrahamRitchie，看起来确实有一些需要考虑的权衡。就用户体验而言，我个人也更喜欢像Google建议的那样使用display=swap。我会再等一段时间，看看Google是否会发布更清晰的指南来改善CLS和布局变化，因为有很多网站都在使用Google webfonts。 - Anders

从用户体验的角度来看，速度比使用哪种字体更重要。人们通常不像我们一样关心字体。由于您正在使用Open Sans，普通的无衬线字体就可以很好地工作。但是，选择权在您手中，只是建议最佳解决方案（但我们的重点是速度，因为它对转化率影响非常大）。Google有官方指导此处，但在大多数实际情况下，它实际上并不起作用，因为超时时间太短。您还有另一个选择，即在字体加载时使用白色覆盖层，但这也不是理想的选择。 - GrahamTheDevRel

这种方法的额外好处是，您不必等待下载约300kb的字体以呈现页面，这将使您的FCP和LCP数字恢复到良好的水平。我们进行的唯一其他实验（没有完全做对）是使用数据URI内联加载高度优化的可变字体（仅A-Za-z0-9和核心标点符号）。它只增加了20kb的页面重量并立即加载（因为它被内联在HTML中），但当我们切换到完整版本时仍然有卡顿。可能很快我会重新考虑这个问题，因为我们接近一个可行的解决方案。如果我这样做了，我会让您知道的。 - GrahamTheDevRel

@GrahamRitchie 我同意你的看法。我们将继续进行一些测试，并在有任何改进时通知您。祝您的项目顺利。 - Anders

Answer 1

以下是我所知道的两种解决此问题的方法:

1. 将备用字体的样式设置为与Web字体相匹配，使用CSS字体加载API在Web字体加载时更改类。您可以查看这里的示例，了解如何使用Font Loading API在某个字体加载时启动回调。您可以使用像这个的工具来将备用字体与Web字体匹配。

2. 在备用字体上使用Chrome的@font-face描述符覆盖以与Web字体匹配。 Chrome 87中刚刚推出了字体描述符覆盖，它们允许您执行与选项1相同的功能，但不需要单独的类和JavaScript，只需针对@font-face内部的特定字体系列即可。缺点是此功能仅在本文撰写时仅适用于Chrome 87。

- oreoorbitz