A page scores poorly on Cumulative Layout Shift. How would you go about diagnosing and fixing it?
technical-conceptual · Junior level · software-engineering
What the interviewer is really asking
Assesses whether the candidate can connect the CLS metric to its concrete causes (unsized media, injected content, late fonts) and propose targeted, current fixes.
What to say
- Start by identifying which elements shift, using browser DevTools (the Performance panel or a layout-shift overlay) to see what moves and when.
- Give the most common causes and fixes: images and videos without width/height or an aspect-ratio reserve space; ads, banners, and embeds injected above existing content push it down; web fonts swapping can reflow text.
- Mention reserving space ahead of time, for example setting width and height attributes or an aspect-ratio box, and inserting dynamic content below the fold or in pre-sized containers.
What to avoid
- Treating CLS as a pure load-speed problem and only suggesting 'make it faster'.
- Saying you'd remove all images or animations rather than reserving space for them.
- Guessing blindly without measuring which elements actually shift.
Example answers
Strong: First I'd open DevTools and use the layout-shift tooling to see exactly which elements jump and when. Usually it's images without explicit width and height, so the browser can't reserve space until they load, or it's a banner or ad injected at the top that shoves content down. I'd set width and height attributes or an aspect-ratio on the media, give dynamic elements a reserved slot, and use font-display so swapping fonts doesn't reflow the text.
Weak: I'd try to make the page load faster overall, maybe compress the images and add a loading spinner. If the score is still bad I'd just remove whatever is causing it from the page.