问题标签 [cls]

我在 prestashop 上经营一家在线商店。我已经对图像和视频进行了所有必要的调整，并且正在努力减少加载时间，但是我注意到我的很多 CLS 分数来自我产品页面上的主 div 容器

这似乎适用于所有 prestashop 网站，至少是我使用 PageSpeed Insights 测试过的网站。什么是处理这个的好方法？添加纵横比似乎不起作用，而且它显然会破坏一切，因为这些容器的高度是动态的。添加 min-height 似乎也没有做任何事情。

示例产品页面：https ://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html

目前，97 个 URL 受 CLS 问题影响超过 0.25（桌面）和 85 个 URL 受 LCP 问题影响：超过 4s（移动）在我们的网站上。

网站 - www.sopact.com进行调查。

我们如何解决这些问题？

先感谢您。

嘿，伙计们，我正在寻找页面速度；），实际上只是 CLS（列布局转换）打破了我的脖子......我有一个 JSON 文件，其中包含我页面的所有内容，它会动态加载到我的组件中，例如:（简单的例子，在生产中json要大得多......）

您是否认为我的 div 第一次是高度 0 并且在内容来自 model.json 之后 div 正在增长，这就是我得到这些 CLS 的原因？

问候并感谢您的帮助：心：

几个月前我开始了我的网上商店，由于我不是程序员，我终于到了需要帮助的地步。

我试图根据谷歌提高Pagespeed，我设法让我的索引页面的CLS几乎为0。 - Lazyload，系统字体，图片的纵横比等等......我设法在液体代码中找到了这一切我的 Shopify 商店并自行优化。...好吧，我完全崩溃了几次页面，但这就是备份的用途；-)

但我对产品页面一无所知。Lighthouse 可以告诉我导致 CLS 几乎为 1（！）的对象 - 主要是 0,9 左右 - 但我现在查看了这些对象的代码 5 天，我迷路了。它应该是由以下原因引起的：

• main#MainContent.main-content
• div.col-12.col-md-6.order-1
• div.page-container.page-element.is-moved-by-drawer

...有时还有一些会导致小数字 ob CLS

我尝试了我的主题的不同模板，但没有任何变化我搜索了很多...我的意思是 5 天内很多...我尝试了很多我在谷歌搜索这个问题时发现的建议我试图找到代码检查器或 HTML 代码分析器但这并没有帮助我尝试了这个线程中提到的东西：Cumulative Layout Shift with Bootstrap 4 grid

我没有看到据称是由这些元素引起的布局偏移，我能看到的唯一布局偏移在某种程度上没有被谷歌提及 - 但如果我删除导致我可以看到的布局偏移的应用程序，结果不会改变。（应用程序称为 Legal Pro - 需要保持商店符合德国法律的要求。它在价格和剩余库存之间注入产品数据。我无法更改应用程序，只能停用它。但即使应用程序被删除，灯塔数据没有改变。甚至一点都没有！

我愿意用具有较少 CLS 的代码完全替换产品页面的代码，但将完整的新代码适应现有页面是我的能力范围之外。我可以改变它，但不能写它。：-/

我会非常感谢任何帮助。给我一些我可以用谷歌搜索的东西。

（是的，我知道该页面上还有更多问题，但 CLS 现在给我一个糟糕的 Google 排名 - 当时有一个问题）

示例页面可以在这里找到： https ://besonderes-mit-liebe-handgemacht.de/collections/mannergeschenke/products/edle-kugelschreiber-von-hand-gedrechselt-besondere-holzer

该页面的产品页面代码是这样的：

我不知道为什么，但控制台会显示这个（见图）控制台怎么可能将整个块标记为 CLS 贡献？它应该显示为独特的小部件

这是要尝试的网址：

“https://www.bebemovil.com/inglesina-quid-2-silla-de-paseo-id575”

这也发生了...没有 cls 更改，但是 CLS 值太差了...我不明白（这是与此 url https://www.bebemovi l.com/inglesina-aptica-quattro- carrito-bebe-trio-3-piezas-id567 )

对于网址 https://www.acuitytraining.co.uk/news-tips/data-linking-in-ms-excel/（请删除空格）

在WebDev

它在 web.dev 测试中存在 CLS 问题，但 chrome 中的灯塔扩展没有此类 CLS 问题。 在铬灯塔

由于网站在站点范围内具有相同的布局，因此我们仅在新闻提示部分遇到问题。因此，为什么存在 CLS 问题令人困惑。

例如，这里https://cs.daihatsu-club.net/vozidlo/daihatsu-materia-8当我在 Chrome 开发者工具中将 Network throttling 设置为 Slow 3G 时，您可以通过填写为 IMG 保留 300x200px，但代价是不保持纵横比（失真），并且仅在一段时间后才显示裁剪，这要归功于“object-fit:cover;”。您可以在这个几秒钟的 YouTube 视频中看到糟糕的图像跳跃效果https://youtu.be/CF3EB3CxHY4

知道如何在保持图像被 CSS“object-fit:cover”裁剪的同时防止它吗？

在此处输入图像描述

我在移动设备上的 CLS 很高。用灯塔测试，它显示有 5 个大的布局变化。也许有人可以解释这个 div 和部分有什么问题。如何修复它？添加了一些截图 screenshot

截屏

截屏

许多在线游戏使用 HTML 元素的动画作为核心游戏机制。例如，纸牌游戏可能对游戏板上的每张牌都有一个 DIV 元素或一个 IMG 元素。玩家将这些卡片拖放到整个棋盘上，游戏通常会显示持续几秒钟的动画。这种动画的一个例子是发牌，即在游戏开始时将它们从牌组分配到游戏板上的适当位置。这通常在 1) 没有用户交互的情况下，在进入网站时完成，然后 2) 在用户交互之后，在完成一个游戏并开始另一个游戏时完成。

这些动画超过 500 毫秒，因此（据我所知）在此之后完成移动的元素将计入 CLS，无论用户是否启动了动画。此外，在网站上与用户打招呼的发牌动画完全计入 CLS。这可以通过强制用户在初始动画之前与网站交互来解决，但这是一个糟糕的用户体验，因为这对用户来说是额外的不必要且可能令人讨厌的点击。有很多东西要写，但现在，我只想说显示（不是用户发起的）问候动画是在这种情况下最好的 UX 实践，它被最流行的游戏（也使用帆布）。

基于 HTML 元素的游戏网站非常受欢迎，包括纸牌、麻将、扫雷等。有些网站在谷歌搜索结果中名列前茅，每月拥有数十万用户。我怀疑其他非游戏相关的网站也可能会使用用户欣赏的有用的 HTML 元素移动动画。因此，我一般会问：

1. 我是否正确理解 HTML 元素的此类动画，尽管是用户所期望的，但被当代 CLS 测量错误分类为意外？
2. CLS 措施的设计者是否有意惩罚此类网站行为？我特别询问 SEO，因为我怀疑 CLS 可能会被某些排名算法用作一个因素。

大家好，我的网站https://rudralife.com/有 87 个 URL 的 CLS 问题。该网站是用 PHP 开发的，所以谁能告诉我问题是什么以及如何解决？请给我一个诗人的解决方案