What causes Cumulative Layout Shift and how do you fix it?
Assesses fundamental understanding of Web Performance conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
CLS measures how much visible content moves unexpectedly. The score for a shift is the impact fraction times the distance fraction, summed over the session, excluding shifts within 500 milliseconds of user input.
Common causes: images and videos without width and height or aspect-ratio, ads, embeds and iframes injected above content, web fonts swapping and changing metrics, dynamic content inserted above the fold, and late-loading UI such as cookie banners.
Fixes: always reserve space with width and height or CSS aspect-ratio. Use font-display: optional or preload fonts and match fallback metrics with size-adjust. Use contain-intrinsic-size with content-visibility for long pages. Avoid inserting banners above existing content; overlay them instead, and reserve fixed slots for ads.
Test with the Performance panel and the CLS contribution in Lighthouse, and check field data, because real-world shifts depend on slow networks and font timing.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.