CLS : deep dive into one of the core web vital metrics

Google has announced an updated ranking algorithm called Page Rank Experience which will measure web pages based on the user experience. When will it happen? Sometime in 2021… ¯_(ツ)_/¯

Also, once it does, AMP won’t be the criteria to be featured in Top Stories any longer.

Except when it's not. What we mean is that this type of metric will never become a priority ranking signal for SEO. This doesn't mean that you should ignore CLS but simply acknowledge that it is one of the many things that Google looks at when evaluating your website. Page Rank Experience to measure pages based on UX. With PRE, Google aims to rank websites that are serving accessible, usable content.

If Google thinks users are having a poor experience on your website, your rankings will suffer. Google's studies have shown that visitors are 24% less likely to abandon a site that meets Core Web Vitals requirements.

Details on Page Rank Experience (PRE)

Google already uses many existing factors such as Mobile-friendly update, Page Speed update, HTTPS ranking boost, intrusive interstitials penalty, and safe browsing penalty as ranking factors.

What’s measured:

• Largest contentful paint (LCP): This is about your page speed. How fast does your website load?
• Cumulative layout shift (CLS): This is basically Google asking “How visually stable is your website?” Have you ever landed on a page, clicked a button, and at the last second it shifts and you hit something else? CLS is against that.
• First input delay (FID): How quick are your interactivity features? When the user clicks on something, how long does your site take to process it and give back a result?

CLS measures visual stability

Aim for CLS below 0.1.

There is a Core Web Vitals report in Google Search Console. It will tell you if all the URLs that Google has in its index are good or need improvement.  To investigate, use the Search Console and the Page Speed Insights tools. There are other tools available as well:

You can see your CLS score in the metric summary at the top of your Lighthouse audit.

1. From the menu, go to “more tools” and then “rendering”.
2. Go to “layout shifts regions”.
3. The shifted content will be highlighted in blue.
4. Being able to see which content shifted the most is the useful in debugging this issue.

Here are some other tools you can use

• You can also go to the Chrome User Experience report CrUX.
• For more granular data : there’s a JavaScript API in Chromium. You can calculate rates like the layout shifts per minute.
• Or get a gif generated with this tool like I did for this article above.

First, they look at how much of the area on the screen is affected : the impact region. They look at the DOM elements that shifted from one animation frame to the next.

Usually ads are the ones that mess us up. The ads are not considered as a shifted element because Google doesn’t want to penalize new elements because it’s a common thing that happens during progressive rendering.

If there are many shifted elements in the same animation frame or if elements move both horizontally and vertically, you can have multiple zones showing up, not just a neat rectangle. So they look at the impact region as compared to the viewport to provide a normalization across different device sizes and window sizes. They look at a ratio called the impact fraction : impact region to the viewport.

If something moves a lot, it’s more distracting than if it moves a little. So they look at what’s the farthest distance a shifted element can move by without damaging the user experience with the maximum move distance for each frame.

Layout Shift Score

If we add up these metrics from the start of the page load until the end when the user exits the page, we get a cumulative layout shift score because we are calculating metrics per animation frame.

Problem with this is that the rendering can change (asynchronously) in response to user input. Their solution was to provide an inclusion input window to ignore shifts within half a second of the input.

Problem: if you animate a layout related property with CSS (like position offsets), it causes Google to rerun the browser’s layout engine on every animation frame. Since every frame produces a layout shift, the cumulative layout shift score is huge.

Their solution was to ignore changes to the transform property. Transform doesn’t influence the surrounding layout. As long as your carrousel is built with that, your CLS score is safe. Bonus : the transform property allows you to be more efficient even if your page is script heavy.

Other common issues to consider:

• Unsized images : add size attributes or reserve the required space with CSS aspect ratio
• Slow-loading fonts : on slow connections, text can load before the font. Consider font-display:optional or consider a font style matching tool for your fallback font.
• Injected content after the page was loaded : reserve space for large late-loaded promos and for small promo bars or use position:fixed or reserve space for both.
• Flash of unstyled content : ensure CSS is loaded before content.
• Animations that trigger layout changes : use the transform property instead of properties that cause a layout shift. Check CSStriggers for a list.