Design Around Core Web Vitals

Performance & Reliability · performance, metrics, loading

Updated 2026-07-28

Decide what the largest element on each screen is, then make it load first. A hero image, a headline, or a chart is usually the thing users are waiting for, so it should never sit behind fonts, analytics, or a carousel.
Reserve space for everything that arrives late. Images, ads, embeds, banners, and asynchronous data all shift the page if their box is not defined before they load.
Never insert content above what the user is already reading. Late banners and cookie bars that push the page down cause mistaps on the control that used to be under the finger.
Keep the main thread free during the first few seconds. Work that blocks input makes the interface feel broken even when it is drawing quickly.
Respond to every input immediately, even if the result takes longer. A pressed state on tap buys the time you need to finish the real work.
Measure on the hardware and network your users actually have. A mid-range phone on a weak connection is the honest test, and a development machine on fibre is not.

Speed is a design property. Most of what makes a page feel slow was decided in the layout, not in the build step.