In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty 0 characters all lined up in a row).

But the width of the 0 character differs from font to font. So when our web font was swapped, the width of 1ch changed, which impacted our layout

In short, we wanted our list of top web performance recommendations to focus on:

• Recommendations we believe will have the largest real-world impact
• Recommendations that are relevant and applicable to most sites
• Recommendations that are realistic for most developers to implement

How Telegraph, the leading UK news website managed to improve their 75th percentile CLS by 250% from 0.25 to 0.1 in a couple of months.

Now, after having had some time in the hands of developers, the Lighthouse score has increased the weight of CLS from 5% to 15%, consistent with the methodology of having Core Web Vitals be the most heavily weighted metrics in the Lighthouse score.

Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.

The other half of this statement is in the ever growing Google of it all. This update is dipping a toe into creating other measurable User Satisfaction/UX metrics. So you should be thinking-- what annoys me about websites? How would I measure that? And is my own website up to the task?

Layout shifts can be caused by the following events:

• Changes to the position of a DOM element
• Changes to the dimensions of a DOM element
• Insertion or removal of a DOM element
• Animations that trigger layout

The first part of this article discusses tooling for debugging layout shifts, while the second part discusses the thought process to use when identifying the cause of a layout shift.

An impressive article to explain how not to cause Layout Shifts and penalize your CLS.

About the weight of CLS in Lighthouse

There are two reasons why people use CSS grid:

• 😎 CSS is awesome! It's a fact, deal with it.
• 🛠️ Grid is a great tool to build complex two-dimensional layouts.

I sometimes have a third reason to use CSS grid: prevent layout shifts.

Cumulative Layout Shift (CLS) is a relatively new metric to help you understand the delightfulness of the user experience.