Back to notes

Web performance: Core Vitals without the pain

LCP, CLS, INP — the metrics Google measures that directly affect your business. How I hit good scores without sacrificing design.

performance web SEO

Why performance matters more than you think

A slow website doesn’t just frustrate users — it loses Google rankings, reduces conversions and increases bounce rate. Core Web Vitals are the metrics that measure that experience, and optimising them doesn’t have to mean sacrificing good design.

The three key metrics

  • LCP (Largest Contentful Paint) — How long the largest visible element takes to load. Target: under 2.5 seconds.
  • CLS (Cumulative Layout Shift) — How much content moves while loading. Target: under 0.1.
  • INP (Interaction to Next Paint) — How long the page takes to respond to an interaction. Target: under 200ms.

Strategies I use on every project

Improving LCP

<!-- Preload the hero image -->
<link rel="preload" as="image" href="/hero.webp" />

<!-- Fonts with display swap -->
<link href="fonts.css" rel="stylesheet" />
  • Images in WebP/AVIF format with explicit dimensions
  • Preload critical resources (hero image, fonts)
  • Server-side rendering or static generation (that’s why I use Astro)

Reducing CLS

  • Explicit dimensions on <img> and <video>
  • Reserve space for dynamic content with min-height
  • Avoid injecting content above the fold after load

Optimising INP

  • Minimise JavaScript on the main thread
  • Use requestAnimationFrame for animations
  • Debounce scroll and resize handlers

The design–performance balance

The most common mistake is thinking performance and design are opposites. They’re not. A website can have animations, custom typefaces and high-quality images and load in under 2 seconds.

The key is:

  1. Load only what’s needed — Code splitting, lazy loading, tree shaking
  2. Prioritise what’s visible — Above the fold first, the rest later
  3. Always measure — Lighthouse in CI, Real User Monitoring in production

Performance isn’t an optimisation you do at the end. It’s an architecture decision you make at the beginning.

Conclusion

Don’t wait until your website is finished to think about performance. Choose the right tools from the start (Astro, for instance, generates zero JavaScript by default), define a performance budget and measure on every deploy.

All notes