破坏CLS评分(FOUT)

Question

因此，最近，我们一直在为新的“核心网络要害”优化我们的网站，并且已经确定了与柔性盒行相关的问题(解决了)，这导致了桌面的CLS评分不好，而在Mobile上，似乎是Google web字体破坏了CLS评分。

当我们添加这个小代码时，一切看起来都很好。CLS得分为0。当我们使用时，得分为0.326 (仅用于移动，桌面似乎不错)。

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

下面是我们使用谷歌字体的方式。

<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=“样式表”和rel=“预加载”？我们了解到，Firefox等浏览器还不支持后者，以前的字体不会完全加载，在添加样式表时，这也是固定的。

我们试过什么？

我们尝试过将&display=swap值更改为诸如块、回退、可选的东西，这在其他文章中是建议的，这些都不影响CLS的得分，尽管似乎没有FOUT (用节流的“Fast3G”测试)。

我们也尝试了自我托管所有的字体，这也没有真正的工作。

尽管如此，我们仍然认为这与字体有关，因为当我们应用上面的CSS时，CLS的分数是0。这是我们正在寻找的，但我们仍然希望网页字体。另外，当我们更改&display=swap值时，我们在灯塔中得到另一个“警告”，建议使用交换以获得更好的用户体验，但这是导致CLS问题的原因.有什么想法吗？

这里是结果，就像上面提到的简单更改(CSS)一样。

得分: 94 (移动)- 93 (桌面)=不错..！

​

​

和这里没有上面的CSS，和Google webfonts.。

得分: 69 (移动)- 91 (桌面)=移动可能更好。桌面上一切都很好。

​

​

Answer 1

以下是我所知道的处理这个问题的两个解决方案：

样式的回退字体以与web字体匹配，并使用CSS字体加载API在加载.时更改类。

有关在加载特定字体时使用这里启动回调的示例，请参阅字体加载API。您可以使用工具就像这个将回退字体与web字体匹配。

使用chrome的@字体表面描述符覆盖回退字体，以匹配webfont

字体描述符覆盖刚刚推出了chrome 87，它允许您执行与选项1相同的功能，但是不需要单独的类和JavaScript，您只需在@字体面板中指定一个特定的字体系列。缺点是，在编写这篇文章时，这只能在铬87中使用。