What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vitals metric defined by Google that measures the visible stability of web pages. When unexpected shifts in the display of content occur in the loading of a web page due to image resizing, ad displays, animation, browser rendering, or other script elements, such shifts lower the quality of user experience. This can make visitors confused or require them to wait till the webpage loading is completed, which takes more time.
Cumulative Layout Shift (CLS) is 15% of the total PageSpeed score for a web page. The Largest Contentful Paint (LCP) and First Input Delay (FID) components are included with CLS in the Core Web Vitals measurement. Cumulative Layout Shift (CLS) complements LCP and FID to provide a balance between fast-loading web pages and a good user experience (UX).
CLS is a unitless score calculated by averaging layout shift factors over multiple session windows for up to 5 seconds. The layout shift score is a result of multiplying the impact fraction by distance fraction. Google recommends a CLS score of less than 0.1 for “good” ratings.
10Web Booster is one of the best solutions to automate obtaining good CLS scores for a wide range of WordPress websites. It makes use of the most effective frontend and backend optimization techniques, without breaking websites. 10Web Booster guarantees consistently high CLS and CWV scores as well as 90+ PageSpeed scores for both mobile and desktop.
Definition: what is CLS?
Cumulative Layout Shift (CLS) represents 15% of the Google PageSpeed score (which is calculated from the combination of six factors weighted together) to give a representation of the performance of a web page for users. The factors used in the calculation of the Google PageSpeed score by Lighthouse in the generation of SEO reports are:
- FCP (First Contentful Paint): 10%
- SI (Speed Index): 10%
- LCP (Largest Contentful Paint): 25%
- TTI (Time to Interactive): 10%
- TBT (Total Blocking Time): 30%
- CLS (Cumulative Layout Shift): 15%
The CLS metric was introduced in 2020 as a part of the Core Web Vitals standard. In 2021, Google revised the calculation of the distance fraction to a limit of 5 seconds maximum and changed the weighting of the CLS variable from 5% to 15% in PageSpeed scores.
The algorithm combines layout shifts and groups of shifts happening during small limited intervals called session windows while the page is being loaded. It also calculates an average of shift factors in each session window, while ignoring the session windows with very small shifts. The shorter the time that shifts happen, and the smaller the distance that the elements in the web page are shifted in display rendering by the browser, the better the overall score is.
The primary cause of CLS delays in the rendering of content is the lack of CSS size declarations on image and video content. Because the browser needs to download the image to receive the length and width ratios, it causes delays to the total page load speed. When the browser resizes the page elements, it causes the distinctive layout shift effect.
What is a good CLS score?
Google considers a “good” CLS score to be less than 0.1 for PageSpeed rankings. A CLS value between 0.1 and 0.25 is rated as “needs improvement”. Otherwise, a CLS value that charts above 0.25 is rated as “poor”. This value is then weighted as 15% of the final Google PageSpeed score as calculated by Lighthouse analytics.
A good CLS score is vital to search engine optimization. Google PageSpeed Insights testing is based on the use of Core Web Vitals and other metrics to represent web page performance speeds. Core Web Vitals and Cumulative Layout Shift are part of Google’s algorithmic ranking system for SERPs, which include factors like keywords, titles, URLs, and links from other sites.
Core Web Vitals represents 40% of the Google PageSpeed score when the Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) metrics are applied. Google’s John Mueller stated that CWV is “a ranking factor, and… more than a tie-breaker, but it also doesn’t replace relevance.” Core Web Vitals is now a priority focus for SEO improvement.
How is CLS calculated?
The CLS score is calculated on the basis of the formula: layout shift score = impact fraction x distance fraction. The impact fraction measures the stability or instability of the current frame, which is taken as a fraction of the total viewport. The average values of 5 session windows measured over 5 seconds are compiled by Lighthouse tests for impact and distance fractions.
If a dynamically rendered image and shifted text content occupy 70% of the viewport, the impact value is charted as 0.70. If the amount of visual space the text is shifted down is measured at 50% of the viewport, the distance fraction is charted as 0.50. The final layout shift score is 0.35.
- The impact fraction represents the percentage of the viewport occupied by both the rendered and shifted elements in the display. The value ranges from 0 to 100 according to the percentage of viewport space occupied by both elements after the shift.
- The distance fraction is defined by the largest of shifts (either horizontal or vertical) the content elements are displaced in the viewport. The value ranges from 0 to 100 according to the percentage of viewport space, meaning that is divided by the width or height of the viewport (the dimension that is larger).
When performing Google PageSpeed Insights analysis of a web page, the Lighthouse script uses lab data to calculate the Core Web Vitals (CWV) metrics. The web page and its dependencies are downloaded to a data center for testing under simulated conditions for different user devices and connection speeds. These are not guaranteed to be replicable.
Although Google does not disclose all of the factors that are combined in their search engine ranking algorithm, the calculation of PageSpeed scores for SERP displays is based on real-user data from Chrome User Experience Reports. When users opt into browser reports, Google collects their performance data on individual URLs for the purposes of search page rankings.
What affects CLS score?
Web fonts loaded later, dynamically injected content, and DOM actions can also affect the Cumulative Layout Shift score negatively. Use analytics to debug and correct these issues.
How to properly use animations and user interactions?
To properly use animations and user interactions, Google recommends using CSS transformations and not changing the positions or sizes of elements in a webpage. Rendering animation content in the web browser requires specific context and continuity to avoid a wait in the calculation of dimensions for images or fonts.
Make sure to set image sizes on animations with the same aspect ratio across device displays. Use CSS to declare the height and width of all elements in animations across a site by default.
How to improve CLS score?
Recognizing where layout shifts occur in the initial viewport area and lowering their distance and impact factors (that is making sure larger elements are not shifted) is the best way to improve the CLS score. This is done by declaring the CSS sizes for images and embedded content so that the areas are not shifted by the browser when loading. With this method, browsers automatically reserve space for display elements without a layout shift. You can also declare size values for dynamically injected content to avoid a layout shift.
Make sure to preload web fonts to avoid Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) effects. Avoid dynamically injecting content into page sections that cause a potential layout shift below the viewport. Use analytics to test pages and implement the recommended layout and code changes provided by the PageSpeed Insights report.
For advertisements, it is possible to display the height and width of page sections using DIV declarations with CSS. It is also recommended to add an alternative display image for users that browse with ad blockers in order to preserve the design and avoid any potential layout shift problems. Sites should also declare height and width values for iframes and YouTube videos.
Animations that shift content up and down due to irregularly sized frames are one of the worst causes of layout shift issues. The standardization of slide size and the implementation of guided context rules for transitions will improve the CLS test score for most pages. Consider adopting animation and slideshow display frameworks that include the height and width via CSS on elements. Reserve the layout space and load animations last for the best CWV scores.
How to fix CLS score for WordPress sites?
If your WordPress site needs better speed, 10Web Booster optimizes any WP website on any hosting platform algorithmically, without the need to manually configure settings. Other plugin solutions for CLS improvement on WordPress sites available under both free and subscription licensing are: WP Rocket, WP Super Cache, W3 Total Cache, Perfmatters, and WP Fastest Cache.
These plugins will manage many different options for Google PageSpeed optimization including caching, compression, minification, and the lazy-load of images. However, note that many of these plugins can conflict with each other or be difficult to configure with the best settings for a website. A careful choice is needed for a solution that achieves the best scores independently.
In order to pass the CLS test and achieve 90+ scores on WordPress pages automatically, consider the benefits of adopting 10Webs Booster for production websites. Pass Core Web Vitals tests with ease and improve your website’s PageSpeed Insights score for Google search engine rankings by implementing industry best practices on all URLs. 10Web Booster is a comprehensive solution to fix Cumulative Layout Shift problems for WordPress SEO.