最近,我们一直在研究如何为新的“核心网络指标”优化我们的网站,并确定问题与flexbox行有关(已解决),这导致桌面设备的CLS得分很低,在移动设备上,似乎是Google Web字体破坏了CLS得分。当我们添加这个小代码后,一切看起来都很好,CLS得分为0。当我们使用Google Web字体时,得分为0.326(仅适用于移动设备,桌面设备似乎没问题)。
我们为什么要使用rel="stylesheet"和rel="preload"? 我们了解到,后者在Firefox等浏览器上尚未得到支持,此前字体加载不完全,添加样式表后问题得以解决。
我们尝试将&display=swap值更改为其他建议的值,如block、fallback、optional,但这些都不会影响CLS分数,虽然似乎没有FOUT(使用限制的“快速3G”进行测试)。
我们还尝试自行托管所有字体,但效果并不理想。
尽管如此,我们仍认为这与字体有关。当我们应用上述CSS时,CLS分数为0。这正是我们所寻求的,但我们仍希望使用网络字体。此外,当我们更改&display=swap值时,Lighthouse会出现另一个“警告”,建议使用swap以获得更好的用户体验,但这会导致CLS问题... 有什么想法吗?
这里是只使用上述简单更改(CSS)的结果。
分数:94(移动端)- 93(桌面端)= 很好!
<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(桌面)= 移动端可能需要改进.. 桌面端一切正常。