Core Web Vitals en monitoring
Leer LCP, INP en CLS begrijpen, meet ze bij echte gebruikers en gebruik Next.js-functies en observabilitytools om uw productie-app snel te houden.
Core Web Vitals en monitoring is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Wat zijn Core Web Vitals
Core Web Vitals zijn gebruikersgerichte prestatiestatistieken van Google die zowel de gebruikerservaring als de SEO-ranking beïnvloeden. De drie huidige statistieken zijn:
- LCP — Largest Contentful Paint (laden)
- INP — Interaction to Next Paint (reactiesnelheid)
- CLS — Cumulative Layout Shift (visuele stabiliteit)
LCP: laadsnelheid
LCP meet wanneer het grootste zichtbare element (vaak een hero-afbeelding of kop) volledig is weergegeven. Streef naar minder dan 2,5 s. Verbeter dit met afbeeldingsoptimalisatie, laden met prioriteit en renderen op de server.
import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />INP: reactiesnelheid
INP heeft FID vervangen. Het meet de latentie van gebruikersinteracties tijdens het hele bezoek. Streef naar minder dan 200 ms. Lange JavaScript-taken op de hoofdthread hebben de grootste negatieve invloed op INP.
CLS: visuele stabiliteit
CLS kwantificeert onverwachte verschuivingen in de lay-out. Streef naar minder dan 0,1. Stel altijd expliciete breedte en hoogte in voor afbeeldingen en reserveer ruimte voor advertenties en insluitingen.
Labgegevens versus praktijkgegevens
Labgegevens komen uit een gecontroleerde uitvoering (Lighthouse). Praktijkgegevens (RUM) komen van echte gebruikers op echte apparaten. Praktijkgegevens zijn bepalend voor rankings; labgegevens zijn uitstekend voor foutopsporing.
Rapporteren met useReportWebVitals
Next.js biedt useReportWebVitals om statistieken van echte gebruikers te verzamelen en naar je analyseeindpunt te sturen.
'use client';
import { useReportWebVitals } from 'next/web-vitals';
export function Vitals() {
useReportWebVitals((metric) => {
navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
});
return null;
}Een statistiek in categorieën indelen
Deel een statistiekwaarde in als goed / verbetering nodig / slecht. Dit is pure logica die je overal kunt uitvoeren.
function rateLCP(ms) {
if (ms <= 2500) return 'good';
if (ms <= 4000) return 'needs-improvement';
return 'poor';
}
console.log(rateLCP(1800));
console.log(rateLCP(3200));
console.log(rateLCP(5000));Werk op de hoofdthread verminderen
Verstuur minder JavaScript en stel niet-kritiek werk uit om INP te verbeteren. Gebruik dynamische imports om zware clientcomponenten op te splitsen in afzonderlijke codebundels.
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('./Chart'), { ssr: false });Server Components helpen
React Server Components worden op de server gerenderd en sturen voor dat deel van de structuur geen JavaScript naar de client. Daardoor verkleinen ze direct de bundel en verbeteren ze INP en LCP.
Hulpmiddelen voor monitoring in productie
Stel doorlopende monitoring in:
- Vercel Speed Insights voor ingebouwde RUM.
- Vercel Analytics voor verkeer.
- Sentry / OpenTelemetry voor fouten en traces.
Stuur een waarschuwing wanneer een statistiek buiten de drempelwaarde verslechtert.
Stel een prestat budget in
Definieer budgetten (bijvoorbeeld LCP < 2,5 s, JS < 170 KB) en dwing ze af in CI, zodat regressies de build laten mislukken voordat ze gebruikers bereiken.
Korte controle
Welke Core Web Vital meet de reactiesnelheid van gebruikersinteracties en wat is de doelwaarde?
Samenvatting
Je hebt geleerd hoe je productie snel houdt:
- LCP (laden), INP (responsiviteit) en CLS (stabiliteit), met hun doelwaarden.
- Het verschil tussen labgegevens en praktijkgegevens.
- RUM verzamelen met
useReportWebVitals. - JavaScript verminderen met codesplitsing en servercomponenten, plus monitoring en budgetten.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Core Web Vitals en monitoring” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Core Web Vitals en monitoring”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Wat leer ik in “Core Web Vitals en monitoring”?
Leer LCP, INP en CLS begrijpen, meet ze bij echte gebruikers en gebruik Next.js-functies en observabilitytools om uw productie-app snel te houden. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?
Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Core Web Vitals en monitoring”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?
Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Implementeren op Vercel en Netlify
- Afbeeldingen en fonts optimaliseren
- Bundleanalyse en prestatie-audits
- Core Web Vitals en monitoring