Google’s Core Web Vitals measure key aspects of user experience. The Core Web Vitals report shows how your pages perform, based on real world usage data (sometimes called field data). In your metric type report, you may wonder why the CLS is rated as ‘Poor’ and how to fix it. This guide will walk you through all needed steps. Let’s dive in! 

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is rated “poor” when layout shifts exceed 0.25. Unstable content makes pages feel unreliable, hurting user experience, increasing bounce rates, and lowering SEO performance.

Practical steps to optimize CLS score:

• Save space for media: 
  

1. Always include width and height attributes in your <img> and <video> tags. This tells the browser to reserve space for the media before it loads, preventing the content below from shifting. 
2. You can also use the CSS aspect-ratio property for a similar effect, which is especially useful for responsive design. 
   

1. aspect-ratio is a flexible, responsive way to lock in image proportions.
   

1. For images that fill/crop (“cover”) a space, use CSS (e.g. object-fit) and ensure the container has fixed dimensions or aspect-ratio so layout shifts don’t occur when the image loads.
   

1. Fixed dimensions (e.g. width="600" height="400")  or object-fit (e.g., object-fit: cover) is more rigid but ensures the image always fills the space without leaving gaps.
   

Added width and height, aspect-ratio, and object-fit attributes to the HTML. 

1. Optimize font loading: Custom fonts can cause a layout shift when they are loaded. To minimize this, use a system font as a fallback that is similar in size and style to your custom font. 
   
1. You can also use the font-display: optional or font-display: swap CSS properties to control how the font loads and renders, reducing the "flash of unstyled text" (FOUT) or "flash of invisible text" (FOIT). 
2. Preloading fonts with <link rel="preload"> can also help.
   

Added font-display: swap CSS properties to the HTML.

1. Reserve space for dynamic content / injected content: Dynamic content / injected content such as ads, embeds, and iframes can cause significant layout shifts. To prevent this, reserve space for them with a placeholder or fixed dimensions. 
   
1. If the content is from a third party and has variable sizes, use the largest possible size for the placeholder to avoid a shift.
2. Use “app blocks” if available so injected content is handled more cleanly.
   
2. Use CSS transforms for animations: When animating elements, avoid properties that trigger a layout change (e.g., width, height, top, and left) because every frame of those animations can count as a layout shift. Instead, use the transform CSS property (e.g., translateX, translateY) as it moves the element without affecting the layout of other elements on the page.
   

Added transform: translateX CSS property to the HTML.

What This Means in Plain Language

Simply put, many layout shifts happen because something in the page appears later than expected and pushes everything around. To make pages feel more stable:

1. Predefine space for images so they don’t load in and push content down.
2. Make sure banners, widgets, or anything added by apps have space reserved so they don’t jump in later.
3. Don’t delay loading the styles for what users see first, if your navigation or hero section doesn’t have its CSS ready, things will shift.
4. Avoid animations that reposition or resize things mid-load; use smoother transitions that don’t disturb the layout.
5. Choose fallback fonts well, if your backup followed by a custom font changes the shape of your text a lot, it’ll shift text lines when the final font loads.
   
   

Now you know what leads to poor Core Web Vitals metric types - CLS. It’s best to check this component frequently and fix any errors as soon as possible. If you need any support on this, the Tapita team is here to help.