Cumulative Layout Shift: How To Improve GSC’s CLS Metric

Understanding Cumulative Layout Shift

Definition and Importance of CLS

Cumulative Layout Shift quantifies how much webpage elements unexpectedly move while users view or interact with a page. A good CLS score is 0.1 or less, indicating a stable and user-friendly experience. Layout shifts occur when elements like text blocks, images, or buttons suddenly change position – for example, when a user tries reading an article and the text jumps because an image or ad loads above it.

These shifts create poor experiences by causing users to lose their place while reading, accidentally click wrong buttons, or struggle to interact with page elements. CLS has become particularly important since 2021 when it became part of the Core Web Vitals metrics that influence search rankings. The score is calculated by combining two key measurements: the impact fraction (how much viewport space is affected by unstable elements) and the distance fraction (how far elements move relative to the viewport).

How CLS is Measured

Cumulative Layout Shift (CLS) is measured using a combination of two key factors: impact fraction and distance fraction. These measurements help quantify how much visible content moves unexpectedly and how far those elements shift within the viewport.

• Impact Fraction: Measures how much of the viewport is affected by shifting elements. If an unstable element moves from one frame to another, the impact fraction is calculated by taking the combined area of the element’s old and new position as a fraction of the total viewport.
• Distance Fraction: Determines how far an element moves relative to the viewport height. It is calculated by dividing the greatest movement distance of an element by the height of the viewport.

The CLS score is determined by multiplying these two fractions:

CLS Score = Impact Fraction × Distance Fraction

For a page to be considered stable, the CLS score should ideally be 0.1 or lower. A score above 0.25 is considered poor and may negatively impact user experience and SEO rankings.

To monitor CLS, developers can use tools like Google’s Lighthouse, Chrome DevTools, and the Web Vitals JavaScript Library. These tools help analyze layout shifts, identify problem areas, and suggest optimizations to maintain a smooth user experience.

Images Without Dimensions

Images without explicit width and height attributes are a major source of layout shifts that harm user experience. When images lack dimensions, browsers initially collapse them to 0 height until they load, causing content below to jump up and then down once the image appears. This shifting occurs because browsers can’t reserve the correct space for dimensionless images before downloading them to determine their size.

To prevent these shifts, always include width and height HTML attributes on image elements. These attributes allow browsers to calculate the image’s aspect ratio and reserve appropriate space before the image loads. For responsive images that need to scale, combine the HTML dimensions with CSS that sets max-width: 100% and height: auto – this maintains the aspect ratio while allowing proper resizing. Many modern frameworks offer image plugins that automatically set these dimensions at build time.

Dynamically Injected Content

Dynamically injected content like ads, cookie notices, and related content widgets can significantly impact layout shifts when not properly implemented. Content injected above existing page elements causes everything below to shift downward unexpectedly. Common examples include late-loading advertisements that push body text down, cookie consent banners appearing at the top of pages, and dynamically loaded related content sections.

To minimize these shifts, we recommend:
1) Reserving space in advance for dynamic content using min-height CSS properties, especially for advertisement slots
2) Injecting new content below existing content unless specifically triggered by user interaction
3) Using bottom-of-page placement for notices and banners instead of top placement to avoid pushing down visible content

For advertisements specifically, major ad networks provide built-in tools to optimize for layout shifts. With some ad platforms, developers should wrap ad units in div elements with minimum heights set to accommodate the largest possible ad size, using CSS IDs rather than classes since some platforms may strip CSS classes from parent objects.

Web Fonts Causing FOIT/FOUT

Web fonts can trigger layout shifts in two key ways: through Flash of Invisible Text (FOIT) where text is hidden while fonts load, or Flash of Unstyled Text (FOUT) where system fonts temporarily display before switching to web fonts. To prevent these shifts, the font-display CSS property offers several options. Using font-display: optional is the most reliable solution – it shows the fallback system font if the web font isn’t available within 100ms, and only uses the web font on subsequent page loads from cache.

For improved font loading performance:
– Preload critical fonts using <link rel=’preload’>
– Serve fonts from your own domain rather than third-party services to avoid connection delays
– Use WOFF2 format for smaller file sizes
– Implement proper font subsetting to include only needed characters

When font-display: optional isn’t feasible, you can minimize shifts by using font-face descriptors like ascent-override and size-adjust to better match fallback fonts to web fonts. Modern browsers provide optimized rendering that eliminates layout shifts completely when combining preloaded fonts with font-display: optional.

Strategies to Reduce Cumulative Layout Shift

Optimizing Image Loading Techniques

Proper image loading techniques are crucial for preventing layout shifts. The most effective approach is to specify explicit width and height attributes on image elements, which allows browsers to calculate and reserve the correct space before images load. For responsive images that need to scale, combine HTML dimensions with CSS that sets max-width: 100% and height: auto to maintain aspect ratios while allowing proper resizing.

Images appearing above the fold should not use lazy loading, as this guarantees they won’t be loaded when the page first renders. Instead, remove the loading=”lazy” attribute and consider adding fetchpriority=”high” to prioritize their download. For elements that don’t need responsive sizing, using min-height CSS properties helps reserve appropriate space, particularly for dynamically loaded content like ads or widgets.

The new CSS aspect-ratio property, supported by modern browsers, offers a cleaner way to maintain image proportions compared to older padding-bottom techniques. When implementing these optimizations, focus particularly on above-the-fold images since they have the greatest impact on initial page load stability.

Implementing Proper Ad Placement

Proper ad placement is critical for minimizing layout shifts and improving user experience. The key is to reserve sufficient space for ads before they load to prevent content displacement. For above-the-fold ads, extra care is needed since they have greater potential to shift content and disrupt users.

To implement ads correctly:
1) Reserve minimum space using CSS min-height and min-width properties rather than JavaScript, which can itself cause shifts
2) Use historical ad size data to determine optimal space reservation – for example, if most ads are 300×250, reserve 250px height
3) Never insert ads above existing content unless triggered by user interaction

For fluid ad slots that automatically resize, place them below the fold and load them as early as possible in the page load sequence to minimize their impact. Additionally, be cautious with methods that collapse and expand ad slots, as these can create unintended layout shifts at multiple points during the ad lifecycle.

Managing Font Loading and Rendering

Managing font loading and rendering effectively is crucial for preventing layout shifts. The most reliable solution is using font-display: optional, which shows the fallback system font if the web font isn’t available within 100ms, and only uses the web font on subsequent page loads from cache.

To optimize font loading performance:
– Preload critical fonts using <link rel=’preload’>
– Serve fonts from your own domain rather than third-party services to avoid connection delays
– Use WOFF2 format for smaller file sizes
– Implement proper font subsetting to include only needed characters

For cases where font-display: optional isn’t feasible, you can minimize shifts by using font-face descriptors like ascent-override and size-adjust to better match fallback fonts to web fonts. Modern browsers provide optimized rendering that eliminates layout shifts completely when combining preloaded fonts with font-display: optional.

For dynamic content that requires specific fonts, consider using synchronous JavaScript loading—while this goes against typical performance advice, it can be the only solution in certain situations to prevent shifts by ensuring content isn’t rendered until fonts are ready.

Tools for Measuring and Monitoring CLS

Google PageSpeed Insights

Google PageSpeed Insights (PSI) is a valuable tool for analyzing web performance, including CLS. It provides both lab data (simulated performance tests) and field data (real-world user experience) to help developers optimize page stability.

When analyzing CLS through PageSpeed Insights, look for the following:

• Core Web Vitals Report: PSI highlights CLS as part of Core Web Vitals, indicating whether the score is within the recommended range.
• Opportunities Section: This section offers specific recommendations to reduce layout shifts, such as setting dimensions for images and reserving space for dynamic content like ads and embeds.
• Diagnostics Panel: Developers can find detailed insights into shifting elements, including unexpected movements of text, images, or buttons.

To improve CLS based on PSI recommendations:

• Use explicit width and height attributes for images and videos.
• Preload fonts to prevent Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).
• Reserve space for ads, banners, and third-party embeds to avoid content displacement.
• Use CSS aspect-ratio properties to ensure images maintain their proportions before loading.

By regularly using Google PageSpeed Insights, developers can monitor CLS performance and make necessary adjustments to enhance page stability and user experience.

Chrome DevTools Performance Tab

The Chrome DevTools Performance tab provides detailed tools for analyzing layout shifts through its recording capabilities. When recording performance, layout shifts appear as blue highlighted regions that show exactly which DOM elements were affected. To view these shifts in detail, enable the ‘Layout Shift Regions’ option in the Animations tools menu.

The Performance panel also includes a dedicated ‘Layout shifts’ track that displays shifts as purple diamonds, with shifts grouped into clusters based on their timeline proximity. Hovering over a layout shift diamond highlights the affected element directly in the viewport, while clicking reveals detailed information in the Summary tab including timing, scores, and potential causes.

Web Vitals JavaScript Library

The web-vitals JavaScript library provides a streamlined way to measure Core Web Vitals metrics in real-world usage. At its most basic, developers can register callback functions for each metric (CLS, INP, LCP) that execute when measurement data is ready. The library offers two main implementation options: installing via npm or loading from a CDN.

For debugging purposes, developers can use the attribution build, which provides detailed data about what might be causing performance issues—for example, identifying specific elements causing layout shifts or slow interactions. The library handles browser compatibility gracefully—if a metric isn’t supported in a particular browser, its callback simply won’t execute.

When collecting data, the library can be configured to either report final metrics or track all changes using the reportAllChanges flag, making it valuable for both production monitoring and development debugging. Beyond just collecting metrics, the library provides built-in functionality to send the data to analytics platforms or custom endpoints using the sendBeacon API or fetch requests with appropriate priority settings.

Advanced Techniques for Improving CLS

Leveraging CSS Containment

CSS containment enables developers to optimize rendering performance by explicitly telling browsers how to handle specific elements’ rendering – or whether to skip rendering them entirely. The contain property can be applied to control an element’s styling, layout, paint, size, or any combination of these properties.

For example, by applying contain: content to elements, their layout and paint operations can be contained to not affect the rest of the page, and offscreen elements won’t be painted. Field testing has shown CSS containment can significantly improve performance – in one test, applying containment to complex DOM elements reduced initial rendering work by 80% (from 825ms to 172ms).

When implemented on real e-commerce category pages, containment applied to product tiles showed notable improvements in Interaction to Next Paint (INP) times, with Chrome mobile seeing a 47ms improvement at the 75th percentile. However, results vary based on implementation – containment appears most effective when applied to smaller, complex elements rather than large page sections.

To leverage CSS containment effectively, focus on applying it to visually complex, below-the-fold elements while testing with real user data to validate performance improvements.

Optimizing Third-Party Scripts

Third-party scripts like ads, analytics, and embedded content can significantly impact layout stability when not properly optimized. To minimize shifts from these scripts:
1) Reserve space in advance using min-height CSS properties, especially for advertisement slots and dynamic widgets
2) Move non-critical third-party content below the fold where possible to prevent disrupting the main viewport
3) Preload essential scripts using link elements while deferring non-critical ones until needed

For advertisement slots specifically, wrap ad units in div elements with minimum heights set to accommodate the largest possible ad size. When implementing embedded content like social media feeds or maps, use CSS placeholders with defined dimensions to prevent content from shifting once the embed loads.

Additionally, streamline script delivery by minifying code to remove unnecessary characters and spacing, which helps reduce loading delays that can contribute to layout shifts. For critical third-party resources that must load above the fold, consider using the CSS contain property to isolate their impact into independent DOM subtrees.

Implementing Skeleton Screens

Skeleton screens are placeholder UI elements that reserve space for content before it loads, helping prevent layout shifts. The key is to set aside appropriate space using techniques like min-height CSS properties for dynamic content areas. For example, you can create skeleton placeholders for comments sections, product listings, or any content that loads asynchronously.

When implementing skeleton screens, ensure they closely match the dimensions and layout of the final content to minimize shifts when the real content loads. For JavaScript-rendered content, you can hide elements initially with CSS and only reveal them once the content is ready to display, using inline styles to control visibility.

This approach works particularly well for components like cookie banners or dynamic columns that require JavaScript to arrange their final layout. The skeleton elements should maintain proper spacing and aspect ratios using CSS properties like aspect-ratio or min-height to match the expected content dimensions.

At Loud Interactive, we specialize in implementing these advanced techniques to optimize your website’s performance and user experience. Our services include comprehensive CLS optimization to ensure your site not only ranks well but provides a smooth, shift-free experience for your visitors.