Wat is Cumulative Layout Shift (CLS) en hoe dit te verhelpen

Wat is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) vertegenwoordigt het onderdeel "visuele stabiliteit" van de Core Web Vitals. De Cumulative Layout Shift (CLS) meet de bewegingen van de pagina terwijl content wordt weergegeven of nieuwe content op de pagina wordt getoond. Het berekent een score gebaseerd op hoeveel van de pagina onverwacht verschuift en hoe ver het verschuift. Deze verschuivingen van content zijn erg irritant en zorgen ervoor dat je de plek kwijtraakt in een artikel dat je aan het lezen bent of, nog erger, dat je op de verkeerde knop klikt!

Wat is een goede Cumulative Layout Shift (CLS)-score?

Een goede CLS-score is alles tussen de 0 en 0,1. Als uw CLS-score tussen de 0,1 en 0,25 ligt, is verbetering nodig. Elke CLS-score boven de 0,25 wordt als slecht beschouwd. Om te slagen voor de Core Web Vitals voor de Cumulative Layout Shift, moet ten minste 75% van uw bezoekers een "goede" CLS-score hebben.

Het belang van CLS in webprestaties en user experience

Cumulative Layout Shift (CLS) is verbonden aan zowel webprestaties als user experience, omdat het direct van invloed is op hoe stabiel en voorspelbaar een webpagina aanvoelt tijdens het laden. Hier is waarom het belangrijk is:

• UX, betrokkenheid en merkperceptie: Onverwachte lay-outverschuivingen verstoren de flow van de gebruiker, waardoor het moeilijker wordt om informatie te vinden, op knoppen te klikken en te interageren met de pagina zoals bedoeld. Deze frustratie kan leiden tot slechte ervaringen waarbij gebruikers de website in zijn geheel verlaten. De user experience van een website weerspiegelt het merk erachter. Frequente lay-outverschuivingen kunnen de indruk wekken van een slecht ontworpen of onderhouden website, de betrokkenheid van gebruikers verstoren en leiden tot verminderde interactie en mogelijk hogere bouncepercentages.
• Toegankelijkheid (Accessibility): Lay-outverschuivingen kunnen bijzonder storend zijn voor gebruikers met een handicap die afhankelijk zijn van ondersteunende technologieën of schermlezers. Een stabiele lay-out zorgt ervoor dat iedereen de website effectief kan navigeren en ermee kan interageren.
• SEO en zoekrangschikking: De Core Web Vitals zijn een kleine, maar belangrijke rankingfactor in Google. Google, samen met andere zoekmachines, geeft prioriteit aan websites die een goede user experience bieden. CLS is een van de Core Web Vitals-statistieken die Google in overweging neemt bij het rangschikken van websites. Optimaliseren voor CLS kan uw website een concurrentievoordeel opleveren in zoekresultaten.

Hoe wordt CLS gemeten?

De CLS van een pagina kan worden gemeten met de Layout Instability API. Het volgende is een eenvoudig gebruik van deze API:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Het berekenen van de CLS

De CLS wordt berekend met behulp van een eenvoudige, maar elegante formule:

CLS = sum(impact-fraction * distance-fraction)

De impact fraction meet hoeveel van de zichtbare content van de pagina is verschoven. De distance fraction meet hoe ver de content is verschoven. Als bijvoorbeeld 50% van de pagina (hoeveel) is verschoven met 25% (hoe ver) van de viewport van de pagina, is de CLS-score = 0,50 * 0,25 = 0,125.

Verwachte versus onverwachte lay-outverschuivingen

Niet alle lay-outverschuivingen zijn slecht, alleen degene die je niet verwacht. Wanneer je bijvoorbeeld op een "laad meer items"-link klikt, zou je verwachten dat er meer items op de pagina verschijnen en dat de content van de pagina verschuift.

Daarom dragen alleen onverwachte lay-outverschuivingen bij aan de CLS. Als een gebruiker bijvoorbeeld op een knop klikt en er als reactie nieuwe content aan de pagina wordt toegevoegd (bijvoorbeeld een uitklapmenu), wordt de lay-outverschuiving uitgesloten van de CLS. Om precies te zijn: lay-outverschuivingen die optreden binnen 500 milliseconden na gebruikersinvoer (user input) worden uitgesloten van berekeningen.

Lay-outverschuivingssessies

Toen CLS voor het eerst werd geïntroduceerd, werden sommige sites onterecht afgestraft met een slechte CLS-score. Zo zou bijvoorbeeld een pagina die infinite scrolling implementeert, voor elke nieuwe scroll de impact van de nieuw toegevoegde content bij de totale CLS-score opgeteld hebben gekregen. Daarom wordt de CLS nu berekend in sessies (sessions). Elke sessie heeft een maximale duur van 5 seconden en een gat van 1 seconde tussen lay-outverschuivingen. De sessie met de grootste CLS-score wordt de uiteindelijke CLS-score.

Als bijvoorbeeld tijdens de eerste sessie de CLS-score 0,095 is, vervolgens in de volgende sessie de CLS 0,15 is, en in de laatste sessie de CLS-score 0 is, wordt de uiteindelijke CLS-score de hoogste van de drie: 0,15.

CLS en de Core Web Vitals

Cumulative Layout Shift (CLS) is een belangrijke, gebruikersgerichte metric voor het meten van visuele stabiliteit. De Cumulative Layout Shift (CLS) maakt deel uit van de Core Web Vitals, samen met de Largest Contentful Paint (LCP) en Interaction to Next Paint (INP). Samen meten deze drie statistieken de laadprestaties, interactiviteit en visuele stabiliteit.

Hoe u CLS-problemen kunt meten

1. Gebruik Lighthouse om Cumulative Layout Shifts te vinden

De makkelijkste methode om lay-outverschuivingen te vinden is door Lighthouse te gebruiken in uw eigen Chrome-browser. Voer simpelweg een Lighthouse-audit uit door met de rechtermuisknop ergens op de pagina te klikken. Selecteer vervolgens element inspecteren, selecteer het Lighthouse-tabblad in de nu geopende console en voer de audit uit.

De auditresultaten tonen de Cumulative Layout Shift (CLS)-score. Scroll naar beneden naar Diagnostics en klap de Cumulative Layout Shift-informatie uit om te zien welke knooppunten (nodes) de lay-outverschuiving veroorzaken.

Eerlijk gezegd gebruik ik deze methode zelf eigenlijk nooit. Het gebrek aan details over de exacte afstand van de lay-outverschuiving maakt deze resultaten lastiger te interpreteren.

2. Gebruik de CLS Visualizer om Cumulative Layout Shifts te vinden

De CLS Visualizer is een Chrome-extensie die door mij is geschreven. Met een enkele druk op de knop worden alle lay-outverschuivingen op de pagina gevisualiseerd. Dit is de eerste oplossing waarnaar ik grijp als ik een lay-outverschuiving op een pagina probeer vast te stellen. Het is eenvoudig en geeft een geweldig visueel overzicht van de Cumulative Layout Shift.

3. Gebruik het Chrome Performance-tabblad om CLS te vinden

Veruit de beste manier om een lay-outverschuiving te debuggen is via het Chrome Performance-tabblad. Om het prestatietabblad te openen, navigeert u naar een willekeurige pagina in Chrome en gebruikt u deze sneltoetscombinatie:

• Druk op Ctrl+Shift+I (Dev Tools openen)
• Druk op Ctrl+Shift+E (Start profiling en pagina herladen)

Inspecteer nu de tijdlijn frame voor frame door met uw muis over de tijdlijn bovenaan te zweven en zoek naar lay-outverschuivingen (lay-outverschuivingen zijn ook rood gekleurd in de Experience-sectie van het Performance-tabblad).

4. Gebruik RUM-tools zoals CoreDash

RUM staat voor Real User Monitoring en RUM-gegevens kunnen waardevolle realtime inzichten bieden in de Core Web Vitals. RUM-tools zoals CoreDash kunnen de Cumulative Layout Shifts opsplitsen in segmenten zoals browser, element, navigatietype, specifieke URL of paginatype. Dit helpt bij het identificeren en oplossen van slecht presterende pagina's en de overtredende elementen.

Veelvoorkomende oorzaken van Cumulative Layout Shift en hoe deze te verhelpen

De oorsprong van alle lay-outverschuivingen is in principe hetzelfde. Op een bepaald moment nam een element dat boven een ander element was geplaatst meer of minder ruimte in beslag dan voorheen. Dit is doorgaans te wijten aan een of meer van de volgende oorzaken:

• Afbeeldingen, iframes of video's zonder expliciete afmetingen
• Advertenties die laat in de viewport worden geladen
• Dynamisch geïnjecteerde content
• CSS-animaties die lay-out triggerende eigenschappen gebruiken
• Trage gebruikersinteracties
• Webfonts met niet-overeenkomende fallbacks

CLS veroorzaakt door afbeeldingen, video's en iframes

Afbeeldingen, video's en iframes zijn de gebruikelijke verdachten als het gaat om Cumulative Layout Shift, aangezien deze elementen het grootste deel van de CLS-problemen vormen. Zie hoe u de lay-outverschuiving veroorzaakt door automatisch schalen van afbeeldingen oplost voor een gedetailleerde gids over deze specifieke oorzaak.

Lay-outverschuivingen veroorzaakt door afbeeldingen, video's of iframes worden altijd veroorzaakt door ontbrekende afmetingen. Meestal komt dit doordat de hoogte en breedte van het element niet zijn gedefinieerd in de HTML. Een veelgebruikt patroon en goede werkwijze (good practice) is om de intrinsieke breedte van de afbeelding in de HTML in te stellen en styling te gebruiken om automatisch te schalen zodat de afbeelding in zijn bovenliggende container (parent container) past.

Stel expliciete width en height attributen in

De eenvoudigste en meest effectieve manier om CLS door afbeeldingen en iframes te voorkomen, is door altijd de attributen width en height direct in de HTML op te nemen. Moderne browsers gebruiken deze attributen om de aspect ratio te berekenen voordat de resource laadt, zodat ze de juiste hoeveelheid ruimte reserveren.

<!-- Afbeeldingen: voeg altijd width en height toe -->
<img src="hero.jpg" width="800" height="450" alt="Hero afbeelding">

<!-- Iframes: hetzelfde principe -->
<iframe src="https://example.com/embed"
    width="560" height="315"
    title="Ingesloten content">
</iframe>

<!-- Video's: voeg altijd dimensies toe -->
<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<style>
img, iframe, video {
    max-width: 100%;
    height: auto;
}
</style>

Gebruik de CSS aspect-ratio eigenschap

Voor responsieve lay-outs of wanneer exacte pixelafmetingen niet beschikbaar zijn, biedt de CSS-eigenschap aspect-ratio een alternatieve manier om ruimte te reserveren. Dit is vooral handig voor containers die dynamische content of ingesloten media bevatten.

<style>
/* Reserveer ruimte voor een 16:9 videocontainer */
.video-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #f0f0f0;
}

/* Reserveer ruimte voor een vierkante afbeelding */
.avatar {
    aspect-ratio: 1 / 1;
    width: 80px;
    object-fit: cover;
}

/* Responsieve iframe-container */
.embed-container {
    aspect-ratio: 560 / 315;
    width: 100%;
}
.embed-container iframe {
    width: 100%;
    height: 100%;
}
</style>

CLS veroorzaakt door webfonts

Een Cumulative Layout Shift kan worden veroorzaakt door webfonts. Webfonts zijn lettertypen die niet op uw lokale computer of telefoon zijn geïnstalleerd, maar van het internet worden gedownload. Zolang de webfont nog niet is gedownload, wordt de pagina meestal weergegeven met een fallback-lettertype. De grootte van deze fallback-lettertype kan afwijken van het uiteindelijke lettertype. In dit voorbeeld is het fallback-lettertype iets kleiner dan het uiteindelijke webfont. Zie hoe u ervoor zorgt dat tekst zichtbaar blijft tijdens het laden van de webfont voor meer informatie.

Er zijn verschillende methoden om de lay-outverschuiving, veroorzaakt door webfonts, op te lossen. Ze zijn gebaseerd op twee technieken:

1. Zorg ervoor dat het fallback-lettertype beter overeenkomt met de webfont. De meest effectieve manier is door de @font-face descriptors te overschrijven (overriding).

2. Versnel de webfonts. Dit maakt ze beschikbaar voor de browser voordat de browser begint met renderen. Een veelgebruikte manier om dit te doen is om uw webfonts zelf te hosten (self-host) en uw kritieke webfonts vooraf te laden (preload).

Font fallback matchen met metrische overschrijvingen (metric overrides)

De meest effectieve techniek om CLS van webfonts te elimineren is het creëren van een fallback-lettertype-definitie die sterk overeenkomt met de afmetingen van uw webfont. Met behulp van de descriptoren size-adjust, ascent-override, descent-override en line-gap-override, kunt u ervoor zorgen dat de fallback-lettertype bijna identieke ruimte inneemt. In combinatie met font-display: swap zorgt dit ervoor dat tekst onmiddellijk zichtbaar is met minimale lay-outverschuiving wanneer het webfont laadt.

<style>
/* Definieer een gematchte fallback font */
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 93%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* Gebruik de webfont met de gematchte fallback */
@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'My Font', 'My Font Fallback', sans-serif;
}
</style>

<!-- Preload de kritische webfont voor sneller laden -->
<link rel="preload" href="/fonts/myfont.woff2"
    as="font" type="font/woff2" crossorigin>

Tools zoals de Fallback Font Generator kunnen automatisch de juiste overschrijvingswaarden berekenen voor uw specifieke font-combinatie. Specifiek voor Google Fonts, geeft het zelf hosten van uw lettertypen u volledige controle over de font-face declaraties en de preloading-strategie.

CLS veroorzaakt door CSS animaties

CSS animaties en transities kunnen onverwachte lay-outverschuivingen veroorzaken wanneer ze eigenschappen animeren die de opmaak van omliggende elementen beïnvloeden. Eigenschappen zoals top, left, width, height, margin en padding dwingen de browser om de lay-out van de hele pagina opnieuw te berekenen, wat resulteert in CLS. Zie hoe u een lay-outverschuiving oplost die is veroorzaakt door CSS-transities voor een gedetailleerde walkthrough.

De oplossing is om composited CSS properties te gebruiken, zoals transform en opacity voor animaties. Deze eigenschappen worden afgehandeld door de GPU-compositor en veroorzaken geen herberekeningen van de lay-out, waardoor ze nul CLS produceren.

<style>
/* SLECHT: Het animeren van top/left veroorzaakt lay-outverschuivingen */
.slide-in-bad {
    position: relative;
    animation: slide-bad 0.3s ease-out;
}
@keyframes slide-bad {
    from { top: -50px; opacity: 0; }
    to   { top: 0; opacity: 1; }
}

/* GOED: Het animeren van transform veroorzaakt GEEN lay-outverschuivingen */
.slide-in-good {
    animation: slide-good 0.3s ease-out;
}
@keyframes slide-good {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
</style>

Volgens de HTTP Archive Web Almanac dragen op 39% van de mobiele pagina's en 42% van de desktoppagina's niet-samengestelde animaties (non-composited animations) bij aan CLS. Controleer uw animaties altijd om er zeker van te zijn dat ze alleen transform en opacity gebruiken in plaats van lay-out triggerende eigenschappen.

Gebruik CSS containment om lay-outverschuivingen te isoleren

De CSS eigenschap contain vertelt de browser dat de inhoud van een element onafhankelijk is van de rest van de pagina. Dit beperkt de omvang van lay-outherberekeningen en kan voorkomen dat lay-outverschuivingen zich uitbreiden naar omliggende elementen.

<style>
/* Isoleer advertentiecontainers van de rest van de pagina */
.ad-slot {
    contain: layout style;
    min-height: 250px;
}

/* Gebruik content-visibility voor content buiten het scherm */
.below-fold-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
</style>

De declaratie contain: layout zorgt ervoor dat elke wijziging in de grootte binnen het element geen lay-outherberekeningen activeert voor elementen eromheen. De eigenschap content-visibility: auto gaat nog verder doordat het de browser in staat stelt de weergave van content buiten het scherm in zijn geheel over te slaan, waarbij contain-intrinsic-size een geschatte grootte biedt om lay-outverschuivingen te voorkomen wanneer de content in beeld scrollt.

CLS problemen veroorzaakt door trage gebruikersinteracties

In het onderstaande voorbeeld triggert de 'laad meer'-knop duidelijk een lay-outverschuiving. Deze lay-outverschuiving wordt echter niet toegevoegd aan de CLS-metriek. Dit komt omdat deze lay-outverschuiving opzettelijk is.

Een browser weet dit doordat de nu zichtbare elementen een attribuut hebben genaamd "hadRecentInput". Wanneer deze is ingesteld op true EN de lay-outverschuiving plaatsvindt binnen 500 ms na het input-evenement (de klik op de knop), wordt de lay-outverschuiving niet door de browser gerapporteerd.

Zorg ervoor dat gebruikersinteracties binnen 500ms worden voltooid. Als een interactie langer duurt dan dat, telt de daaruit resulterende lay-outverschuiving mee voor de CLS-score. Dit is met name relevant voor AJAX-verzoeken die nieuwe content injecteren. Zie hoe u een chatwidget bouwt met perfecte Core Web Vitals voor tips over het optimaliseren van interactieve elementen.

CLS problemen veroorzaakt door AJAX en dynamisch geïnjecteerde content

AJAX maakt het mogelijk om webpagina's asynchroon te updaten door achter de schermen data uit te wisselen met een webserver. Het injecteren van nieuwe content in een willekeurige webpagina kan leiden tot een enorme lay-outverschuiving. Daarom is het verstandig om de ruimte te reserveren die wordt gebruikt voor de nieuwe content. U weet vooraf niet hoe hoog de nieuwe content zal zijn, maar u kunt wel een weloverwogen gok doen.

Bijvoorbeeld, als de gemiddelde AJAX-content 50% van het scherm in beslag neemt, is het verstandig om die 50% te reserveren. Wanneer de nieuwe content uiteindelijk 40 of 60% van het scherm in beslag neemt, is de CLS (50% min 40% = 10% distance fraction) nog steeds een heel stuk kleiner dan een 50% distance fraction.

Hier is een voorbeeld van hoe u dit kunt doen:

<style>
   #ajax { height: 400px; }
   #ajax.loaded { height: auto; }
</style>
<script>
   fetch('/ajax-content')
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML = result.html;
      el.classList.add('loaded');
   })
</script>

Post-load CLS: dynamische content en laat ladende elementen

Lay-outverschuivingen gebeuren niet alleen tijdens het initiële laden van de pagina. Post-load CLS wordt veroorzaakt door content die verschijnt of van grootte verandert nadat de pagina al is gerenderd. Veelvoorkomende oorzaken zijn onder meer:

• Laat ladende advertenties: Advertentienetwerken injecteren vaak seconden nadat de pagina is geladen content. Als het advertentieslot geen gereserveerde ruimte heeft, duwt de advertentie alle omliggende content naar beneden.
• Cookie consent banners: Banners die pagina-content naar beneden duwen in plaats van deze te overlappen, veroorzaken aanzienlijke CLS. Gebruik een overlay-patroon (position: fixed) of reserveer ruimte bovenaan de pagina.
• Lazy-loaded content above the fold: Content geladen via Intersection Observer die aanvankelijk verborgen was, maar in the viewport verschijnt zonder gereserveerde ruimte.
• A/B testing scripts: Test-tools die de DOM wijzigen na de initiële render, kunnen onverwachte verschuivingen veroorzaken. Voer A/B-testaanpassingen server-side uit of binnen de initiële HTML indien mogelijk.
• Infinite scroll implementaties: Nieuwe content die onderaan een lijst wordt toegevoegd, kan verschuivingen veroorzaken als de lay-out van bestaande elementen daardoor verandert. Zorg ervoor dat nieuwe content alleen wordt toegevoegd onder de huidige scroll-positie.

Het sessievenstermodel (hierboven beschreven) betekent dat zelfs post-load verschuivingen meetellen voor CLS als ze in de slechtste sessie vallen. Monitor uw CLS-attributiegegevens in CoreDash om te identificeren welke elementen na het laden verschuiven.

Los CLS problemen op die veroorzaakt worden door advertenties

Advertenties worden vaak aanzienlijk later op de pagina geladen. Dit maakt Cumulative Layout Shifts, veroorzaakt door advertenties, bijzonder hinderlijk. Wanneer er meerdere advertenties worden geladen in de zichtbare viewport, blijft de pagina gewoonweg niet stil staan. Om dit te verhelpen, reserveert u de ruimte voor de advertenties, in het bijzonder de advertenties in de zichtbare viewport.

<style>
/* Reserveer ruimte voor een rechthoekige mobiele advertentie */
.ad {
    min-height: 250px;
    background: #dedede;
    contain: layout style;
}
/* Reserveer ruimte voor een desktop banner advertentie */
@media only screen and (min-width: 600px) {
    .ad { min-height: 90px; }
}
</style>

Case study: Rakuten 24 en de zakelijke impact van CLS

Rakuten 24, een groot Japans e-commerce platform, voerde een gedetailleerde studie uit naar de impact van Cumulative Layout Shift op hun zakelijke cijfers. Door CLS te verminderen over hun product- en categoriepagina's, bereikte Rakuten 24 opmerkelijke resultaten:

• 53,37% toename in omzet per bezoeker voor gebruikers die een lage CLS ervoeren, vergeleken met degenen met een hoge CLS.
• 33,13% stijging in conversiepercentage (conversion rate) voor hetzelfde verbeterde CLS cohort.
• 15,20% afname in bouncepercentage (bounce rate) onder bezoekers met stabiele pagina-ervaringen.

Deze cijfers tonen aan dat CLS niet alleen een technische metric is. Visuele instabiliteit kost bedrijven direct inkomsten door gebruikers te frustreren tijdens hun browse- en aankooptraject. Wanneer elementen onverwacht verschuiven, verliezen gebruikers hun vertrouwen, klikken ze mis en breken ze hun sessies af. De Rakuten 24 case study bevestigt dat investeren in CLS-optimalisatie een meetbaar rendement (ROI) oplevert, in het bijzonder voor e-commerce sites waar elke interactie telt.

Wat echte CLS gegevens laten zien

CoreDash-data toont aan dat CLS de best presterende Core Web Vital is, waarbij 92,8% van de paginaweergaven op corewebvitals.io een "goede" score behaalt en er vrijwel geen apparaatverschil is tussen mobiel en desktop. Zowel desktop (92,8% goed) als mobiel (92,7% goed) behalen nagenoeg perfecte CLS-scores, met een p75 van 0 op beide apparaattypes.

Dit staat in contrast met statistieken zoals LCP en INP, waar mobiele prestaties significant slechter zijn dan op desktop. CLS is uniek omdat het op mobiel beter is dan op desktop over het bredere web, wat precies het tegenovergestelde is van elke andere Core Web Vital.

Wereldwijd, volgens de 2025 Web Almanac, is het beeld minder rooskleurig:

• 72% van de websites behaalt in het algemeen een goede CLS-score, terwijl 11% een slechte CLS heeft.
• 66% van de mobiele pagina's heeft minstens één ongeschaalde (unsized) afbeelding (een daling ten opzichte van 72% in 2022, maar nog steeds een belangrijke CLS bijdrager).
• 39% van de mobiele pagina's heeft niet-samengestelde animaties (non-composited animations) die bijdragen aan CLS.
• Slechts 11% van de pagina's preloadden webfonts, wat betekent dat de overgrote meerderheid van de sites kwetsbaar is voor font-swap lay-outverschuivingen.

CLS vertoont wereldwijd gestage verbeteringen van jaar tot jaar, maar uit de gegevens blijkt dat afbeeldingen zonder afmetingen en niet-samengestelde animaties de twee meest voorkomende oorzaken blijven. Het aanpakken van alleen deze twee problemen zou lay-outverschuivingen voor een groot deel van het web elimineren.

Veelgestelde vragen over CLS

Gerelateerde gidsen

Ontdek deze gedetailleerde gidsen voor specifieke CLS-optimalisatietechnieken:

• Los lay-outverschuiving op veroorzaakt door CSS transities: Leer hoe u lay-out triggerende CSS-animaties kunt identificeren en vervangen door samengestelde (composited) alternatieven.
• Los lay-outverschuiving op veroorzaakt door het automatisch schalen van afbeeldingen: Een complete walkthrough voor het toevoegen van de juiste dimensies aan afbeeldingen en responsieve containers.
• Zelf Google Fonts hosten: Verminder font-loading CLS door fonts zelf te hosten met de juiste font-display en preloading strategieën.
• Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van de webfont: Configureer font-display en font metric overschrijvingen (overrides) om font-swap lay-outverschuivingen te elimineren.
• Bouw een chatwidget met perfecte Core Web Vitals: Een casestudy over het implementeren van widgets van derden zonder CLS-, INP- of LCP-regressies te introduceren.

Bezoek het Core Web Vitals overzicht voor een compleet overzicht van alle Core Web Vitals-statistieken en optimalisatiestrategieën, of gebruik de Ultieme Core Web Vitals Checklist om uw site te auditen.