CLS en INP zijn Core Web Vitals die andere kanten van de gebruikerservaring meten dan snelheid.
CLS meet visuele stabiliteit. Een layoutverschuiving gebeurt als inhoud beweegt na het laden. Een gebruiker leest een artikel. Er laadt een advertentie. Het artikel schuift omlaag. De gebruiker raakt de plek kwijt. CLS meet hoe vervelend dat is.
INP meet reactiesnelheid. De gebruiker klikt op een knop. Het systeem reageert. Hoe lang duurt dat? INP meet de vertraging van de reactie.
Cumulative Layout Shift (CLS) in detail
Wat veroorzaakt CLS
Advertenties laden en nemen ruimte in. Embeds laden en nemen ruimte in. Afbeeldingen laden zonder opgegeven hoogte. Lettertypen wisselen en tekst herschikt zich. Inhoud wordt via JavaScript toegevoegd.
Een voorbeeld uit de praktijk
De pagina-indeling is stabiel. De gebruiker begint te lezen. Er laadt een advertentie. De advertentie is 300 pixels hoog. De inhoud onder de advertentie schuift 300 pixels omlaag. De gebruiker raakt de plek kwijt. Frustrerend.
Meting
CLS wordt gemeten als percentage van het zichtbare scherm dat verschuift. Is het scherm 1000 pixels hoog en schuift de inhoud 300 pixels, dan is de CLS 0,3. Het doel is onder 0,1 (10 procent verschuiving is acceptabel, 30 procent niet).
CLS optimaliseren
Strategie één: ruimte reserveren
Reserveer ruimte voor advertenties, embeds en afbeeldingen. Zeg de layout: de advertentie neemt 300 pixels in. Reserveer die ruimte. De advertentie laadt in de gereserveerde ruimte. Geen verschuiving.
Strategie twee: onderaan toevoegen
Voeg geen inhoud toe midden op de pagina. Voeg het onderaan toe (de inhoud eronder is al uit beeld gescrold). Of voeg het toe in een sticky header (de gebruiker verwacht dat de header verandert).
Strategie drie: lettertypewissels vermijden
Wissel het lettertype niet midden in het laden. Een lettertypewissel laat tekst herschikken. Alle tekst met dat lettertype verschuift. Gebruik `font-display: optional` of `font-display: swap` om de verschuiving te beperken.
Strategie vier: afbeeldingshoogte opgeven
Gebruik een vaste hoogte voor afbeeldingen. De afbeelding laadt. De hoogte is opgegeven. De afbeelding vult de gereserveerde ruimte. Geen verschuiving.
Een voorbeeld uit de praktijk: CLS van een productpagina in een webshop verbeteren
CLS aan het begin: 0,25 (slecht).
Analyse
Productafbeeldingen laden zonder opgegeven hoogte. De afbeeldingen duwen inhoud weg. Dat draagt 0,10 bij aan de CLS. Een advertentie onder het product laadt na de pagina. De advertentie neemt ruimte in. De inhoud verschuift. Dat draagt 0,12 bij. Klantbeoordelingen laden via een API. Ze worden in de pagina geplaatst. De inhoud verschuift. Dat draagt 0,3 bij.
Optimalisatie
Geef de afbeeldingshoogte op in de HTML. De afbeeldingen vullen de gereserveerde ruimte. Bijdrage aan CLS: nul. Reserveer ruimte voor de advertentie. De advertentie laadt in de gereserveerde ruimte. Bijdrage aan CLS: nul. Lazy load de klantbeoordelingen onder de vouw. Voeg niets toe boven de vouw. Bijdrage aan CLS: nul (de verschuiving gebeurt buiten beeld).
Nieuwe CLS: 0,05 (goed).
Interaction to Next Paint (INP) in detail
Wat INP meet
INP meet reactiesnelheid. De gebruiker klikt op een knop. Het systeem verwerkt de klik. Werkt de status bij. Past de weergave aan. Toont dat op het scherm. INP is de tijd van de klik tot de eerste zichtbare update.
Een voorbeeld uit de praktijk
De gebruiker klikt op de knop Toevoegen aan winkelwagen. Het systeem controleert de voorraad. Werkt de winkelwagenteller bij. Toont het nieuwe aantal op het scherm. Is de INP 100 milliseconden, dan ziet de gebruiker de teller direct veranderen. Is de INP één seconde, dan verandert de teller een seconde later. Dat voelt traag.
Meting
INP wordt gemeten in milliseconden. Een doel onder 200 milliseconden is goed.
INP optimaliseren
Strategie één: uitvoertijd van JavaScript verkorten
Lange JavaScript blokkeert de weergave. Splits een lange taak in kleinere taken. Gebruik async, defer of Web Workers voor zware berekeningen.
Strategie twee: event handlers optimaliseren
Event handlers moeten zo min mogelijk doen. Schuif zwaar werk door naar de achtergrond.
Strategie drie: CSS optimaliseren
Zware CSS kan het weergeven vertragen. Gebruik CSS containment om de browser te vertellen: dit element staat op zichzelf, bereken niet de stijlen van de hele pagina opnieuw als dit element verandert.
Strategie vier: een snellere weergavetechniek gebruiken
CSS-updates zijn sneller dan JavaScript-aanpassingen van de DOM. Gebruik CSS transforms in plaats van left/top-positionering. Gebruik CSS opacity in plaats van wijzigingen in zichtbaarheid.
Een voorbeeld uit de praktijk: reactiesnelheid van een formulier
INP aan het begin: 400 milliseconden (slecht).
Analyse
Het formulier heeft JavaScript voor validatie. De gebruiker typt in een veld. De validatie draait. De validatie is synchroon. Ze blokkeert het bijwerken van het invoerveld. Het veld wordt pas bijgewerkt als de validatie klaar is. Dat voelt traag.
Optimalisatie
Verplaats de validatie naar de achtergrond (Web Worker of setTimeout). Het invoerveld wordt direct bijgewerkt. De validatie gebeurt op de achtergrond. Gebruik CSS containment op het formulier. Zeg de browser: het formulier staat op zichzelf, bereken niet de stijlen van de hele pagina opnieuw. Gebruik een CSS transform voor animatie in plaats van JavaScript-positionering.
Nieuwe INP: 150 milliseconden (goed).
CLS en INP samen
CLS laat een pagina onstabiel voelen. INP laat een pagina traag voelen. Samen bepalen ze hoe gebruikers de kwaliteit ervaren.
Een pagina met een goede LCP maar slechte CLS (snel maar springerig) voelt frustrerend. De gebruiker geeft de traagheid de schuld, terwijl het een stabiliteitsprobleem is.
Een pagina met een goede LCP en CLS maar slechte INP (snel en stabiel maar traag in reactie) voelt kapot. Knoppen reageren niet op klikken.
Alle drie de Core Web Vitals tellen voor een goede gebruikerservaring.
Veelgestelde vragen
Hoe ontdekken we CLS-problemen?
Gebruik Chrome DevTools. Klik met de rechtermuisknop op de pagina. Kies Inspecteren. Open het tabblad Performance. Neem het laden van de pagina op. DevTools toont de layoutverschuivingen tijdens het laden. Kijk ook in PageSpeed Insights. Lighthouse signaleert CLS-problemen. Het Core Web Vitals-rapport in Search Console toont pagina's met een slechte CLS. Met de websitebouwer van WEMASY kun je dit direct op je website instellen.
Moeten we ruimte reserveren voor alle advertenties of alleen voor kritieke?
Reserveer ruimte voor advertenties boven de vouw (advertenties die direct laden). Reserveer geen ruimte voor advertenties onder de vouw (die laden na het scrollen). Advertenties onder de vouw kunnen de inhoud eronder laten verschuiven, maar de gebruiker ziet die verschuiving niet.
Hoe optimaliseren we INP voor complexe applicaties met veel JavaScript?
Verplaats zware berekeningen naar Web Workers. Een Web Worker draait op een aparte thread. Die blokkeert de hoofdthread niet. De hoofdthread blijft reageren op invoer van de gebruiker. Gebruik ook React Suspense of vergelijkbare frameworks die zware berekeningen uitstellen tot de interactie is afgehandeld.
Is CLS op mobiel belangrijker dan op desktop?
Op mobiel is CLS belangrijker. Het mobiele scherm is kleiner. Layoutverschuivingen vallen meer op. Een mobiele gebruiker merkt een verschuiving sneller en raakt eerder gefrustreerd. Geef CLS-optimalisatie op mobiel voorrang.
Kunnen een goede CLS en INP een slechte LCP compenseren?
Nee. Duurt het laden van een pagina vijf seconden, dan is de gebruiker al gefrustreerd voordat CLS en INP tellen. De gebruiker vertrekt voordat die iets doet. Snel laden (goede LCP) is de basis voor een goede ervaring. Een goede CLS en INP verbeteren de ervaring van een snelle pagina, niet van een trage.
Hoe meten en volgen we verbeteringen in CLS en INP?
Meet vóór de optimalisatie. Voer de optimalisatie door. Meet daarna opnieuw. Gebruik de Web Vitals-bibliotheek (een JavaScript-bibliotheek die Core Web Vitals meet) om bij echte gebruikers te volgen. Stel meldingen in: gaat de CLS of INP achteruit, dan krijgt het team een melding.