Cumulative Layout Shift deals with the issue of users facing unexpected layout shifts throughout their session. Let’s say you are reading an interesting article, and suddenly something abrupt happens on the page, or maybe you click on a specific button and the whole layout shifts. It gets pretty annoying, and users tend to leave the site immediately.
Before we begin, you can take a look at:
Optimizing Largest Contentful Paint (LCP) for faster loading and better user experience.
Optimizing First Input Delay (FID) for better interactivity with the user.
What is the layout shift?
It is the unexpected behaviour or movement on a page that may usually occur due to existing elements changing their start position or when new elements are added, and as a result, the visible elements start to change their positions. The layout shift score is a product of two measures of that movement:-
Impact Fraction: The impact fraction measures how unstable elements impact the viewport area between two frames where the areas of all unstable elements for the previous and current frame are measured.
Distance Fraction: The distance fraction measures the distance that unstable elements have moved, relative to the viewport.
A layout shift score is calculated as mentioned below:
Layout shift score = impact fraction * distance fraction
Understanding the core metrics of web vitals in detail.
What is a good CLS score?
The sum total of all individual shift scores for each unexpected layout shift occurring is considered as CLS score. To provide a good user experience, the CLS score should be less than 0.1. A score between 0.1 and 0.25 needs improvement, and a score of more than 0.25 is considered to be poor.
Causes for poor CLS:
Let us take a look at the leading causes that lead to unexpected layout shifts and further a poor CLS.
Images without dimensions: Back in earlier days, the developers used to mention width and height attributes to the images. Further, when they started using CSS to resize images, these attributes were no longer considered.
However, in order to avoid layout shifting, one must include the width and height size attributes on the image and video elements. For responsive images, srcset defines the images you allow the browser to select between and what size each image is.
Choose Readwhere CMS to build a user-friendly website and boost your revenue.
Ads, embeds, and iFrames without dimensions: One of the major reasons for layout shifts is ads as usually the dynamic ad sizes are considered. At times, these ads push the visible content down the page and make the layout look clustered.
One can follow the mentioned steps to reduce ad shifts:
- Reserve a space for ad slot
- Look after placing non- sticky ads near the top of the viewport.
- Consider historical data for choosing a size for ad slots.
- Reserve the largest possible size of the ad slot to eliminate shifts
Platforms offering embeds can cause layout shifts as they do not always reserve enough space for the same. As the embeds can take a number of forms like inline HTML snippet, iframe embeds, HTML fallback and a JavaScript tag transforming the fallback into a fancy embed.
Here is how you can deal with embeds:
- Obtain the height of your final embed by inspecting it with your browser developer tools
- Once the embed loads, the contained iframe will resize to fit so that its contents will fit.
Dynamically injected content:
Inserting new content above the existing content is also a significant reason for layout shifting. If you wish to have a good CLS score, avoid inserting new content above the existing one. You can experience layout shifts due to the UI that pops-in at the top or bottom of the viewport when you try to load a site. Instead, you can reserve sufficient space in the viewport for it in advance. Whenever it loads, it will not cause any shifts in the content.
Web Fonts causing FOIT/ FOUT:
Having new font styles and emojis may look cool, but it can also cause layout shifts in the mentioned ways:
- The fallback font is swapped with a new font (FOUT – flash of unstyled text)
- “Invisible” text is displayed until a new font is rendered (FOIT – flash of invisible text)
The solution to the same can be obtained by using various developer tools.
You can always write to us at helpdesk@readwhere.com if you wish to get going with web vitals for your business.
