Contents
What does cumulative layout shift mean?
Cumulative Layout Shift (CLS) is a performance metric introduced in 2020 by Lighthouse to measure the perceived visual stability of a page load. Simply put, CLS measures the unexpected shifting of web elements while the page is being rendered.
How important is cumulative layout shift?
The Cumulative Layout Shift is an essential metric that measures visual stability. It quantifies the number of times users experience layout shifts that were not expected. As a result, a lower CLS score means that the content is stable and not shifting, and a high CLS can impact your SEO.
What is a good cumulative layout shift?
The lower your score, the more stable your layout is. Official CLS scores used by Google’s performance tools are as follows: Good – CLS below 0.1, Needs improvement – CLS between 0.1 and 0.25, Poor – CLS above 0.25.
How is CLS score calculated?
Formula to Calculate Google CLS Score The Cumulative Layout Score is calculated by multiplying the Impact Fraction by the Distance Fraction: Cumulative Layout Shift (CLS) = Impact Fraction x Distance Fraction CLS = 0.645 x 0.179 CLS = 0.1154. The CLS score keeps rising as the impact and the distance fraction increases.
How do you avoid cumulative layout shift?
To prevent cumulative layout shift from images, always include width and height size attributes on your images and video elements. UA stylesheets from the browser will then add a default aspect ratio based on the element’s width and height attributes.
What is a CLS score?
CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
How do I lower my CLS score?
You can try these steps to reduce the chances of high CLS because of ads:
- Reserve space statically for ad slot.
- When putting ads in the content flow, make sure the slot size is allocated to avoid shifts.
- When putting non-sticky ads near the top of the viewport, take extra care.
How do I reduce my CLS time?
First, you can reduce the time it takes to download web fonts by using the Font Loading API. You can also use the font-display tool to change the rendering custom fonts to values such as auto, swap, block, fallback, and optional if they take too long.
What’s the best score for cumulative layout shift?
CLS looks at the proportion of the viewport that was impacted by layout shifts, and the movement distance of the elements that were moved. What’s a good CLS score? A CLS score can be as low as 0 for fully static pages and gets higher the more layout shifts occur on the page.
When does the cumulative layout shift ( CLS ) stop?
CLS ignores all layout shifts that appear within half a second from user input. It’s called the input exclusion window. This means that CLS measurement stops for 500ms after every user interaction with the site. So, if the layout change is intentional and caused by the user, it won’t affect your CLS.
What are the effects of multiple layout shifts?
Negative effects of multiple layout shifts span from mild annoyance to even accidentally purchasing the wrong product. It can result in bad reviews for the company and discourage users from returning to the site as well as repel new clients.