Performance is usually treated as a developer problem. But many of the biggest performance wins – or losses – are decided in the design file: the size of the hero image, the number of fonts, a pop-up that pushes content down, a carousel on the home page. If you are a designer, understanding Core Web Vitals helps you make better decisions before a single line of code is written.
What are Core Web Vitals?
Core Web Vitals are three metrics defined by Google to measure real user experience on a web page: how fast the main content appears, how quickly the page responds to interaction, and how stable the layout is. They are measured from real visits (field data), and Google uses them as one of its page experience signals in search.
| Metric | What it measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
| LCP – Largest Contentful Paint | Loading: when the biggest visible element finishes rendering | 2.5 s or less | 2.5–4 s | Over 4 s |
| INP – Interaction to Next Paint | Responsiveness: delay between a tap/click/key press and the next visual update | 200 ms or less | 200–500 ms | Over 500 ms |
| CLS – Cumulative Layout Shift | Visual stability: how much content unexpectedly moves | 0.1 or less | 0.1–0.25 | Over 0.25 |
A page “passes” when the 75th percentile of visits meets the good threshold for all three – measured separately on mobile and desktop. That means three out of four visitors should get a good experience, including those on slower phones and networks.
Tip: INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. FID only measured the delay before the first interaction was handled. INP looks at interactions throughout the whole visit and includes the time until the screen actually updates, so it is a much better picture of how responsive a page feels. If you read an older article that mentions FID, it is out of date.
LCP: make the main content appear fast
The LCP element is usually the hero image, a large banner, a video poster or a big block of heading text. Ask yourself: “On mobile, what is the largest thing visible when the page first loads?” That is what you need to make fast.
Design decisions that hurt LCP
- A full-screen hero photograph exported at 4000px wide and several megabytes.
- A hero slider where the first slide is loaded by JavaScript.
- Text hidden until a custom web font finishes loading.
- A heading that animates in from invisible after a delay.
- Background images set in CSS for the main visual, which the browser discovers late.
What to do instead
- Export images at the size they are displayed, in modern formats such as WebP or AVIF, and provide several sizes for different screens (
srcset). - Use a single, strong hero image rather than a carousel. Carousels also tend to have poor engagement after the first slide.
- Limit fonts to two families and few weights; ask developers to use
font-display: swapso text shows immediately. - Keep the main heading visible from the start – animate secondary elements instead.
- Mark the hero image as important so developers can add
fetchpriority="high"and avoid lazy-loading it.
INP: make every interaction feel instant
INP measures how long it takes from the user’s action – tapping “Add to cart”, opening a menu, typing in a search box – to the next frame being painted. Slow INP usually comes from too much JavaScript running on the main thread. Designers influence this more than they think.
Design decisions that hurt INP
- Heavy third-party widgets on every page: chat bubbles, multiple tracking scripts, social feeds.
- Search-as-you-type that filters thousands of items on every key press.
- Complex animations triggered on click that animate layout properties.
- Huge single-page dashboards that render everything at once.
What to do instead
- Always give immediate feedback. Design a pressed state, a spinner or an optimistic update so the screen changes right away, even if the real work takes longer.
- Question every third-party embed. Does the chat widget need to load on the blog? Can it load after the user clicks “Chat with us”?
- Use pagination or “Load more” rather than rendering very long lists at once.
- Prefer animations of
transformandopacity– see CSS Animation Performance Tips.
CLS: stop the page from jumping
Everyone has tried to tap a link just as an advert loads and pushes it down, so they tap the wrong thing. That is layout shift. CLS adds up unexpected shifts during the page’s life. Shifts that happen right after a user action (like opening an accordion) do not count, because the user expects them.
Common causes – and the design fix
| Cause | Fix |
|---|---|
| Images without dimensions | Specify aspect ratios in the design (16:9, 4:3, 1:1). Developers set width/height or aspect-ratio so space is reserved. |
| Ads and embeds that load late | Design a fixed-size slot for each ad or embed, with a placeholder. |
| Cookie or offer banners pushing content down | Overlay them at the bottom of the screen instead of inserting them at the top. |
| Web fonts swapping and changing text size | Choose fallback fonts with similar proportions; developers can tune them with size-adjust. |
| Content injected above what the user is reading | Add new items below, or show a “New updates – tap to view” button. |
For developers, the demo idea is simple: an <img> with width and height attributes lets the browser calculate the space before the file arrives.
<img src="kochi-backwaters-800.webp"
srcset="kochi-backwaters-400.webp 400w, kochi-backwaters-800.webp 800w"
sizes="(min-width: 768px) 50vw, 100vw"
width="800" height="533"
alt="Houseboat on the Kochi backwaters at sunset">How to measure Core Web Vitals
There are two kinds of data. Field data comes from real users and is what actually counts. Lab data comes from a test run on one device and helps you debug.
| Tool | Type | Good for |
|---|---|---|
| PageSpeed Insights | Field + lab | A quick report for any public URL |
| Search Console – Core Web Vitals report | Field | Seeing which groups of pages on your site need work |
| Chrome DevTools – Performance panel | Lab (with live metrics) | Finding the LCP element, long tasks and layout shifts |
| Lighthouse | Lab | Audit with suggestions; note that it cannot measure INP directly because it does not interact – use Total Blocking Time as a proxy |
Tip: Test on a mid-range Android phone over mobile data, not only on your office Wi-Fi and a fast laptop. Many of your users are on slower devices, and the 75th percentile includes them.
A designer’s Core Web Vitals checklist
- Identify the LCP element on mobile for each key template and keep it light and visible from the start.
- Define aspect ratios for every image, video and embed in the design system.
- Limit font families and weights; note fallback fonts in the specs.
- Design reserved slots for ads, maps and embeds.
- Design instant feedback states (pressed, loading, success) for every button.
- Place banners and toasts as overlays, not content-pushing blocks.
- Review every third-party script request with the team and ask if it is needed on that page.
- Prefer simple, purposeful motion; respect reduced-motion settings.
Why designers should care
Core Web Vitals are not just a score for SEO. They describe things users feel: waiting, tapping and getting nothing, losing their place when the page jumps. As a UX lead, I find these metrics a useful common language between design, development and business teams – they turn “the site feels slow” into something specific we can fix together.
Related reading: Semantic HTML for SEO, HTML Images and Nielsen’s Usability Heuristics (especially “visibility of system status”, which INP-friendly feedback supports).
Frequently asked questions
What are the three Core Web Vitals in 2026?
Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability.
Is FID still a Core Web Vital?
No. INP replaced First Input Delay as a Core Web Vital in March 2024.
What is a good LCP score?
2.5 seconds or less at the 75th percentile of page visits, measured separately for mobile and desktop.
Can a designer improve Core Web Vitals without coding?
Yes. Image sizes and formats, number of fonts, reserved space for media and ads, banner placement, feedback states and the number of third-party widgets are all design decisions with a direct effect.
Why does my Lighthouse score differ from PageSpeed Insights field data?
Lighthouse is a single lab test on a simulated device. Field data is collected from real visitors over time. Use field data to judge success and lab data to investigate problems.
