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).
A large portion of HTML, CSS, JavaScript, and other resources can be loaded after the content in the initial view has been fully displayed in the web browser. CLS ensures that what is loaded later does not alter the page in a way that impairs UX when visitors start to browse the page.
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.
Advertisements, iframes, JavaScript animations, and dynamic content on a web page can cause a layout shift effect to display in the browser. The impact fraction measures the amount of vertical space in the page view that the content shifts when rendered. This value is given by the percentage of the viewport that the shifted page elements occupy after being rendered.
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.
SEO purposes
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.
UX purposes
Expected layout shifts that are caused by JavaScript, AJAX, or web page content elements (i.e. drop-down menus, carousels, or dynamic content lists) are not included as part of the CLS calculation if they are part of the GUI and operate manually. Developers can review the analytics provided by Lighthouse or other utilities and test Google PageSpeed scores for their web pages to assess the CLS results for UX feedback. The analytic information provided by Google helps to correct any outstanding issues with a web interface based on expert recommendations.
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).
The final CLS score is calculated by multiplying the impact fraction by the distance fraction. The ratio is then combined with the other metrics from Core Web Vitals to produce the PageSpeed score at a weight of 15%. Tests can be conducted through PageSpeed Insights, Chrome Dev Tools, Chrome User Experience Reports, CLI, or by using the web-vitals JavaScript library.
Lab Data
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.
Real-User Data
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.
CLS in JavaScript
The web-vitals JavaScript library allows developers to test web pages directly and replicate the results from Chrome User Experience Report or Page Speed Insights. The script will also model the results from Search Console’s Speed Report. The Layout Instability API, available for free download on GitHub, will test the Cumulative Layout Shift score only without other variables.
What affects CLS score?
The most common cause for a layout shift is the use of images, embedded videos, iframes, JavaScript animations, and other content elements that do not have a specific height and width declaration in CSS. Without size specifications, the browser must wait until the files are received to calculate and refactor the display for different screen sizes, which causes the cumulative layout shift effect to occur across different session windows of the total viewport for the page.
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.
10Web Booster is an automated front and backend website optimization solution for Google PageSpeed. You can install the plugin and connect your website to the Booster service for HTML/CSS compression, JavaScript minification, image/iframe/video lazy-loading, critical CSS generation, container-specific image resizing, and other techniques that will guarantee a “good” value for CLS on all the optimized pages, without breaking them. This will improve SEO across all website URLs.
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.
Google PageSpeed Insights will pull URL data from cached resources and CDN servers if they are active for anonymous users. The results of Core Web Vitals testing and other metric calculations will be different for logged-in and anonymous users. In order to test the page load speeds for logged-in users of WordPress sites, it is required to turn off caching or use JavaScript/CLI solutions for analysis. In this manner, developers can test the performance gains acquired by most caching solutions, as well as optimize the pages for community members.
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.
