Angular Academy · Les

Core Web Vitals meten

Volg prestatiestatistieken en verbeter ze

Les 4 van 413 stappen

Core Web Vitals meten is een gratis Angular Academy-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 Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Waarom vitals belangrijk zijn

Core Web Vitals zijn prestatiestatistieken van Google die zijn gericht op gebruikers. Ze meten laden, interactiviteit en visuele stabiliteit en beïnvloeden zowel de gebruikerservaring als de zoekrangschikking.

De drie statistieken

Het trio bestaat uit LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) en INP (Interaction to Next Paint). Elke statistiek richt zich op een ander aspect van ervaren prestaties.

LCP

LCP meet wanneer het grootste zichtbare element (hero-afbeelding, kop) klaar is met renderen. Goed is minder dan 2,5 seconden. SSR helpt door deze inhoud in de initiële HTML te leveren.

CLS

CLS meet onverwachte verschuivingen in de lay-out tijdens het laden van de pagina. Goed is minder dan 0,1. Reserveer ruimte voor afbeeldingen en advertenties en voeg geen inhoud boven bestaande inhoud in.

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

INP meet de responsiviteit op gebruikersinteracties gedurende de levensduur van de pagina en vervangt de oudere FID. Goed is minder dan 200 ms. Zware JS op de hoofdthread schaadt INP.

Hoe SSR vitals helpt

SSR verbetert LCP door inhoud eerder weer te geven en kan CLS verminderen door vroeg een stabiele lay-out te leveren. Incrementele hydratatie verbetert INP door vooraf minder JavaScript te leveren.

Labgegevens versus praktijkgegevens

Labgegevens komen van synthetische tools zoals Lighthouse in een gecontroleerde omgeving. Praktijkgegevens (CrUX, RUM) komen van echte gebruikers. Optimaliseer met beide; voor de rangschikking worden praktijkgegevens gebruikt.

Meten met Lighthouse

Voer Lighthouse uit in Chrome DevTools of CI om labgegevens voor LCP en CLS te krijgen, plus een proxy voor de totale blokkeertijd van INP en bruikbare diagnoses.

// npx lighthouse https://example.com --view

De web-vitals-bibliotheek

Verzamel vitals van echte gebruikers in de browser met de bibliotheek web-vitals en stuur ze naar je analyse-eindpunt.

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

JavaScript verminderen

Kleinere bundels verbeteren INP en time-to-interactive. Gebruik lazy loading op routeniveau, @defer, incrementele hydratatie en tree-shaking om de geleverde JS te verminderen.

Itereren en controleren

Werk aan prestaties door te meten, te veranderen en opnieuw te meten. Voer na het inschakelen van SSR, hydratatie of defer Lighthouse opnieuw uit en volg de ontwikkeling van praktijkgegevens gedurende enkele weken om echte winst te bevestigen.

Korte controle

Controleer je kennis van Core Web Vitals.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt de Core Web Vitals (LCP, CLS, INP) geleerd, evenals hoe SSR en incrementele hydratatie deze verbeteren, het verschil tussen lab- en praktijkgegevens en hoe je meet met Lighthouse en de bibliotheek web-vitals. Daarna heb je iteratief opnieuw gemeten.

Gratis beginnen

Leer HTML 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: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Core Web Vitals meten” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Core Web Vitals meten”, 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 Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Core Web Vitals meten”?

Volg prestatiestatistieken en verbeter ze Je oefent met Angular Academy 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 Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy 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 meten”?

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 Angular Academy?

Ja. Elke les over Angular Academy 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

← Terug naar Angular Academy