如何处理包含 div 个元素的 CLS 分数？ （网络生命力）
How to deal with CLS score with div elements? (web vitals)
我是 运行 prestashop 上的一家在线商店。我已经对图像和视频进行了所有必要的调整，并且正在努力最大程度地减少加载时间，但是我注意到我的很多 CLS 分数都来自我产品页面上的主要 div 容器
这似乎是所有 prestashop 网站的情况，至少是我用 PageSpeed Insights 测试过的网站。处理这个问题的好方法是什么？添加纵横比似乎不起作用，而且它显然会破坏所有内容，因为这些容器的高度是动态的。添加最小高度似乎也没有做任何事情。
示例产品页面：https://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html
WebPageTest 有一个有用的 Web Vitals diagnostic page，您可以在其中看到 before/after 各个布局的变化。两个最显着的变化是当顶部的面包屑加载并向下推产品图像时，以及当产品图像加载并将其余内容向下推时：
产品图片的样式为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">
因此浏览器在加载图像之前不知道要为图像保留多少space，从而导致布局偏移。您应该为图像设置显式 height/width 样式，以便在图像加载之前保留该区域。
另外：产品图片（也是您的 LCP）的固有尺寸为 1500 像素 x 1300 像素，尽管在移动设备上仅显示为 300 像素 x 286 像素。通过使用较小的图像，可以节省大量字节——还可能改进您的 LCP！
与面包屑类似，如果它们是异步添加的，它们应该通过设置 height/width 保留 space。在加载之前它会显示为空白，但就 Web Vitals 而言，它会缓解 CLS 问题。
您可以在本指南中阅读有关 CLS 优化的更多信息：https://web.dev/optimize-cls/
我是 运行 prestashop 上的一家在线商店。我已经对图像和视频进行了所有必要的调整，并且正在努力最大程度地减少加载时间，但是我注意到我的很多 CLS 分数都来自我产品页面上的主要 div 容器
这似乎是所有 prestashop 网站的情况，至少是我用 PageSpeed Insights 测试过的网站。处理这个问题的好方法是什么？添加纵横比似乎不起作用，而且它显然会破坏所有内容，因为这些容器的高度是动态的。添加最小高度似乎也没有做任何事情。
示例产品页面：https://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html
WebPageTest 有一个有用的 Web Vitals diagnostic page，您可以在其中看到 before/after 各个布局的变化。两个最显着的变化是当顶部的面包屑加载并向下推产品图像时，以及当产品图像加载并将其余内容向下推时：
产品图片的样式为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">
因此浏览器在加载图像之前不知道要为图像保留多少space，从而导致布局偏移。您应该为图像设置显式 height/width 样式，以便在图像加载之前保留该区域。
另外：产品图片（也是您的 LCP）的固有尺寸为 1500 像素 x 1300 像素，尽管在移动设备上仅显示为 300 像素 x 286 像素。通过使用较小的图像，可以节省大量字节——还可能改进您的 LCP！
与面包屑类似，如果它们是异步添加的，它们应该通过设置 height/width 保留 space。在加载之前它会显示为空白，但就 Web Vitals 而言，它会缓解 CLS 问题。
您可以在本指南中阅读有关 CLS 优化的更多信息：https://web.dev/optimize-cls/