A marketing team wants an autoplaying full-bleed background video as the hero on the site's highest-traffic landing page. What would you require before shipping it, framed in terms of Largest Contentful Paint and Cumulative Layout Shift?

## Reframe the question before answering it The weak answer is a verdict — "background video is bad for performance". The strong answer treats it as a purchase: this feature has a price in the two loading vitals, here is how the price is capped, here is who agreed to pay it, and here is the condition under which we stop paying. Interviewers ask this to see whether you can hold a business goal and a performance budget in the same hand. ## What actually gets measured **LCP.** A video element does not paint content the instant it is requested; there is a fetch, container parsing, and enough buffering to render a frame. What paints early is the **poster image**, and Chrome treats a video's poster image as an LCP candidate — in recent versions the first painted video frame can be a candidate too. The practical consequence is that your hero's LCP is a *poster image problem wearing a video costume*. So all the image discipline applies to the poster: it must be discoverable in the initial markup rather than injected later, it must be sized for the viewport rather than shipped at desktop dimensions to phones, and it deserves priority over less important resources. The failure mode to name explicitly is a hero video with **no poster at all**. Then the hero region paints nothing for a while, the LCP element becomes some smaller piece of content elsewhere, and when the video finally paints you can get a much later LCP entry. The team ships what feels like a premium experience and the field data shows a cliff. **CLS.** This half is genuinely easy to make zero. The shift risk comes from the video element having no reserved height until its metadata is known, so the content below jumps when the intrinsic dimensions arrive. Pinning the container's aspect ratio removes the possibility entirely — the box occupies its final size from first layout, and the video simply fills it. ```css .hero { aspect-ratio: 16 / 9; width: 100%; } .hero video { width: 100%; height: 100%; object-fit: cover; } ``` This is worth stating as a principle: of the two vitals, CLS from media is a *design decision* you can eliminate by construction, while LCP is a *budget* you have to manage continuously. Do not spend negotiating capital on the one you can simply engineer away. ## The requirements I would actually write down 1. **A poster exists, and it is treated as the page's hero image.** Real markup, right dimensions for the viewport, prioritised ahead of the video bytes. 2. **The hero box is reserved by aspect ratio**, so CLS attributable to the hero is zero and stays zero. 3. **The video is subordinate to the critical path.** Its bytes must not compete with the poster, the critical CSS, or the primary content. A byte budget is agreed in advance, and it is smaller than people expect for something that is decorative by definition. 4. **Not everyone gets it.** Reduced-motion users should get the still poster instead of the loop; that is an accessibility requirement, and it conveniently also spares the cheapest devices. 5. **A rollback condition in field data.** A named threshold on 75th-percentile mobile LCP for that page, checked after rollout, with an agreed owner and an agreed action. ## Why the rollback condition is the important one Everything above item five is engineering that a competent team does anyway. Item five is what makes this a principal-level answer: it converts a permanent argument into a measured experiment. Marketing gets to try the thing they believe converts; performance gets a defined exit rather than a veto it must defend at every planning meeting. If the conversion lift is real and the LCP cost is small, the data says keep it; if the LCP regression is severe and the lift is noise, the same data removes it without anyone re-litigating taste. The measurement has to be **field data on the target page**, not a lab run. A lab test on a fast connection shows a video that buffers instantly and a poster that is already cached. The population that determines the score is on mid-tier phones and variable networks, and it is the only population whose experience actually changed. ## The honest tradeoff to state out loud Background video is one of the few features where the performance cost is close to pure — the user is not waiting for it in order to do anything, so every byte is spent on atmosphere. That does not make it illegitimate; brand pages exist to create an impression. It does mean the burden of proof sits with the feature, and that a cheaper substitute — a high-quality still, or a very short loop that starts only after the page is interactive — usually captures most of the intended effect for a small fraction of the cost. Offering that alternative, rather than a flat refusal, is what gets you a yes on the requirements.