What strategies help reduce CLS on a mobile site?

Question

Anubhav Sharma · 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: 1. Always Set Width & 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. Or 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. 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. 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. 5. Preload Key Fonts & Images Especially fonts or hero images above the fold.Prevents late loading that causes reflows. 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). 7. Use Lighthouse or Chrome DevTools to Audit CLS In DevTools → Performance → Layout Shifts.Identify what’s moving and when. 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?

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: