Core Web Vitals for designers

01The three metrics

Core Web Vitals are Google’s set of user-centred performance metrics. Designers influence all three through layout, media and motion choices.

• LCP

  Largest Contentful Paint: how fast the main content appears. Good is 2.5 seconds or less.

• INP

  Interaction to Next Paint: how quickly the page responds to input. Good is 200 milliseconds or less.

• CLS

  Cumulative Layout Shift: how much content jumps around. Good is 0.1 or less.

These thresholds come from web.dev and are measured at the 75th percentile of page loads.

02Designing for a fast LCP

On many pages the largest element is a hero image or a large heading. Big images are the most common cause of slow LCP.

• Choose a hero image that is no larger than it needs to be, and export it in a modern, compressed format.
• Mark the hero image as high priority and do not lazy-load it. Developers can use <code>fetchpriority="high"</code>.
• Avoid hiding the main content behind an animation or a slider that must load first.

03Preventing layout shift

1. Reserve space for images and embeds with <code>width</code> and <code>height</code> attributes or the CSS <code>aspect-ratio</code> property.
2. Give late-loading banners, cookie notices and ads a fixed slot, or overlay them instead of pushing content down.
3. Limit the number of web fonts and choose a fallback font with similar proportions, so text does not jump when the font loads.

04Motion and responsiveness

• Animate <code>transform</code> and <code>opacity</code>. These can run without recalculating layout, unlike width, height or top.
• Limit heavy third-party widgets such as chat tools, trackers and large embeds. They compete with your page for the main thread and can slow responses.
• Give instant visual feedback on press, such as a pressed state, even if the full result takes longer.

Raise these points with developers early. Measuring with PageSpeed Insights or Lighthouse shows which element is the LCP and where shifts occur.

Designers do not tune performance alone, but design decisions set the ceiling. A page built from huge images, many fonts and stacked widgets is slow before any code is optimised.

1. Set a simple budget with developers: image sizes, number of fonts and third-party scripts.
2. Mark the likely LCP element in the design so everyone knows which asset is the priority.
3. Review the live page with PageSpeed Insights or Lighthouse after each major change.

Fast pages are an accessibility and inclusion benefit too, because slow connections and older devices are common.

05Sources

• web.dev. Web Vitals. https://web.dev/articles/vitals
• web.dev. Optimize Cumulative Layout Shift. https://web.dev/articles/optimize-cls