【发布时间】：2021-01-31 08:27:11
【问题描述】：
所以最近，我们一直在考虑针对新的“核心网络生命力”优化我们的网站，并确定了与 flexbox 行相关的问题（已解决），这导致桌面和移动设备的 CLS 得分不佳似乎是 Google Web Fonts 破坏了 CLS 分数。
当我们添加这个小代码时，一切看起来都很好。 CLS 得分为 0。当我们使用 Google Web Font 时，得分为 0.326（仅适用于移动设备，桌面似乎还不错）。
<style>
*:not(i){
font-family: sans-serif!important;
}
</style>
这是我们使用 Google 字体的方式。
<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 值更改为其他文章中建议的阻止、后备、可选等内容，这些都不会影响 CLS 分数，尽管似乎没有 FOUT（使用节流的“Fast 3G”测试“。）。
我们还尝试了自托管所有字体，但也没有真正奏效。
不过，我们确实认为这与字体有关，因为当我们应用上面的 CSS 时，CLS 分数为 0。这是我们正在寻找的，但我们仍然想要 webfonts。此外，当我们更改 &display=swap 值时，我们在 Lighthouse 中收到另一个“警告”，建议使用交换以获得更好的用户体验，但这就是导致 CLS 问题的原因......有什么想法吗？
这是结果，只是上面提到的这个简单的更改 (CSS)。
得分：94（移动）- 93（桌面）= 不错..！
这没有上面的 CSS 和 Google webfonts。
得分：69（移动）- 91（桌面）= 移动可能会更好......桌面上一切都很好。
【问题讨论】：
-
您可能会发现 this answer I gave useful (the "Solutions" section.) 我自己多次与此作斗争，这就是我们的目标，但显然，如果您的字体与网络安全字体的样式不接近，这并不总是一种选择.
-
@GrahamRitchie 看起来确实需要考虑一些权衡。就用户体验而言，我个人更喜欢谷歌建议的 display=swap。我会等一下，看看 Google 是否会推出更清晰的指导方针来改进 CLS 和布局转换，还有大量的网站使用 Google 网络字体。
-
从用户体验角度看速度> 你使用哪种字体。人们通常不像我们那样关心字体。当您使用 open-sans 时，只需使用普通的 sans-serif 字体即可。但显然，选择权在您，只是建议最好的解决方案（但我们的重点是速度，因为它会极大地影响转换率）。谷歌有官方指导here，但由于超时时间太短，它实际上在大多数现实世界的场景中都不起作用。您的另一个选择是在字体加载时有一个白色覆盖，这又不是理想的。
-
这样做的另一个好处是您不必等待大约 300kb 的字体下载来呈现页面，这可以让您的 FCP 和 LCP 数字恢复到很好的数字。我们运行的唯一其他实验（不太正确）是使用数据 URI 内联加载大规模优化的可变字体（仅 A-Za-z0-9 和核心标点符号）。它只增加了 20kb 的页面重量并立即加载（因为它在 HTML 中内联）但是当我们交换完整版本时它仍然有卡顿。可能是我在接近工作解决方案时立即重新访问的内容。如果我这样做了，我会告诉你的。
-
@GrahamRitchie 我同意你的看法。我们还将继续进行一些测试，如果有任何改进，我们会通知您。祝你的项目好运。
标签： css webfonts google-webfonts pagespeed-insights cls