Reduce Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures how much your page visually jumps around while it loads. The score is unit-less; under 0.1 is considered good. Common causes are images without width/height attributes, ad slots that drop in late, and web fonts that swap mid-paint causing text to reflow.

High CLS is the reason your customer taps "Get a Quote" and accidentally taps "Call Now" because the button moved a fraction of a second before their finger landed. It tanks conversion AND it is a Core Web Vital, meaning Google ranks pages with low CLS higher than identical pages with high CLS.

1. 1

   Add explicit width and height to every image and iframe

   Telling the browser the dimensions upfront lets it reserve the space, so the surrounding content does not shift when the image loads. The aspect-ratio gets calculated automatically.

   <!-- BAD: no dimensions, the image will push everything down when it loads -->
   <img src="/photo.jpg" alt="..." />
   
   <!-- GOOD: dimensions reserve the space -->
   <img src="/photo.jpg" alt="..." width="800" height="600" />

2. 2

   Use CSS aspect-ratio for responsive images

   If you scale images responsively, use the aspect-ratio property to lock in the placeholder shape.

   .hero-image {
     width: 100%;
     aspect-ratio: 3 / 2;
     object-fit: cover;
   }

3. 3

   Preload web fonts with font-display: swap

   Web fonts cause CLS when the page first renders in a fallback font, then re-flows once the custom font loads ("FOUT"). Use font-display: swap and preload the font.

   <link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin />
   
   <style>
     @font-face {
       font-family: Inter;
       src: url(/fonts/inter.woff2) format("woff2");
       font-display: swap;
     }
   </style>

4. 4

   Reserve space for ads and embeds

   If an ad slot is going to be 300×250, wrap it in a div with `min-height: 250px` so the page does not jump when the ad loads. Same for YouTube embeds, social-media oEmbed cards, and consent banners.

5. 5

   Never insert content above existing content

   Cookie banners that slide DOWN, headers that "stickify" on scroll, and lazy-loaded sections that push content all cause CLS. Position cookie banners over the page (fixed, with backdrop) instead of pushing it down.

In Chrome DevTools > Performance > Record, scroll the page, the "Layout Shifts" track should show no large bars. PageSpeed Insights should report CLS under 0.1 on both mobile and desktop. Re-run the Drive Top-Line audit.

• web.dev: Optimize CLS