Cumulative Layout Shift: What It Is and How to Measure It

我们都将其发生在我们身上：我们尝试在网站上选择一个选项，然后在我们单击之前，页面跳开了，我们最终会单击我们的意思。啊！

Like a game of “down low, too slow”, this website behavior makes us feel slow and frustrated. Fortunately, website developers are now incentivized to improve their site experience with the release of Google’sCore Web Vitals;一组有助于站点所有者测量并改善其网页的用户体验的指标。

Cumulative Layout Shift is one of these key metrics that measures the “jumpiness” of a website and how it unexpectedly moves as elements load. Let’s take a closer look at how this metric works, and how you can make sure your own website is following best practices so you rank higher on search engines and provide your users with a better experience.

What is Cumulative Layout Shift?

Cumulative Layout Shift (or CLS) is a measure of how much a webpage unexpectedly shifts during its life. For example, if a website visitor loaded a page and, while they were reading it, a banner loads and the page jumps down, that would constitute a large CLS score.

除了最大的内容油漆（加载最大内容所需的时间）和第一个输入延迟（页面进行交互或“可单击”需要多长时间），CLS是Google核心网络生命值的一部分。Google的Web爬行者在他们索引的每个页面上测量CLS。

是什么原因导致累积布局转移？

当内容以不同的速度加载并导致布局更改并改变观看者所看的内容时，页面移动会发生。广告加载缓慢，大小突然出现的视频或动态添加的DOM元素都是CLS的潜在原因。

The example below shows what happens when an ad banner is loaded after the rest of the webpage loads. The content is pushed down, and the user experience is negatively impacted.

来源

可能很难知道您的用户是否正在经历CLS，因为并非每个设备或环境都以相同的方式运行。如果您在开发环境中加载网站，则可能会缓存元素，或者它们可能在本地加载。基于Cookie的个性化Web内容对每个访问者都会有所不同，尤其是取决于其位置。另外，移动用户的体验可能非常不同 - 对于在小屏幕上查看网站的人来说，网络浏览器上的小转变可能是巨大的。真正了解用户体验的唯一方法是测量CLS，我们将在下面介绍。

Why is CLS important?

Understanding CLS is critical for two reasons: your visitors’ experience and your search engine ranking.

Your visitors have high expectations when it comes to your site’s performance. In 2020,93％的人reported leaving a website because it didn’t load properly.

加载碎片或出乎意料的行为的跳跃网站会导致您的访问者找到另一个网站浏览。而且，如果他们确实坚持下去，那么高CLS得分可能会导致可用性问题，例如选择错误的选项，过早检查或完全缺少网站的部分。

只有在智能手机上浏览的大量互联网用户会加剧这个问题。在小屏幕上查看网站时，网站上的任何跳跃和布局变化肯定会对mobile user experience.

优化您的网站并减少累积布局变化对于为客户提供良好的体验至关重要。

Secondly, Google ranks sites based on their page performance. A better user experience results in a higher search ranking. If your page doesn’t meet the standards that Google lays out in their Core Web Vitals guidelines, your site will be penalized.

Google不想将人们带到表现不佳的网站。与CLS最佳实践保持一致可以帮助您的网站提高排名。从那以后68% of online experiences start with a search, making sure your site shows up on the search results page is important to generating inbound traffic.

您如何衡量累积布局变化？

好消息是，您不必自bob官网官方网站己测量CLS，因为Google可以使用他们的PagesPeed Insights工具或使用Lighthouse工具在Chrome浏览器中分析您的页面性能。

To analyze performance inPageSpeed Insights:

1. Enter a website URL into Google's PageSpeed Insights tool.
2. Click 'Analyze.'
3. 检查您的表现。您可以查看手机和桌面性能，可以在使用左上角导航之间切换。

The page analyzed below shows a good cumulative layout shift score of 0.001.

To analyze performance using Lighthouse tools:

1. Open up the website you want to analyze in Chrome.
2. 通过单击浏览器窗口右上角的三个点，选择“更多工具”，然后再使用“开发人员工具”来导航到开发人员工具。
3. When the console opens, choose “Lighthouse” from the options along the top.
4. 单击“生成报告”。

The page below shows a CLS of 0.109, or “needs improvement.”

灯塔提供了一个详细的审计来讲的ibuted to that score. To review the audit, scroll down and choose “Show audits relevant to CLS.”

有关冲击分数和距离分数的更多信息

Two terms you might see when researching CLS are "impact fraction" and "distance fraction." These are the two variables that Google uses to calculate CLS.

布局移位分数=冲击分数x距离分数

与视口相比，影响分数与不稳定元素的大小有关。距离分数是不稳定元素移动的数量作为视口的比率。

因此，高CLS将由一个大元素组成，移动很远的距离。一个小的CL将是小元素仅移动一小距离的结果。

CLS is the largest “burst” or group of layout shift scores that occur during a session window. Essentially, if a bunch of shifts happen within a five-second window, this would be considered disruptive and result in a large CLS score.

什么是好的CLS分数？

良好的累积布局得分不到0.1。PageInsights或Lighthouse工具的报告将自动标记任何差分数，并提供有关如何优化页面以提高性能的建议。

来源

如何改善累积布局变化

There are a few best practices that website owners can follow to improve their CLS score:

1.使用CMS（内容管理系统）。

Especially one that integrates with Google Lighthouse or other diagnostic tools. This will make sure that you’re designing with best practices in mind, and flag any issues before you launch your site.

2. Specify size attributes for images and videos.

Rather than letting them set their own height and width, dictate size attributes for your media. By setting these attributes, you’re telling the browser how much space to set aside, even if the image isn’t loaded yet.

3.了解广告如何影响您的布局。

Google Publisher标签提供有关有关的广泛指导how to reserve space for ads.

在视口下载新内容。在用户查看的内容上方加载内容通常会导致页面移动。

4.使用过渡和动画在页面更改周围提供上下文。

例如，一个“阅读更多”链接将用户向下滚动页面不会影响CLS，因为这是预期的布局变化。

关于预期与意外布局变化的注释

CLS仅考虑意外的更改。如果布局因用户发起的操作而发生变化，则不会对CLS产生影响。当您不需要一次加载所有内容时，这是一个有用的工具。取而代之的是，为用户提供机会，可以选择他们想通过“阅读更多”链接或“扩展主题”手风琴查看的元素。

在CLS优化方面提供更好的用户体验

注意CLS不仅提供了更好的用户体验，而且还可以提高您的搜索结果排名。这是双赢。

To meet Google’s standards for CLS, start by using a diagnostic tool to measure your website’s current performance. Take into account the basic guidelines outlined above, and keep layout shifts top of mind when designing your website, especially around transitions and content additions. With these few simple considerations, you’ll see better results across the board.