Ruben Bijker
Get in touch

Web performance and Core Web Vitals: what to optimise first

By Ruben Bijker · Published · 6 min read

Performance work pays off most when you fix the largest bottleneck first. For most sites that is the hero image, render-blocking resources and too much JavaScript. Measure, change one thing, measure again.

The three metrics

  • LCP (Largest Contentful Paint): how fast the main content appears. Aim for 2.5 seconds or less.
  • INP (Interaction to Next Paint): how quickly the page reacts to input. Aim for 200 ms or less.
  • CLS (Cumulative Layout Shift): how much the layout jumps while loading. Aim for 0.1 or less.

Improving LCP

  • Serve images in modern formats (AVIF, WebP) with correct dimensions and srcset.
  • Preload or prioritise the hero image; never lazy-load it.
  • Reduce server response time with caching, a CDN and static or incrementally regenerated pages.
  • Remove render-blocking CSS and scripts from the critical path.

Improving INP

  • Ship less JavaScript. Remove unused dependencies and split bundles per route.
  • Break up long tasks, defer non-critical work and avoid heavy synchronous handlers.
  • Prefer server rendering and small interactive islands over fully hydrated pages.
  • Watch third-party scripts; analytics and chat widgets are frequent culprits.

Improving CLS

  • Always set width and height (or aspect ratio) on images, video and embeds.
  • Reserve space for ads, banners and late-loading components.
  • Load fonts with font-display and a size-adjusted fallback to avoid text jumps.

Caching and delivery

Set long-lived, immutable cache headers on hashed assets. Use a CDN for HTML where content is public. Compress with Brotli. HTTP/2 or HTTP/3 removes most reasons for bundling hacks.

Measure the right way

  1. Use lab tools (Lighthouse, WebPageTest) to find causes.
  2. Use field data (CrUX, real-user monitoring) to confirm real impact.
  3. Set a performance budget in CI so regressions fail the build.

Related: rendering strategies and TypeScript in web projects.

Frequently asked questions

What are Core Web Vitals?
Three user-centred metrics from Google: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (visual stability).
Should I trust Lighthouse scores?
Use them for debugging, but judge success by field data from real users, such as the Chrome User Experience Report or your own real-user monitoring.

Related service: Freelance web developer in Amsterdam

Have a project in mind?

Tell me briefly what you need. You get an answer from me, not from a sales team.

Get in touch

Keep reading