什么是 CLS 以及如何改进避免较大的布局偏移错误？

mdasaduzzaman17

在本教程中，我们将用简单的语言介绍什么是 Gtmetrix 工具中的累积布局偏移或 CLS，以及如何处理此错误？如何提高？这是一个错误吗？ 本文的作者是来自 Mizfa 的 Poriya Ariafar，这不是从其他网站翻译的文章，我们试图根据自己的知识和经验以及一系列信誉良好的网站为您收集一篇好文章。我们很高兴和我们在一起。 Cumulative Layout Shift 因素最初被 Google 包含在 Google Lighthouse 中，过了一段时间 Gtmetrix 工具也将其视为其因素之一。一般来说，无论谷歌做什么，其他人都会按照它行事，无论他们是否阅读它。


值得注意的一点是，速度因素不再像过去那么简单，而且要解决许多新因素，需要很高的专业知识（在编程、SEO，有时还有UX领域），而且没有什么特别的事情可以做只需阅读一些波斯 伊朗电报数据 语和外国文章。我先这么说是为了让我们暂时不要对自己或这篇文章抱有太大的期望 这就像一个奇迹：例如，让我们给出一个代码，然后编辑它并将其放在您的网站上，这个因素就会改善并且变绿有期待）。 重要提示：在“结构错误”部分中，我们有一个标题为“避免大型布局偏移”的错误，该错误与本文完全相关，因此通过阅读本文，GT 矩阵中的“结构错误”报告和“性能”报告都会很有用。 帖子标题[ 隐藏] 0.1累积布局偏移到底是什么？ 0.1.1专业语言中的CLS是什么？ 0.2累积布局偏移的好坏基准 0.3如何减少累积布局偏移？ 0.3.1 1-指定图像尺寸错误 0.3.2 2- 页面内广告 0.3.3 3 – 意外的动态内容 0.3.4 4- 不先加载字体也不错 0.3.5 5- 动画 0.3.6 6 – 以及其他改善累积布局移位时间的项目 0.4布局偏移并不总是坏事！




0.5 CLS总结 1新 GTmetrix 教程列表： 累积布局偏移到底是什么？ 您是否曾经进入过一个网站，并且正在等待该网站的一部分加载，但是在该网站加载之后，该网站的该部分就宕机了？或者你想点击一个按钮，例如网站内的“是”，直到你的手想要触摸该按钮，按钮上方就会出现一段文字，你可能会不小心点击“否”，从而获得糟糕的用户体验。 Cumulative Layout Shift，缩写为CLS，它来了，说是解决上述问题，而不是在网站上，就这么简单。 CLS 数字越低越好，越高，您的网站需要更多优化。 播放视频 看上面的视频，首先加载了中间的绿色部分，而上面的绿色部分没有加载，但是它的位置是空的，并且它是一点一点加载的，并且我们上面的不同部分之间没有任何过渡图片。