Core Web Vitals Explained: LCP, CLS and INP in Plain English

Core Web Vitals are Google's measures of real user experience. They also influence search ranking, so they are worth understanding.

LCP: Largest Contentful Paint

How long until the biggest element in view, usually a hero image or heading, is visible. Good: 2.5 seconds or less.

Fixes:

• Serve the hero image in a modern format at the right size and mark it as priority.
• Use a CDN and caching.
• Cut render-blocking CSS and scripts.
• Prefer static or cached HTML over slow server rendering.

CLS: Cumulative Layout Shift

How much the page jumps around while loading. Good: 0.1 or less.

Fixes:

• Always set width and height, or an aspect ratio, on images and videos.
• Reserve space for ads, banners and embeds.
• Use font-display: swap and similar-sized fallback fonts so text does not jump.
• Do not insert content above existing content after load.

INP: Interaction to Next Paint

How quickly the page reacts when someone clicks, taps or types. Good: 200 ms or less.

Fixes:

• Break up long JavaScript tasks.
• Avoid heavy work in event handlers; defer it.
• Ship less JavaScript and lazy load what is not needed immediately.
• Keep the component tree small and avoid needless re-renders.

How to measure

Use PageSpeed Insights for field data from real users, Lighthouse for lab testing while you develop, and the Search Console report to see which URLs need work.

Quick wins for a portfolio

1. Compress images and use responsive sizes.
2. Self-host or preload one or two fonts.
3. Remove unused libraries.
4. Cache static pages and revalidate on a schedule.

Takeaway

Show content fast, keep it stable and respond quickly. Fix the largest problems first and re-measure.