CLS Optimization Guide: Fix Layout Shifts That Hurt Rankings and Conversions

Your page loads. Text appears. The user starts reading. An ad loads—everything jumps down 200 pixels. The user clicks the wrong button. Frustration. Bounce.

This is Cumulative Layout Shift (CLS), and it's destroying your Core Web Vitals scores, your search rankings, and your conversion rates. Google measures it. Users feel it. And unlike other performance metrics, CLS is entirely preventable with the right technical approach.

This guide covers everything you need to optimize CLS: what it is, why it matters, how to measure it, and—most importantly—how to fix it systematically across your entire site. Whether you're handling this yourself or working with your development team, you'll find actionable solutions for every common cause of layout shifts.

For comprehensive technical SEO optimization that includes CLS as part of your site's overall user experience strategy, Digital Thrive's audits identify layout shift sources and provide implementation-ready solutions.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift measures visual stability—specifically, how much your page layout unexpectedly shifts during the loading process and user interaction. Think of CLS as a quantification of that frustrating experience: the jumpy page that makes you click the wrong button or lose your place while reading.

Definition in Plain Language

The Technical Definition

From a technical standpoint, CLS is one of Google's three Core Web Vitals—a set of metrics that measure real-world user experience across loading performance, interactivity, and visual stability. Google introduced Core Web Vitals as a ranking factor in June 2021, meaning your CLS score directly influences search engine rankings.

The importance: CLS isn't just a nice-to-have metric. When your site has poor CLS, Google sees it as a signal of poor user experience, and your rankings suffer accordingly. More importantly, your users experience frustration—and frustrated users don't convert.

How CLS is Calculated: The Formula

Understanding CLS calculation helps you debug issues more effectively. CLS uses a specific mathematical formula:

CLS = Impact Fraction × Distance Fraction

Let's break down each component:

Impact Fraction represents the percentage of the viewport affected by a layout shift. If a banner appears at the top of the page that takes up 25% of the viewport height, that shift has an impact fraction of 0.25.

Distance Fraction represents how far elements moved, expressed as a fraction of the viewport height or width (whichever is larger). If content shifts down by half the viewport height, that's a distance fraction of 0.5.

The browser calculates this for each unexpected layout shift and sums them all together throughout the page's entire lifespan—including after the page appears "done loading." This is why a single large shift or many small shifts throughout the page can accumulate into a problematic CLS score.

Important distinction: Only unexpected shifts count. If you click a button and content expands as a result, that shift doesn't count toward CLS. If you scroll and an image loads and causes a shift, that doesn't count. Only shifts that happen without your input are measured.

CLS Score Thresholds: Good, Needs Improvement, Poor

One nuance: Google measures at the 75th percentile, not the average. This matters because it means your worst-performing 25% of users matter for ranking purposes. A site that loads perfectly for most visitors but has severe CLS for mobile users on 3G connections will still be penalized.

Why CLS Matters (Beyond Rankings)

While CLS does affect rankings, the real business impact is much larger. Let's explore why CLS matters across three dimensions: SEO, conversion rates, and user experience.

SEO Impact: The Ranking Factor

Conversion Rate Impact: The Business Case

The connection to conversion rate optimization is direct. CLS is a conversion killer because it breaks user trust and causes accidental clicks. Fixing CLS is part of a complete conversion optimization strategy.

User Experience Impact: The Relatable Side

Beyond metrics and revenue, CLS impacts your users in frustrating ways:

• Reading interrupted mid-sentence: You're reading an article, get interested, then the page jumps and you lose your place
• Forms that jump while typing: You're filling out a contact form and the content shifts—did your text go in the right field?
• Buttons that move right before clicking: You target a button, the page shifts, and you accidentally click the button next to it
• Mobile frustration amplified: On smaller screens with touch precision requirements, a small shift causes you to tap the wrong target

Common Causes of CLS: Where Layout Shifts Come From

Understanding what causes layout shifts helps you identify and fix them in your own site. Most CLS issues fall into six major categories, listed here by frequency and impact.

1. Images Without Dimensions (60% of CLS Issues)

This is the single biggest culprit. Images cause approximately 60% of CLS issues across the web. The reason is simple: browsers don't know how much space to reserve for an image until they download and analyze it.

Most common scenarios:

• CMS-inserted images: Content management systems often insert images without width/height attributes in the HTML
• Responsive images with CSS only: Designers sometimes set image dimensions only in CSS (like max-width: 100%), leaving HTML attributes unspecified
• Dynamically loaded images: Content loaded via JavaScript from APIs often comes without dimension information
• User-uploaded content: Forums, comment sections, and user-generated content areas frequently have images without dimensions

The fix is straightforward but requires systematic implementation across your entire site.

2. Web Fonts Causing Text Reflow (25% of CLS Issues)

The second biggest culprit is web fonts—custom typefaces you load from external sources (Google Fonts, Adobe Fonts, etc.). Web fonts cause approximately 25% of CLS issues.

Most common scenarios:

• Google Fonts and similar services: Loading fonts from external CDNs means the font file takes time to arrive
• Large font files: Unoptimized font files download slowly, extending the period where fallback fonts are visible
• Unmatched fallback fonts: Using Arial as your fallback when your custom font is a serif creates a dramatic visual shift
• Multiple font variants: Loading different weights and styles multiplies the problem

Advanced optimization techniques can reduce or nearly eliminate font-related CLS—we'll cover those in the fixes section.

3. Ads, Embeds, and Iframes

Ads and embedded content (YouTube videos, social media embeds, third-party widgets) create CLS challenges because their dimensions aren't always known in advance.

Most common scenarios:

• Google AdSense auto ads: These insert ads automatically throughout your content without you controlling exact placement or size
• Social media embeds: Twitter/X embeds, Instagram embeds, and similar typically load their content late
• Third-party widgets: Chat tools (Intercom, Drift), review systems (Trustpilot, Yotpo), and recommendation engines

Ads are particularly challenging because optimizing for CLS might reduce your ad revenue (by limiting ad sizes). We'll discuss balancing this trade-off.

4. Dynamically Injected Content

Modern web applications often load content via JavaScript after the initial page render. This is different from server-rendered content and creates unique CLS challenges.

Most common scenarios:

• "Load More" buttons: Clicking the button shows new content that pushes existing content down
• Pop-ups and alerts: Notification banners, cookie consent, or alert dialogs inserted after page load
• GDPR/cookie notices: Many sites inject compliance banners that push content down
• Lazy-loaded content above the fold: Content that should have loaded initially but instead loads via JavaScript

The key distinction: shifts within 500ms of user interaction don't count toward CLS. So a shift that happens when you click "Load More" is fine. A shift that happens on its own (auto-playing video loading, automatic notification popping up) counts against you.

5. Animations Using Layout Properties

Some developers accidentally create CLS issues by animating the wrong CSS properties. Not all animations cause shifts, but certain ones do.

Most common scenarios:

• Accordion/dropdown animations: Height transitions that expand content
• Slide-in panels: Position or margin transitions that move elements
• Hover effects: Height or width changes on hover that reflow surrounding content
• Smooth transitions: Animating any dimension property

These animations don't just create CLS in the immediate element—they affect everything below it that must shift to accommodate the change.

6. Late-Loading Third-Party Scripts

Similar to dynamically injected content, third-party JavaScript can cause CLS when it modifies the page after initial render.

Why it happens:

Analytics scripts, chat widgets, review plugins, and other third-party tools often inject UI elements (like a floating chat button or review counter) after the page loads.

Most common scenarios:

• Chat widgets: Floating chat buttons that appear after page load
• Analytics (Google Analytics, Facebook Pixel): These usually don't cause CLS but can trigger other scripts that do
• Review widgets: Trustpilot, Yotpo, and similar inject review displays
• Social plugins: Facebook like buttons, Twitter share buttons

How to Measure CLS: Three Approaches

To fix CLS, you first need to measure it accurately. There are three measurement approaches, each serving different purposes: field data (real users), lab data (testing), and detailed debugging.

Debugging CLS with Chrome DevTools: Step-by-Step

Let's walk through the most effective debugging process using Chrome DevTools, the most detailed tool available.

Enable Layout Shift Regions

First, enable the visual indicator that shows layout shifts in real-time:

Use the Performance Panel

For detailed analysis of when and why shifts occur:

Identify the Root Cause

Once you've identified when a shift occurs, ask these diagnostic questions:

Pattern matching:

• Shift correlates with image download = Missing width/height attributes
• Shift correlates with font loading = Font fallback mismatch or preloading issue
• Shift happens after DOM mutation = JavaScript injecting content without reserving space
• Shift happens when ad loads = Ad container without reserved dimensions
• Shift happens during animation = Animation using layout properties instead of transforms

How to Fix CLS: Complete Solutions

Now for the practical part—actually fixing layout shifts. Each solution addresses specific causes, with implementation examples for different scenarios.

Fix 1: Set Image Dimensions (Most Important)

Since images cause 60% of CLS issues, this is the highest-impact fix. The solution is simple but must be applied systematically across your entire site.

<img
  src="hero.jpg"
  width="1200"
  height="630"
  alt="Hero image"
>

<img
  src="hero.jpg"
  width="1200"
  height="630"
  alt="Hero image"
  style="max-width: 100%; height: auto;"
>

.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

import Image from 'next/image'

<Image
  src="/hero.jpg"
  width={1200}
  height={630}
  alt="Hero image"
  priority // for above-fold images
/>

Fix 2: Optimize Web Fonts

Font-related CLS is more complex but entirely fixable with modern techniques. We'll cover approaches from basic to advanced.

<head>
  <link
    rel="preload"
    href="/fonts/inter-var.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  >
</head>

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
}

/* Fallback font adjusted to match Inter dimensions */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

npm install @unjs/fontaine

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-display: swap;
}

Fix 3: Reserve Space for Ads and Embeds

Ads and embedded content create CLS challenges because their dimensions might not be predictable. The solution is reserving space before they load.

.ad-container {
  min-height: 250px; /* Standard ad height */
  aspect-ratio: 300 / 250; /* Standard ad size (300×250) */
  background: #f5f5f5; /* Light gray placeholder */
}

Common ad sizes:

• 300×250 (Medium Rectangle)
• 728×90 (Leaderboard)
• 320×50 (Mobile Banner)
• 300×600 (Half Page)

Reserve space based on the sizes your ad network actually serves.

Responsive Ads (More Complex)

For responsive ad containers that scale with viewport, use the padding-bottom technique:

.ad-container {
  position: relative;
  width: 100%;
  padding-bottom: 83.33%; /* Aspect ratio: 6/5 */
}

.ad-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Why it works:

• Padding-bottom (as percentage) maintains aspect ratio
• Iframe fills container at any viewport size
• No shift when ad loads because space is pre-allocated

Calculate padding-bottom: (height / width) × 100. For a 300×250 ad: (250/300) × 100 = 83.33%.

YouTube/Vimeo Embeds

Video embeds have standard aspect ratios, making them easy to optimize:

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML:

<div class="video-container">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

This works for all 16:9 videos. For different aspect ratios:

• 4:3 video: padding-bottom: 75%
• 1:1 square: padding-bottom: 100%
• 21:9 ultrawide: padding-bottom: 42.86%

Third-Party Widgets (Reviews, Chat, etc.)

Widgets from services like Trustpilot, Yotpo, Intercom, and Drift create unpredictable CLS. Strategies include:

1. Lazy load below the fold: Only load widgets when users scroll to them
2. Reserve fixed space: If you know approximate dimensions, reserve that space
3. Load on interaction: Load widget when user clicks "Show Reviews" or similar
4. Server-side render: If widget supports it, render on server to include in initial HTML

For AI and automation services, we can implement detection systems that identify third-party script impact and optimize loading.

Fix 4: Handle Dynamic Content Properly

When JavaScript adds content after page load, reserve space or position intelligently to avoid shifts.

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.cookie-banner {
  position: relative; /* Pushes content up when added to DOM */
}

Cookie Banners and Notifications

Position these absolutely or fixed so they don't push content:

"Load More" Buttons

When users click "Load More" and new content appends, the shift happens within user interaction, so technically it doesn't count against CLS. However, good practice is still to show placeholders immediately:

loadMoreButton.addEventListener('click', async () => {
  // Show skeleton/placeholders immediately
  const skeletons = createSkeletonLoaders();
  container.appendChild(skeletons);

  // Fetch new content
  const newContent = await fetchContent();

  // Replace skeletons with actual content
  skeletons.forEach((skeleton, index) => {
    skeleton.replaceWith(newContent[index]);
  });
});

Why it works:

• Placeholders reserve space and provide visual feedback
• Actual content replacement doesn't cause shift because space is pre-allocated
• User expects content to appear after clicking

AJAX-Loaded Content

For content loaded via AJAX without user interaction, reserve space before content arrives:

// Calculate approximate height needed
const estimatedHeight = 300; // or calculate based on content type
const placeholder = createPlaceholder(estimatedHeight);
container.appendChild(placeholder);

// Fetch content
const content = await fetchContent();

// Replace placeholder with actual content
placeholder.replaceWith(content);

This prevents shift by pre-allocating space. If your estimate is close, shift is minimal. If it's off, only the difference shifts.

Fix 5: Animate with Transforms, Not Layout Properties

Some CSS properties trigger layout recalculation on every animation frame, while others don't. Use the right ones.

.dropdown {
  height: 0;
  transition: height 0.3s;
}

.dropdown.open {
  height: 200px; /* Triggers layout recalculation every frame */
}

.dropdown {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s;
}

.dropdown.open {
  transform: scaleY(1); /* No layout recalculation */
}

The will-change Property

Advanced optimization: hint to the browser that an element will animate:

.element-that-will-animate {
  will-change: transform;
}

.element-that-will-animate.animating {
  transition: transform 0.3s;
  transform: translateX(100px);
}

Why it helps:

• Tells browser to pre-create composite layers
• Prevents jank on animation start
• Optimizes GPU usage

Important caveat: Overusing will-change actually hurts performance. Only apply to elements that actually animate, remove it when animation is complete, and don't exceed 5-10 elements with will-change simultaneously.

Fix 6: Lazy Load Below the Fold Only

Lazy loading can prevent CLS—if done correctly. The critical rule: never lazy load above-the-fold images.

Native Lazy Loading

The simplest approach using the loading attribute:

<img
  src="below-fold.jpg"
  width="800"
  height="600"
  loading="lazy"
  alt="Below fold image"
>

Why it works:

• Browser handles lazy loading automatically
• Dimensions are still set, so space is reserved
• Image loads only when user scrolls near it
• No CLS when image finally loads because space was reserved

<!-- DON'T DO THIS -->
<img
  src="hero.jpg"
  loading="lazy" <!-- Wrong! -->
  alt="Hero"
>

Intersection Observer (Custom Lazy Loading)

For more control, use JavaScript to detect when images enter the viewport:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // Load actual image
      observer.unobserve(img);
    }
  });
});

// Only observe below-fold images
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

HTML:

<img
  data-src="below-fold.jpg"
  width="800"
  height="600"
  alt="Below fold image"
>

Why it works:

• Images load only as user scrolls near them
• Dimensions pre-allocated, so no CLS
• Improves page load speed
• Works across all browsers

This approach is more flexible than native lazy loading but requires more code.

CLS Optimization Checklist

Use this checklist to systematically address CLS across your entire site:

Advanced CLS Optimization Techniques

For those wanting to optimize beyond the basics, these advanced techniques provide additional improvements.

/* Latin characters only (most common) */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

/* Greek and Coptic characters */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}

<link
  rel="preload"
  as="image"
  href="/hero.jpg"
  imagesrcset="/hero-320w.jpg 320w, /hero-640w.jpg 640w, /hero-1280w.jpg 1280w"
  imagesizes="100vw"
>

.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<!-- DNS prefetch for ad networks (resolves domain early) -->
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">

<!-- Preconnect to critical third-party (establishes full connection) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Prefetch non-critical resources -->
<link rel="prefetch" href="//analytics.google.com/analytics.js">

Common CLS Mistakes to Avoid

Learning from others' mistakes accelerates your own optimization.

<!-- Good: eager loading for above-fold -->
<img src="hero.jpg" loading="eager" width="1200" height="630" alt="Hero">

<!-- Good: lazy loading for below-fold -->
<img src="thumbnail.jpg" loading="lazy" width="400" height="300" alt="Thumbnail">

<!-- Image is 1200×800, but you set wrong dimensions -->
<img
  src="photo.jpg"
  width="1000"  <!-- Wrong -->
  height="1000" <!-- Wrong -->
  style="max-width: 100%; height: auto;"
  alt="Photo"
>

<!-- Correct -->
<img
  src="photo.jpg"
  width="1200"  <!-- Actual image width -->
  height="800"  <!-- Actual image height -->
  style="max-width: 100%; height: auto;"
  alt="Photo"
>

/* DON'T DO THIS */
.animate-left { will-change: left; }
.animate-right { will-change: right; }
.animate-scale { will-change: transform; }
.animate-opacity { will-change: opacity; }
/* ...30 more elements with will-change... */

// Add will-change before animation
element.style.willChange = 'transform';

// Animate
element.style.transform = 'translateX(100px)';

// Remove after animation ends
setTimeout(() => {
  element.style.willChange = 'auto';
}, 300); // After transition duration

CLS Optimization by Platform

Different platforms have different CLS challenges. Platform-specific solutions:

import Image from 'next/image'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Page() {
  return (
    <main className={inter.className}>
      <Image
        src="/hero.jpg"
        width={1200}
        height={630}
        alt="Hero"
        priority // Disables lazy loading for above-fold
      />
    </main>
  )
}

// Reserve space before content loads
<div style={{ width: '100%', aspectRatio: '16/9' }}>
  {isLoading ? <SkeletonLoader /> : <Image src={src} />}
</div>

Implementation Roadmap: Prioritize Your Fixes

Not all CLS fixes have equal impact or effort. This roadmap helps you prioritize.

Phase 1: Quick Wins (Day 1)

Phase 2: Systematic Fixes (Week 1)

Medium impact, moderate effort. These improve CLS substantially:

1. Add dimensions to ALL images (above and below fold)

• Impact: High
• Effort: Medium (full site audit required)
• Time: 4-8 hours depending on site size

2. Implement font-display: swap

• Impact: Medium
• Effort: Low-Medium
• Time: 1-2 hours

3. Fix embed aspect ratios (YouTube, Twitter, etc.)

• Impact: Medium
• Effort: Low-Medium
• Time: 2-3 hours

4. Optimize lazy loading (below-fold only)

• Impact: Medium
• Effort: Medium
• Time: 2-4 hours

Expected improvement: Substantial CLS reduction from baseline

Phase 3: Advanced Optimization (Ongoing)

Lower impact individually but compounding:

1. Implement size-adjust for fonts

• Impact: Low-Medium
• Effort: High (requires metric calculation)
• Time: 4-6 hours

2. Migrate animations to transforms

• Impact: Low-Medium
• Effort: Medium-High (code changes)
• Time: Varies by complexity

3. Self-host fonts

• Impact: Low-Medium
• Effort: Medium
• Time: 2-3 hours

4. Add placeholders for dynamic content

• Impact: Low-Medium
• Effort: Medium-High
• Time: Varies by content types

Expected improvement: Near-optimal CLS scores

Priority Matrix: What to Fix First

Validating Your CLS Fixes

Before and after deployment, validate that fixes actually work.

Pre-Deployment Testing

Before pushing changes live:

Post-Deployment Monitoring

After changes go live (wait 7-28 days for data):

Testing Checklist

CLS and Other Core Web Vitals

CLS doesn't exist in isolation. Let's explore how it connects to the other Core Web Vitals.

CLS + LCP (Largest Contentful Paint)

Both measure user experience during page load. They're often interconnected:

CLS + FID (First Input Delay)

Less direct connection, but both relate to user experience:

Connections:

• Heavy JavaScript can delay both rendering (CLS) and interaction (FID)
• Optimizing third-party scripts helps both
• Render-blocking resources affect both

Optimization overlap:

• Reduce JavaScript execution → improves FID, reduces late content shifts
• Defer non-critical scripts → improves FID, prevents late CLS
• Code splitting → improves FID, enables faster initial render

For FID optimization details, see the dedicated guide.

CLS + Page Speed

Faster loading = less time in unstable state:

Why page speed matters for CLS:

• Quick font/image loading = less shift opportunity
• Faster TTFB = earlier font loading = less shift window
• Faster image loading = less time between layout and image render
• Faster JavaScript = earlier dynamic content = fewer late shifts

Page speed optimization and CLS optimization complement each other.

Tools and Resources for CLS Optimization

How Digital Thrive Optimizes CLS

CLS optimization is part of Digital Thrive's comprehensive Technical SEO service, specifically within the User Experience (UX) dimension of our four-dimension audit framework.

Our Four-Dimension Technical SEO Framework

What You Get With Our Technical SEO Service

Complete Audit:

• Screaming Frog crawl identifying all images without dimensions
• Chrome DevTools analysis of layout shift sources
• GSC and CrUX data analysis for real-user CLS scores
• Prioritized list of CLS issues with impact ratings

Detailed Recommendations:

• Developer-ready specifications for each fix
• Code examples for your specific CMS or framework
• Before/after CLS score projections
• Impact vs. effort ratings for prioritization

Implementation Support:

• Guidance during development
• Testing procedures and validation methods
• Re-crawl and verification after deployment
• Ongoing monitoring setup

Why Work With Digital Thrive

Frequently Asked Questions

Next Steps

If You're Fixing CLS Yourself

If You Want Expert Help

We'll audit your site, identify what's causing layout shifts, and provide a clear implementation roadmap—typically within days of starting. Rather than generic recommendations, we provide specific, actionable solutions tailored to your site's architecture and business goals.

Sources

1. Cumulative Layout Shift (CLS) | web.dev
2. Optimize Cumulative Layout Shift | web.dev
3. How to Fix Cumulative Layout Shift (CLS) in 2025 – Natclark
4. What is Cumulative Layout Shift (CLS) And How to Fix It | NitroPack
5. Cumulative Layout Shift (CLS) Optimization Guide 2025 | QuickFix WP
6. How to Optimize Your Site for Cumulative Layout Shift in 2025 | Justuno
7. Understanding Cumulative Layout Shift (CLS) | BrowserStack
8. Understanding and Improving Cumulative Layout Shift (CLS) | SpeedCurve
9. Fixing Layout Shifts Caused by Web Fonts | DebugBear
10. Debug layout shifts | web.dev
11. Layout Shift Culprits: Debug CLS On Your Website | DebugBear
12. Debugging and Optimizing Cumulative Layout Shift (CLS) | ditdot
13. How to create high-performance CSS animations | web.dev
14. Preventing Layout Shifts: Mastering CSS Transitions and Animations | Pixel Free Studio
15. aspect-ratio - CSS | MDN