Google focuses on a user-centered approach to ranking web pages. Based on Core Web Vitals, it rewards websites that perform well in terms of core content loading speed, initial input lag, and visual stability.
If your company is serious about its presence in Google searches and wants to get more leads from Google, you need to optimize your site for Core Web Vitals. A strategy targeting Core Web Vitals will allow you to deliver a better user experience and increase conversion rates.
Cumulative Layout Shift is one of these key metrics.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a metric used to measure the stability of your website as pages load.
A layout shift occurs when an element in the viewport moves from its starting position during page load. These elements are called unstable elements.
For example, if, while trying to read a blog post, an ad pops up between paragraphs that suddenly causes blocks of text to move down, it's unpleasant for users because it interrupts everything they're doing.
A good CLS score is less than 0.1. It may seem impossible to achieve this, but it is possible. Any score between 0.1 and 0.25 needs improvement, while any score above 0.25 is considered poor.
How Are CLS Scores Measured?
CLS can be measured in the lab or in the field (using real user data).
Field tools report RUM (Real User Monitoring) data, while lab tools are often used during development to ensure that new features/improvements comply with the threshold set for CLS.
How is Layout Shift Score Calculated?
layout shift score = impact fraction * distance fraction
The results provided by these two methods may differ in nature. As for CLS, the values reported by lab tools for a given page may be less than field data. This is because tools like Lighthouse only measure layout shifts during the page load process, and field tools can continuously report user values.
How to Optimize CLS
Here are some tips for optimizing CLS:
1. Specify image dimensions
To fix this issue, add the width and height attributes inside the <img> tag.
2. Make room for ads or third-party widgets
While you can't control the size of the content placed inside an ad, it's possible to keep track of how big the entire ad/widget is, or potentially how big it could be.
You can find ad sizes using Chrome DevTools and preform the ad container with these values.
Also, keep in mind that ads placed at the top of the page (even higher than website navigation) can cause larger perceived layout shifts than those placed in the middle of the page.
3. Optimize custom font distribution and replacement options
If the website uses a custom font and the font is not available in the system, the browser must download it before it can be used on the page. When downloading a font, a different font is used meanwhile. This can be defined by the developer in CSS or provided as a default browser property. The problem here is that the target font and the substitute font differ in the space occupied by a text.
So to avoid layout shifts caused by font-related issues, you can use the following:
Use the font display CSS property.
Preload key web fonts using the <link rel=preload> HTML tag instead of getting them remotely from the CSS.
These two methods can be used separately or together. You can use the font-display property to specify font substitution behavior and preload the font to increase the chance of it being downloaded and ready to render even before the page is visually printed.
4. Consider using placeholders for dependent DOM elements
If you have AJAX-dependent DOM changes on your website, consider allocating a space for results from the server. This solution is very similar to allocating space for ads and widgets, but in this case you can have more control over how big future content gets.
How is Cumulative Layout Shift (CLS) Calculated?
Unstable elements
First, the browser looks for unstable elements, i.e. elements that change their starting position during the page load process.
slip effect
Next, the browser determines the scrolling effect. For this, take the height of the area affected by the unstable elements and divide it by the whole viewport height. This way you can achieve the sliding effect.
sliding distance
Shift distance tracks how much an unstable element moves in relation to the viewport. Distance fraction is the distance traveled by the element divided by the width or height of the view, whichever is greater.
How is the slip effect calculated?
Google has given this formula on its official site as follows:
Layout shift score = Impact fraction * Distance fraction
What Does All This Mean for SEO?
Cumulative Layout Shift affects SEO because Google wants users to visit sites with a good user experience. If your web page does not have a good CLS score, it can affect keyword rankings and lower the performance of your overall SEO. In fact, higher CLS scores are associated with higher bounce rates and shorter session lengths, limiting the potential for users to return to your site in the future.
CLS accounts for 5% of weighted metrics in Google Lighthouse scoring. While not as important as other factors influencing optimization, you still need to create pages that support a positive, stable, and seamless user experience. So be sure to keep this important metric in mind as you develop and restructure your website for optimal SEO performance.
Comments