我在 prestashop 上经营一家在线商店。我已经对图像和视频进行了所有必要的调整，并且正在努力减少加载时间，但是我注意到我的很多 CLS 分数来自我产品页面上的主 div 容器
这似乎适用于所有 prestashop 网站，至少是我使用 PageSpeed Insights 测试过的网站。什么是处理这个的好方法？添加纵横比似乎不起作用，而且它显然会破坏一切，因为这些容器的高度是动态的。添加 min-height 似乎也没有做任何事情。
示例产品页面：https ://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html
WebPageTest 有一个有用的Web Vitals 诊断页面，您可以在其中查看各个布局转换的前后。两个最重要的变化是顶部的面包屑加载并将产品图像向下推，以及产品图像加载并将其余内容向下推：
产品图片的风格为height: auto; width: 100%;：
<img id="itzoom-products" class="js-qv-product-cover" src="https://vipkoszulka.pl/10826-large_default/pielegniarka-koszulka-long-z-kieszeniami-medyczna.jpg" alt="" title="" style="width:100%;" itemprop="image">
所以浏览器在加载之前不知道要为图像保留多少空间，从而导致布局偏移。您应该为图像设置明确的高度/宽度样式，以便在图像加载之前可以保留该区域。
另外：产品图片也是您的 LCP，其固有尺寸为 1500 像素 x 1300 像素，尽管在移动设备上仅显示为 300 像素 x 286 像素。通过使用较小的图像，可以节省大量字节——也可能提高 LCP！
同样对于面包屑，如果它们是异步添加的，它们应该通过设置高度/宽度来保留空间。在加载之前它将显示为空白，但就 Web Vitals 而言，它将缓解 CLS 问题。
您可以在本指南中阅读有关 CLS 优化的更多信息：https ://web.dev/optimize-cls/