Test voor Cumulative Layout Shift (CLS)
De Cumulative Layout Shift-test van SEOptimer toont de CLS van je pagina ten opzichte van de drempelwaarden van Google, op basis van de eigen veldgegevens van Google van echte bezoekers.
Voer in enkele seconden een SEO-audit uit voor elke website
+ Uitgebreide SEO-/GEO-tools voor elke functie
Voer meer dan 100 controles uit op je website op het gebied van On-Page SEO, gebruiksvriendelijkheid, prestaties, social media en links. Nu met GEO in elk rapport. SEOptimer biedt ook zoekwoordonderzoek, ranktracking, backlinkanalyse en een volledige sitecrawler.
Over Cumulative Layout Shift
Wat is Cumulative Layout Shift?
Cumulative Layout Shift meet hoeveel de pagina verschuift tijdens het laden. Telkens wanneer een zichtbaar element naar een nieuwe positie springt zonder dat de bezoeker dit veroorzaakt, wordt die verschuiving beoordeeld en worden de scores opgeteld.
Het is de metriek met het meest herkenbare symptoom: u probeert op een link te klikken, maar drukt op iets anders omdat een advertentie of afbeelding erboven werd geladen en de pagina naar beneden duwde.
In tegenstelling tot de andere twee wordt deze metriek niet in tijd gemeten. Het is een ratio die beschrijft hoeveel van het scherm verschoof en over welke afstand, en daarom zijn de getallen klein. Een score van 0,1 vertegenwoordigt al een zichtbare verschuiving.
Wat wordt beschouwd als een goede CLS?
Google beschouwt 0,1 of lager als goed, 0,1 tot 0,25 als voor verbetering vatbaar en alles boven 0,25 als slecht, gemeten op het 75e percentiel van echte paginaweergaven.
Verschuivingen die een bezoeker zelf veroorzaakt, tellen niet mee. Het openen van een accordeon of het sluiten van een banner verplaatst de pagina op legitieme wijze. Alleen verschuivingen binnen een halve seconde na een interactie worden vrijgesteld. Dat is ongeveer het tijdsvenster waarin iemand de verschuiving aan zijn eigen handeling toeschrijft.
Dit is doorgaans de makkelijkst haalbare van de drie. Waar voor LCP en INP prestatieverbeteringen nodig zijn, wordt de meeste layoutverschuiving verholpen door ruimte te reserveren. Dat vereist een wijziging in de markup, niet in de architectuur.
Wat meestal layoutverschuiving veroorzaakt
- Afbeeldingen en video's zonder width- en height-attributen, waardoor er niets wordt gereserveerd totdat ze zijn geladen.
- Advertenties en embeds die in een container zonder vaste afmetingen worden geplaatst.
- Webfonts die op een ander formaat dan het fallback-lettertype worden geladen en de tekst opnieuw laten doorlopen.
- Banners, meldingen en cookiebalken die boven bestaande content worden ingevoegd.
- Content die door een script wordt ingevoegd nadat de pagina al is weergegeven.
Het patroon achter al deze gevallen is hetzelfde: iets arriveert laat en neemt ruimte in beslag die nergens voor was gereserveerd. Alles eronder wordt naar beneden geduwd en datgene wat de bezoeker op het punt stond aan te raken, verschuift.
Hoe u dit verbetert
- Stel voor elke afbeelding en video de breedte en hoogte in, zodat de browser de ruimte reserveert.
- Geef advertentieruimtes en ingesloten elementen een vaste minimale grootte, ook als ze leeg zijn.
- Laad belangrijke lettertypen vooraf en stem de metrische gegevens van het fallback-lettertype hierop af, zodat de wissel geen nieuwe opmaak veroorzaakt.
- Voeg banners en meldingen onder bestaande content in, of leg ze eroverheen in plaats van bestaande content te verschuiven.
- Reserveer ruimte voor alles wat een script later zal toevoegen.
- Controleer dit op mobiel, waar een smalle kolom een kleine verschuiving in een grote kan veranderen.
Wat deze tool controleert
De CLS-test leest de veldgegevens van Google voor de pagina — metingen die bij echte bezoekers in Chrome zijn verzameld — en laat zien hoe de pagina scoort ten opzichte van de bovenstaande drempelwaarden.
Als er geen resultaat wordt weergegeven, is er niet genoeg verkeer naar de pagina voor Google om hierover te rapporteren. Lay-outverschuiving is in de tussentijd de enige metriek die je betrouwbaar handmatig kunt controleren: laad de pagina op een telefoon via een trage verbinding en let op wat er verschuift.
Gebruik voor de andere twee statistieken, of voor alle drie samen, de Core Web Vitals-test.
Waar je nu verder kunt gaan
De meeste lay-outverschuivingen worden veroorzaakt door afbeeldingen en assets die laat worden geladen. Controleer de afbeeldingsoptimalisatie op de pagina, hoe groot de pagina is met de bestandsgrootte van webpagina-controle en hoe de pagina zich op een telefoon gedraagt met de mobiel responsief-test.
Uitgebreide SEO-toolbox met meer dan 55 tools
Controleer titels, metabeschrijvingen, koppen, Schema, Core Web Vitals, SSL en Robots.txt. Genereer metatags, sitemaps en .htaccess-regels, verklein CSS, JavaScript en HTML, en maak content met onze AI-schrijftools — direct en gratis.
Verder lezen
Meer Zien
Core Web Vitals: What are They? How are They Crucial to SEO?
You should optimize your web pages for a seamless user experience. But how can you measure the quality of user experience on a site? That’...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...