Detailed explanation
Cumulative Layout Shift (CLS) measures visual instability: unexpected movement of visible elements during a page’s lifetime. Images and advertisements commonly cause it because their content arrives after the browser has laid out the surrounding page. If no space is reserved, inserting that content pushes text, buttons, or other elements away from their original positions. This matters for usability, especially when someone is reading or about to tap a control. CLS considers both how much of the viewport is affected and how far elements move; it is not simply a count of shifts.
For images, provide HTML width and height attributes that match the image’s intrinsic proportions, such as <img src="banner.jpg" width="800" height="400" alt="Banner">. Modern browsers use these dimensions to establish an aspect ratio before downloading the image. The attributes do not require a fixed rendered size: CSS such as img { max-width: 100%; height: auto; } keeps images responsive while preserving their proportions. Alternatively, define a stable box using .banner { width: 100%; aspect-ratio: 2 / 1; }. When an image must fill that box, give it width: 100%; height: 100%; object-fit: cover; to avoid distortion, accepting that some cropping may occur.
For ads and embeds, reserve space in the containing slot before third-party scripts run. Use dimensions, aspect-ratio, or breakpoint-specific min-height rules based on the formats actually supported. A minimum height only prevents shifts when the arriving content fits within it; larger creatives can still expand the slot. For variable-size ads, agree on size limits and choose a deliberate reservation strategy. If an ad does not load, collapsing an already visible placeholder can itself cause a shift, so retaining the reserved area is often safer.
Lazy loading reduces unnecessary downloads but does not reserve space by itself, so lazy-loaded images need the same sizing treatment. Responsive image sources should maintain consistent proportions, or the reserved ratio must change with the layout. Verify the result with browser performance tools and real-user CLS data, testing slow networks, viewport changes, late ad delivery, and empty slots. Interviewers look for the underlying principle: establish stable geometry before asynchronous content arrives, rather than merely making downloads faster.
Key points to remember
- Set accurate width and height attributes on images so browsers can reserve their aspect ratio.
- Use responsive CSS without losing the reserved proportions; use aspect-ratio for controlled containers.
- Reserve ad and embed slots before loading their scripts or resources.
- Handle variable ad sizes and empty slots without expanding or collapsing visible layout unexpectedly.
- Test delayed loading and responsive layouts; lazy loading alone does not prevent CLS.
Common mistakes candidates make
- Assuming width and height attributes prevent responsive image sizing.
- Adding loading="lazy" without reserving any image space.
- Using an undersized ad placeholder or collapsing an empty visible slot, causing another layout shift.
Likely follow-up questions
Do width and height attributes make an image fixed-size?
No; CSS can control its rendered dimensions while the attributes supply the initial proportions. Using max-width: 100% and height: auto lets the image shrink to fit its container.
How do you handle ads whose dimensions are unknown?
Reserve a slot using the supported sizes for each breakpoint and enforce a size policy with the ad integration. Reserving the largest supported height reduces expansion risk but may leave whitespace for smaller ads.
How can you identify which images or ads cause CLS?
Record page loading and interactions in the browser’s Performance panel and inspect layout-shift events. The highlighted elements may be the content that moved, so also inspect preceding images or ad slots that expanded and pushed them.
Interview tip: Explain the missing-space problem first, show the image dimensions example, and then address variable-size ads and empty slots.