What strategies help reduce CLS on a mobile site?

Question

Anubhav Kumar · Answer

Reducing Cumulative Layout Shift (CLS) is crucial on mobile where screen space is limited and layout shifts are extra jarring. CLS measures how much content unexpectedly moves during load. Here's how to keep your layout stable:
and 
1. Always Set Width and Height on Images and Videos
This prevents the browser from reserving the correct space before loading.Use width and height attributes or aspect-ratio in CSS.
andlt;img src="banner.jpg" width="600" height="400" /andgt;
Or
img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
}
and 
2. Reserve Space for Ads, Embeds, and Iframes
Dynamically injected ads or embeds (like YouTube) often cause shifts.Use CSS to give them a placeholder box of fixed height.
.ad-slot {
  min-height: 250px;
}
and 
3. Avoid Inserting Content Above Existing Content (unless triggered by user)
E.g., banners, cookie notices, toolbars.If you must show them, overlay them (position: fixed) instead of pushing content down.
and 
4. Use Font Display Strategies to Prevent Flash of Unstyled Text (FOUT)
Use font-display: swap; in your @font-face to avoid layout shifts due to late font loading.
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}
and 
5. Preload Key Fonts and Images
Especially fonts or hero images above the fold.Prevents late loading that causes reflows.
andlt;link rel="preload" as="font" href="font.woff2" type="font/woff2" crossoriginandgt;
and 
6. Minimize Layout Thrashing in JS
Avoid JS that adds/removes DOM elements without space planning.Batch DOM updates and avoid animations that change layout (use transform instead of
top/left).
and 
7. Use Lighthouse or Chrome DevTools to Audit CLS
In DevTools → Performance → Layout Shifts.Identify what’s moving and when.
and 
Mobile-specific tips:
Be extra careful with fluid layouts, media queries, and viewport resizing.Don't lazy-load content that’s immediately visible.

interview

What strategies help reduce CLS on a mobile site?

Anubhav Kumar

Can you answer this question?

1 Answers

1. Always Set Width & Height on Images and Videos

2. Reserve Space for Ads, Embeds, and Iframes

3. Avoid Inserting Content Above Existing Content (unless triggered by user)

4. Use Font Display Strategies to Prevent Flash of Unstyled Text (FOUT)

5. Preload Key Fonts & Images

6. Minimize Layout Thrashing in JS

7. Use Lighthouse or Chrome DevTools to Audit CLS

Mobile-specific tips:

Liked By