Core Web Vitals: de drie cijfers die Google meet

Core Web Vitals zijn een bevestigd rankingsignaal en, belangrijker nog, een conversiefactor. Het huidige trio:

• LCP (Largest Contentful Paint): hoofdcontent zichtbaar in < 2,5 s. Fix: statisch/ISR, priority op de hero-afbeelding, zo weinig mogelijk blokkerende CSS, snelle TTFB (zie renderstrategie).
• INP (Interaction to Next Paint): verving FID in maart 2024; elke interactie moet binnen < 200 ms reageren. Fix: minder en later geladen externe scripts, kleinere clientbundels ("use client" alleen waar nodig), lange taken opsplitsen.
• CLS (Cumulative Layout Shift): < 0,1. Fix: afmetingen op alle afbeeldingen/embeds, gereserveerde ruimte voor banners, next/font (geen sprongen bij het verwisselen van fonts).

Meet op twee manieren:

• In het lab: Lighthouse in CI (bijv. @lhci/cli bij elke PR) vangt regressies voor de deploy.
• In het veld: data van echte gebruikers is waarop Google daadwerkelijk rankt. Je koppelt dat met één hook:

// app/web-vitals.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    // naar je eigen analytics sturen
    navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
  });
  return null;
}

Velddata vind je in Search Console → Core Web Vitals of in PageSpeed Insights (toont CrUX als er genoeg data is).

Checklist:

• LCP < 2,5 s, INP < 200 ms, CLS < 0,1 in velddata, niet alleen in Lighthouse
• Lighthouse CI of een equivalent bewaakt regressies
• useReportWebVitals voedt analytics met metrieken van echte gebruikers
• Mobiel apart gecontroleerd: daar valt de meeste sites door de mand