How to fix cwv cls on Klaviyo

Steps for Klaviyo

1. Email/SMS signup pop-ups and flyouts served by Klaviyo are a frequent source of CLS when they insert above or within page content. In your Klaviyo account, go to Sign-Up Forms.
2. For each active form, click Edit > select the Display Settings tab. Set 'Display Behavior' to a triggered/delayed display (e.g. 'Show after 5 seconds' or 'Show on exit intent') rather than 'Show immediately on page load' — this ensures the form does not inject before the page is fully painted.
3. For flyout/side-tab forms, confirm the form style is set to 'Flyout' or 'Full-Page' (overlay) not 'Embedded' — embedded forms inserted inline above product or blog content push surrounding elements down and cause significant CLS.
4. If you use an embedded inline form, wrap the Klaviyo embed code in a container div with a fixed min-height matching the form's pixel height, so the browser reserves the space even before the Klaviyo script fires.
5. Save and publish changes, then re-test your CLS on affected pages with Google PageSpeed Insights to confirm the shift caused by the form is eliminated.

<img
  src="product-photo.jpg"
  alt="Red running shoes"
  width="800"
  height="800"
  style="aspect-ratio: 1/1; width: 100%; height: auto;"
>

/* CSS: reserve space for an ad slot before it loads */
.ad-container {
  min-height: 90px;   /* match your largest ad unit height */
  width: 100%;
}

/* CSS: prevent font-swap layout shift */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

What is cwv cls?

Cumulative Layout Shift (CLS) measures how much the visible content on your page unexpectedly moves while it is loading. Every time an image pops in and pushes a button out of reach, a font swaps and reflowing text, or a banner ad shoves your product description down the page, that counts as a layout shift. Google's "good" threshold is a CLS score below 0.1; a score of 1.05 — as in the example above — means content is shifting dramatically, which is easily noticeable to shoppers. The most common causes are images and videos without explicit width/height attributes, web fonts that change character sizes when they load, third-party widgets (chat bubbles, review carousels, cookie banners, email pop-ups) injected above existing content, and dynamically inserted banners or promotional bars.

CLS is one of Google's three Core Web Vitals, which are a direct ranking signal in Google Search — a poor score can push you below competitors even if your content is better. Beyond rankings, layout shift is a serious conversion killer: a shopper who taps "Add to Cart" while the page is still loading can accidentally hit the wrong element, leading to frustration and cart abandonment. Google's own research links poor page experience scores to higher bounce rates and lower revenue per session. On mobile devices — where Google indexes first — layout shift is even more pronounced because screens are small and a single banner inserting itself at the top can move everything else off screen.

See the complete Cwv cls guide for every platform and the full background.