The Design Decisions That Secretly Destroy Core Web Vitals

Core Web Vitals scores are determined significantly by design decisions made before a single line of code is written. The hero video that autoplay loads on every page visit. The custom font loaded from an unoptimised source with a late render-blocking declaration. The carousel that shifts the page layout when it initialises. Each of these is a design decision that has a direct, measurable impact on LCP, FID, and CLS.

The designers who produce work that performs well in production are the ones who understand how their decisions map to web performance metrics — not because they've constrained their creativity, but because they've learned to achieve the same visual outcome with less performance cost. The carousel becomes a scroll-snap container. The video becomes a poster image with a play trigger. The font becomes a variable font with appropriate fallbacks.

“Performance isn't constrained by design decisions. It's determined by them.”

Largest Contentful Paint measures how long until the largest visible element loads. On most marketing pages, that's the hero image or the hero headline. Design choices that delay LCP: using CSS background images (not preloadable), choosing image formats that load slowly, designing heroes where the largest element is below a video or animation that must load first, and using web fonts for the headline without preloading the font file.

The fix for most LCP issues is prioritisation, not simplification. The largest element should be an HTML img tag with explicit width and height, fetchpriority='high', and a modern image format. The hero headline should be rendered in a system font while the web font loads, with font-display: swap. These are implementation details — but they're implementation details that only get implemented correctly when the design team understands why they matter.

The hardest conversation is the one where a design choice genuinely conflicts with performance and there's no way to have both. Autoplay video backgrounds are the most common case. The honest answer is that autoplay video backgrounds reliably delay LCP, increase data consumption for mobile users, and contribute to a poor experience on slower connections — and in most contexts, the aesthetic benefit doesn't justify the user experience cost.

But 'most contexts' isn't 'all contexts'. A premium creative studio where the video is core to the product demonstration has a different calculus than a SaaS tool where the video is atmospheric decoration. The decision should be made with full information about the cost, not made by default because the design looked good in a desktop preview. Know the cost. Make the choice deliberately.