Wat is Cumulative Layout Shift?
Cumulative Layout Shift, of CLS, is een manier om te meten hoeveel de lay-out van een pagina in de loop van de tijd, zonder waarschuwing verandert. Er wordt bijvoorbeeld een hoge CLS-score gegeven als een websitebezoeker een pagina laadt en dat er tijdens het lezen een banner wordt geladen waardoor de pagina naar beneden springt.
CLS is een van de belangrijkste Core Web Vitals van Google, samen met Largest Contentful Paint (hoelang het duurt om het grootste stuk inhoud te laden) en First Input Delay (hoelang het duurt voordat een pagina interactief of "klikbaar" is). Op elke pagina die ze indexeren, meten de webcrawlers van Google CLS.
Cumulative Layout Shift (CLS) example by web.dev
De grootste oorzaak van verschuivingen in de lay-out is het niet instellen van een vaste hoogte en breedte. Dit zorgt ervoor dat de pagina geen ruimte reserveert voor bijvoorbeeld een afbeelding of video. Hierdoor wordt de tekst, die meestal eerder wordt geladen dan de afbeeldingen, plotseling naar beneden gedrukt als de afbeeldingen er zijn. Hetzelfde geldt bijvoorbeeld voor een advertentiebanner. De inhoud wordt dan naar beneden gedrukt, zoals te zien is in het onderstaande gif (van web.dev).
Of je gebruiker verschuivingen in de lay-out ervaart, hangt af van verschillende aspecten. Zo is elke mobiel en internetsnelheid anders. Als iemand snel internet heeft, zal alle inhoud, inclusief afbeeldingen en video's, snel laden.
Op cookies gebaseerde gepersonaliseerde webinhoud zal voor elke bezoeker anders werken, vooral als ze zich op een andere plaats bevinden. Ook mobiele gebruikers kunnen een heel andere ervaring hebben. Een kleine verandering in een webbrowser kan eruitzien als een enorme verandering op een klein scherm.
Waarom is CLS belangrijk?
Het is om twee redenen belangrijk om de Cumulative Layout Shift (CLS) te verminderen: zoekmachine ranking en gebruikerservaring. Bij een hoge CLS-score kies je misschien de verkeerde optie, stop je te snel of mis je delen van een website. Dit probleem is nog erger voor mensen die smartphones gebruiken om websites te openen, omdat veranderingen in de lay-out en sprongen een groot effect kunnen hebben op hoe mobiele gebruikers je website ervaren.
Klanten zullen een betere ervaring hebben op je site en je search ranking zal stijgen als je je site optimaliseert en CLS vermindert. Google rangschikt websites op basis van hoe goed hun pagina's werken en sites die niet voldoen aan hun Core Web Vitals-richtlijnen zullen worden benadeeld. Aangezien 68% van de online-ervaringen begint met een zoekopdracht, kan het volgen van de CLS best practices je website helpen hoger in de ranglijsten te komen en meer bezoekers te krijgen.
Wat moet mijn CLS-score zijn?
Er is geen specifieke CLS-score die als ideaal wordt beschouwd. Een score van 0,1 of minder wordt echter als goed en acceptabel gezien volgens de richtlijnen van Google's Core Web Vitals. Een score van meer dan 0,25 wordt als slecht beschouwd en kan van invloed zijn op de gebruikerservaring en zoekmachine ranking van je website. Het is belangrijk om je CLS-score in de gaten te houden en voortdurend te verbeteren om een soepele gebruikerservaring te bieden en de zichtbaarheid in zoekmachines te verbeteren.
Hoe meet je Cumulative Layout Shift?
Er zijn meerdere manieren om je CLS te meten, bijvoorbeeld met Pagespeed Insights of Google Lighthouse. Met beide tools is het heel eenvoudig om de prestaties van je pagina te analyseren en te bepalen welke elementen Lay-out Shifts kunnen veroorzaken.
Pagespeed-insights
- Ga naar Pagespeed Insights en voer je URL in.
- Klik op "analyseren".
- De score bovenaan is wat echte gebruikers ervaren.
- Als je naar beneden scrolt, kom je bij het gedeelte met lab data (gebaseerd op één gesimuleerd bezoek).
Google Lighthouse
Je kunt Google Lighthouse ook gebruiken om te zien of er lay-out shifts zijn op je site.
- Ga naar de pagina die je wilt controleren.
- Ga naar Developer Tools door met de rechtermuisknop te klikken en dan "inspecteren".
- Ga naar het tabblad "Lighhouse".
- Druk op "Rapport genereren".
- Dit ziet er hetzelfde uit als Pagespeed Insights, maar de scores kunnen verschillen.
Lay-out Shift debugger
Er zijn ook veel tools op internet te vinden om je Cumulative Layout Shift te meten. Lay-out shift debugger is er daar één van. Om deze tool te gebruiken hoef je alleen maar de URL in te voeren die je wilt testen. Maar daarnaast kun je ook een land selecteren van waaruit je je bezoek wilt simuleren.
RUMvision real user monitoring
Met real user monitoring (RUM) kun je lay-out shifts bekijken en zien welk element deze veroorzaakt. Je kunt ook filters toevoegen om te zien of een specifieke browser, viewport of zelfs laadstatus lay-out shifts veroorzaakt. Dit is de beste manier, omdat je lay-out shifts kunt optimaliseren voor je echte gebruikers in plaats van voor gesimuleerde gebruikers die onder ideale omstandigheden je website bezoeken.
Hoe kun je de Cumulative Layout Shift verbeteren?
CLS, of Cumulative Layout Shift, is een metric die wordt gebruikt om de visuele stabiliteit van een website te meten. Het meet het aantal onverwachte lay-out shifts tijdens het laadproces en geeft een score tussen 0 en 1, waarbij 1 de slechtst mogelijke score is. Een hoge CLS-score kan leiden tot een slechte gebruikerservaring, omdat gebruikers moeite kunnen hebben met een interactie doordat inhoud op de pagina verschuift.
Om CLS te verbeteren, is het belangrijk om je te richten op het verminderen van verschuivingen in de lay-out veroorzaakt door dynamische inhoud, het goed laden van lettertypen en het vermijden van onnodige DOM-manipulatie. Hier volgen enkele tips om je daarbij te helpen:
Breedte en hoogte instellen voor afbeeldingen en iFrames
Meestal gebeuren lay-out shifts wanneer inhoud die al is geladen, wordt verplaatst nadat andere inhoud klaar is met laden. De beste manier om hiermee om te gaan is om de benodigde ruimte zo ver mogelijk van tevoren al te reserveren.
Het expliciet instellen van de breedte- en hoogteattributen van afbeeldingen is de eenvoudigste methode om verschuivingen in de lay-out te corrigeren die worden veroorzaakt door afbeeldingen die niet de juiste afmetingen hebben. 72% van de pagina's heeft een afbeelding die niet de juiste afmetingen heeft, en misschien zelfs meer.
Bij aspectratio's zou je ook verschillende waarden kunnen gebruiken. Door de beeldverhouding te kennen, kan de browser de benodigde ruimte bepalen. De meeste moderne browsers stellen de standaard beeldverhouding in op basis van de breedte en hoogte attributen van een afbeelding.
Als je afbeelding in een container staat, kan CSS worden gebruikt om het formaat van de afbeelding aan te passen aan de breedte van de container. De hoogte kan worden ingesteld op automatisch en de breedte op 100%.
Laden van lettertypen
Het laden van lettertypes is een veel voorkomende oorzaak van lay-out shifts, omdat de browser tijdelijk onzichtbare tekst of een verkeerd lettertype kan weergeven terwijl hij wacht tot het lettertype is geladen. Om dit te voorkomen kun je lettertypen het beste asynchroon laden met de CSS @font-face regel. Je kunt ook de font-display eigenschap in CSS gebruiken om aan te geven hoe het lettertype moet worden weergegeven tijdens het laden. Je kunt bijvoorbeeld font-display: swap instellen om de browser een fallback lettertype te laten weergeven terwijl hij wacht tot het aangepaste lettertype is geladen.
Gebruik CSS-animaties in plaats van JS-animaties
Animaties kunnen lay-out shifts veroorzaken als ze niet vloeiend worden uitgevoerd. Hoewel vaak de voorkeur wordt gegeven voor Javascript-animaties voor dynamische effecten, kunnen ze zorgen voor hakerige of ongelijkmatige animaties die lay-out shifts veroorzaken. Overweeg in plaats daarvan het gebruik van CSS-animaties, die hardware versneld zijn en zorgen voor vloeiendere animaties die minder snel lay-out shifts veroorzaken.
Vermijd onnodige DOM-manipulatie
Het wijzigen van de DOM na de eerste render kan leiden tot verschuivingen in de lay-out, omdat de browser elementen moet herpositioneren om de wijzigingen te kunnen laten zien. Om deze verschuivingen tot een minimum te beperken, kun je het beste onnodige DOM-manipulatie vermijden. Als je de DOM moet aanpassen, doe dit dan om de impact op de lay-out te minimaliseren, zoals het gebruik van absolute positionering om elementen op hun plaats te houden.
Verminder dynamische inhoud
Het gebruiken van dynamische inhoud kan leiden tot verschuivingen in de lay-out, wat een van de factoren is die bijdragen aan een lage CLS-score. De term "dynamische inhoud" verwijst naar elk type inhoud dat kan worden gewijzigd op basis van de gegevens en acties van de gebruikers. Denk bijvoorbeeld aan een banner helemaal bovenaan de viewport te plaatsen om de meest recente verkoop te promoten of om gebruikers uit te nodigen zich in te schrijven voor een nieuwsbrief.
Heb je dit soort inhoud op je website geplaatst en zo ja, hoe belangrijk is het dan dat dit gemakkelijk toegankelijk is? Controleer daarna of je voldoende ruimte hebt gereserveerd voor de dynamische inhoud.
Door deze tips toe te passen, kun je het aantal lay-out shifts op je website verminderen en je CLS-score verbeteren. Een lagere CLS-score resulteert in een stabielere, gebruiksvriendelijkere ervaring voor je bezoekers.
