Fix the design · Incident triage

Layout Shift Ads: The Landing Page That Jumped During the Ad Blitz

During a Dream11 IPL ad blitz, a landing page without reserved space for hero, fonts, and ads hit a layout shift score of about 0.48, jumped about 400 pixels, and cut conversion about 22%.

You are on Dream11’s growth team during an IPL ad blitz. About $200k in ads send traffic to a landing page that jumps after load. Conversion drops about 22%.

We need your help. Identify the bottlenecks and failure modes in the current design, then redesign the path from “first paint” → “signup tap” so images, fonts, and ads reserve space before they load, the page does not jump under the user’s thumb, and conversion holds when ad spend scales.

Problem

Redesign Dream11’s existing signup landing page — it already loads a hero, custom fonts, and an ad slot above the fold for paid social traffic.

Incident summary

  • Paid traffic jumped from about 400 to about 6,200 requests per minute.
  • Layout shift score hit about 0.48 (good is under 0.1).
  • Conversion fell about 22% at the same spend level.
  • The hero image loaded without width or height and jumped the page about 400px.
  • A custom font and a late ad banner also pushed content after first paint.

Assumptions made by the team

  • Largest Contentful Paint is the only Web Vital that matters for paid ads.
  • Responsive images do not need explicit width and height.
  • Swapping in a custom font as soon as it loads is always best.
  • Ad slots can stay empty until the network fills them — users will not notice.
  • Layout shift is only a lab metric and does not matter in production.

Impacted services

  • Landing page (critical) — Content shifted after first paint — users tapped the wrong buttons.
  • Hero image (degraded) — Loaded without reserved space — pushed the page down about 400px.
  • Ad slot (degraded) — Injected a banner late and shifted the signup form.
  • Customers (critical) — Conversion fell about 22% at the same ad spend.

Triage questions

  1. Which parts of this page shift layout after the first paint — and why?
  2. How would you reserve space before load so heroes, ads, and fonts do not push content down?
  3. Largest Contentful Paint looked fine but conversion collapsed — how can both be true?
  4. What browser metrics would you alert on before scaling ad spend?

← All design challenges

Loading scenario…