我正在一个使用大量嵌入式SVG的网站上工作，而不是通过<img>标签将它们链接起来，因为这样可以加快加载时间。它们大多数都非常简单，单色并且不会移位。由于我们的徽标也是作为SVG制成的，因此它也作为HTML嵌入到页面中。
有一天Search Console开始报告台式机（而非移动设备）的CLS问题。我在本地进行了测试，但是看不到任何布局变化，也找不到原因。我继续使用https://developers.google.com/speed/pagespeed/insights/和https://layoutstability.rocks/测试了该页面，并且两者都报告了相同的结果，即在台式机上的CLS，但不在移动设备上。
可以在这里找到测试的屏幕截图：
PageSpeed Insights reporting the causing element
如您在上方看到的，PageSpeed Insights将嵌入式徽标SVG标记为正在进行的版式转换的原因。
在上面，您可以看到我是如何识别引起故障的元素的。
所以现在我不仅想知道SVG转移的问题，而且还想知道仅发生在台式机上的问题。
是否有一种简单的方法可以解决嵌入式SVG的CLS问题？还是需要指定静态高度和宽度以保留空间？我不想这样做，因为SVG在调整浏览器宽度时会缩放，这会限制响应速度。
无论如何，我也都找不到任何资源，似乎是我的第一篇帖子。
任何帮助表示赞赏！ （作为参考，这是受影响的页面：https://hydra.bot）
答案 0 :(得分：0)
我实际上发现了这个问题，它与SVG无关，但与Webfont的交换有关。从字体家族堆栈中删除webfont可以解决此问题。但是不知道如何在没有CLS的情况下使用webfonts。
答案 1 :(得分：0)
问题在于，如果图像没有显示宽度和高度，它们会根据您的 CSS 增长然后进行调整，您必须指定浏览器的尺寸，以便在加载图像时保留空间。
您可以在以下网址找到更多信息：https://web.dev/optimize-cls/
