Google has a new way to matriculate the website performance and it’s called Core Web Vitals. There are three matrices to calculate the core web vitals.
- LCP (Largest Contentful Paint)
- CLS (Cumulative Layout Shift)
- FID (First Input Delay)
What is CLS and why is it impacting SEO?
Cumulative Layout Shift (CLS) measures the score of all unexpected layout shifts of the webpage. A layout shift occurs when visible site elements change their position or change the size during page load.
The best way to pass the Cumulative Layout Shift (CLS) is to reduce the size of the CSS. You need to make sure you are not shifting the layout of the website and it provides a good user experience.
It has 15% of Weighting in core web vitals. To Pass the CLS in core web vital it requires a score below 0.1. Cumulative Layout Shift (CLS) is a Google metric that measures a user experience based on googles algorithms that define the ranking of the webpages, so it becomes an important factor for ranking in search results.
As a rank factor, we should worry about the CLS score. Moreover, a high CLS score means that your users have a hard time engaging with the web page.
How is CLS calculated?
There are two metrics responsible for the measurement of CLS score.
- Impact fraction
- Distance fraction
Cumulative layout shift score = Impact fraction * Distance fraction
Impact Fraction: In simple terms, impact fraction is the area affected by the layout shift. Let’s take an example. We have an image section that covers the50% of the viewport. After the layout shift, it got pushed down by 25%. So, the impact fraction is 0.75.
So, it’s basically the portion of the viewport which got impacted by the shift.
Distance fraction: It’s basically the distance element moved. Its score page moved from its original position. As per the above example, the element is pushed by 25% so the distance fraction is 0.25.
Final CLS score is Impact Fraction x Distance fraction. Which is 0.75 x 0.25 = 0.1875. This is how CLS is calculated.
How to measure Cumulative Layout Shift?
There are two ways to measure CLS. The first is “The Lab” and the second is “The Field”.
In the lab basically means testing the new webpage or feature before launching. It’s required to test in the lab before releasing the feature in production. It gives us the possible result and you can prevent performance issues after the release.
Lab tools:
- Chrome DevTools
- Lighthouse
- WebPageTest
In the Field give the result of the real user’s loading and interaction with the web page. It’s real user data, the lab-tested results can be varied because real data depends on the different devices and network strengths.
Field tools:
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Chrome User Experience Report
What Causes Poor CLS?
The most common points that can cause the issue are:
- Images without dimensions
- Ads, embeds, and iFrames without dimensions
- Dynamically injected content
- Web fonts FOIT/FOUT (Flash of Invisible Text and Flash of Unstyled Text)
- HTTP response & elements synchronization
Images without dimensions:
There are a few ways to fix the CSS like giving the width and height to the images. Yes, giving the height and width can fix the CSS. In earlier days developers used to give the Width and Height to the image however after the responsive design was introduced, they started omitting height and width from the Error! Filename not specified. and started applying the same in CSS
<img src="example.jpg" width="640" height="360" alt="Core web vital" />Modern web browsers now set the default aspect ratio of images based on the height width attributes of an image. So, it’s a good practice to set them to prevent layout shifts.
Using the srcset attribute we can address this for the responsive as well. With the srcset you let the browser choose between what sizes each image is. To set attributes of img width and height, each image should use the same aspect
ratio.
Ads, embeds, and iFrames without dimensions:
It is critical to ensure that the ads are loading properly and are not causing layout shifts. If there is not enough space for the ad to be shown in the proper place, it will cause a shift in the layout and it may also affect the user experience. Same like the iFrames and the embeds do define the placement and set the placeholder for the content load. It can be a significant contributor to layout shift if placements are not properly optimized.
Dynamically injected content:
Never insert content above existing content, except in response to user interaction. This ensures any layout shifts that occur are expected. Create the placeholder if you intend to load the content dynamically and define where it is going to be loaded.
Web fonts FOIT/FOUT:
If we are using the online hosted fonts, they might be the main cause of FOIT (Flashes Of the Invisible Text) and FOUT (Flashes Of the Unstyled Text).
Using all those fancies Google Fonts sometimes leads us to the problem.
FOIT: While the browser is downloading the fonts it often displays the blank space and once the downloading is completed it will show the content and it usually shifts the layout.
FOUT: Another scenario is the browser shows the system fonts until it downloads the real fonts. This creates a flash of unstyled text or commonly known as FOUT. Also, the amount of space consumes by the system fonts and the real will be different which can again lend to layout shift.
To avoid this, you can use font:display values such as auto, swap, block, fallback, and optional. For an even better result. We can also preload font files using <link rel=preload>. This way they will be downloaded as a priority asset.
Here are the font display values:
| Block Period | Swap Period | |
| block | Short | Infinite |
| swap | None | Infinite |
| fallback | Extremely Short | Short |
| optional | Extremely Short | None |
HTTP response & elements synchronization:
HTTP response may also cause issues with the content layout. While content is waiting to download and update the DOM it may cause the layout shift. We either need to add the space in DOM else synchronize the load with the required elements.
Summary:
Cumulative Layout Shift (CLS) is very important. We need to give extra attention to the content that appears above the fold so it doesn’t appear to be “jumbled” or off-centered. It is different from website to website and page to page, such as the content, we have above the fold example banners, slides, videos, and animation. When it comes to implementation, the extra precautionhelps you fix the Cumulative Layout Shift (CLS). Improving the CLS will give your users a better user experience.