为什么嵌入式 SVG 在桌面上会导致 CLS（累积布局偏移），但在移动设备上不会？

Question

我正在开发一个使用大量嵌入式 SVG 的网站，而不是通过标签链接它们<img>，因为这会加快加载时间。它们中的大多数都非常简单，单色且不会变化。由于我们的徽标是作为 SVG 制作的，因此它也作为 HTML 嵌入到页面中。

有一天，Search Console 开始在桌面设备上报告 CLS 问题，但在移动设备上却没有报告。我在本地进行了测试，但我无法看到任何布局变化，也找不到原因。我继续使用https://developers.google.com/speed/pagespeed/insights/和https://layoutstability.rocks/测试了该页面，两者都报告了相同的情况，即桌面上有 CLS，但移动设备上没有。

测试的屏幕截图可以在这里找到：

桌面上的 CLS 问题

移动设备上没有 CLS 问题

PageSpeed Insights 报告导致元素

正如您在上面看到的，PageSpeed Insights 将嵌入徽标 SVG 标记为持续布局变化的原因。

已确定的致病因素

从上面您可以看到我如何识别导致因素。

所以现在我不仅想知道 SVG 移动的问题，还想知道这个问题只发生在桌面上。

有没有一种简单的方法可以解决嵌入式 SVG 的 CLS 问题？或者我是否需要指定静态高度和宽度来保留空间？我不想这样做，因为在调整浏览器宽度时 SVG 会缩放，这会限制响应能力。

我也无法找到有关该问题的任何资源，似乎我是第一个关于该问题的帖子。

任何帮助表示赞赏！（作为参考，这是受影响的页面： https: //Hydra.bot）

Answer 1

我实际上发现了这个问题，它与 SVG 无关，而是与 webfont 交换有关。从字体系列堆栈中删除 webfont 可以解决该问题。但不确定如何在没有 CLS 的情况下使用网络字体。