5 tips om jouw Cumulative Layout Shift te optimaliseren!

In het algoritme van Google, spelen de Core Web Vitals een cruciale rol. Hieronder vallen drie metrics: Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) en vanaf maart 2024 Interaction to Next Paint (INP). Deze metrics zijn essentieel voor zowel de technische prestatie van je website als hoe de gebruikers de website ervaren.

Wat is Cumulative Layout Shift? 

CLS is een manier om te meten hoeveel de indeling van een website verandert terwijl je deze bekijkt. Het geeft aan hoeveel onverwachte bewegingen er zijn en hoe groot die verschuivingen zijn gedurende de hele tijd dat je op een webpagina bent. Een hoge CLS leidt vaak tot een frustrerende ervaring; stel je voor dat de knop waar je op klikt verspringt, waardoor je niet op een product detailpagina komt, maar iets direct in je winkelmandje zet. Dat is vervelend, want je wilt het product eigenlijk nog bekijken of vergelijken.

Een goede (oftewel lage) CLS-score, wijst op een stabiele en voorspelbare paginaweergave, wat de gebruikerservaring en daarmee de kans op conversies verhoogt. Deze optimalisaties kunnen technisch uitdagend lijken, maar zijn essentieel voor een sterke online positie. 

In dit artikel verkennen we hoe je jouw CLS-score kan optimaliseren en welke impact het heeft op de groei en het succes van jouw webshop.

Hoe wordt de CLS-score berekend?

De CLS-score wordt berekend door de impact fractie en de afstand fractie van elke lay-out verschuiving te meten:

• Impact fractie: dit is een maat voor het percentage van het viewport dat wordt beïnvloed door de verschuiving. Het kijkt naar de ruimte die het element inneemt voor en na de verschuiving.
• Afstand fractie: dit meet hoe ver de elementen zijn verschoven, relatief aan de grootte van het viewport.

De CLS-score is de som van alle verschuivingen op de pagina. Een lage CLS-score duidt op een stabielere pagina zonder veel onverwachte verschuivingen, wat de gebruikerservaring ten goede komt. Google beschouwt een CLS van 0.1 of lager als goed en een score vanaf 0.25 als slecht. Het optimaliseren van CLS is cruciaal voor een goede gebruikerservaring en beïnvloedt de SEO-prestaties van een website.

Tip 1: definieer afmetingen voor visuele content 

Nu je weet wat CLS inhoudt, wil je natuurlijk weten hoe je de score kan verbeteren. In de volgende alinea’s zullen we een aantal manieren bespreken hoe jij deze betere score kan bereiken.

Afmetingen definiëren met een simpele CSS code

Zorg er allereerst voor dat afbeeldingen en video’s op je website altijd zijn voorzien van hoogte en breedte attributen. Dit voorkomt dat de pagina-indeling verandert terwijl deze media-elementen worden geladen. Bijvoorbeeld, een e-commerce website met productafbeeldingen moet voor elke afbeelding de juiste afmetingen specificeren om plotselinge lay-out verschuivingen te voorkomen.

Om breedte- en hoogte attributen voor afbeeldingen en video’s op je website te definiëren, neem je in de HTML code de width en height attributen in de <img> en <video> op. Bijvoorbeeld:

Hiermee geef je de browser de informatie die nodig is om de ruimte voor deze elementen te reserveren, voordat ze volledig zijn geladen. Dit is vooral belangrijk voor responsieve websites. “Responsief” betekent dat de website zich automatisch aanpast aan verschillende schermgroottes, zoals die van smartphones, tablets en desktops. 

Een mogelijkheid is om CSS te gebruiken om de afbeeldingen responsief te maken, terwijl je de aspectratio behoudt. Het behouden van de aspectratio van afbeeldingen betekent dat je ervoor zorgt dat de afbeeldingen hun oorspronkelijke verhouding tussen breedte en hoogte behouden, ongeacht de grootte van het scherm. Dit voorkomt dat afbeeldingen vervormd of uitgerekt worden wanneer de schermgrootte verandert. Je zet dat op de volgende manier in de code:

Uitleg:

• max-width: 100%: Dit zorgt ervoor dat de afbeelding nooit breder wordt dan de breedte van zijn container. Hierdoor wordt de afbeelding kleiner op kleinere schermen, maar wordt deze nooit groter dan de originele afmetingen.
• height: auto: Deze regel zorgt ervoor dat de hoogte van de afbeelding automatisch wordt aangepast om de aspect ratio (de verhouding tussen breedte en hoogte) te behouden. Wanneer de breedte verandert, past de hoogte zich aan om dezelfde verhouding te behouden.

Gebruik slimme tools om jouw afmetingen te definiëren

Om jouw afbeeldingen en video’s te definiëren kun je naast CSS ook tools zoals Adobe Photoshop gebruiken om de afmetingen van je afbeeldingen vooraf te bepalen en te optimaliseren voor jouw CLS-score. Andere online tools die je hiervoor kunt gebruiken zijn:

• Canva: een gebruiksvriendelijke grafische ontwerp tool waarmee je afbeeldingen kunt creëren en hun afmetingen kunt aanpassen. Canva biedt ook mogelijkheden om de bestandsgrootte van afbeeldingen te verminderen.
• Pixlr: een online fotobewerkingstool die vergelijkbaar is met Photoshop. Pixlr laat je afbeeldingen bijsnijden, de afmetingen wijzigen en ze optimaliseren specifiek voor webgebruik.
• GIMP (GNU Image Manipulation Program): hoewel GIMP een downloadbare software is, wordt het vaak gebruikt als een gratis alternatief voor Adobe Photoshop. Het is zeer geschikt voor het aanpassen van de afmetingen van afbeeldingen en het optimaliseren ervan voor het web.
• TinyPNG: deze tool is uitstekend voor het comprimeren van PNG- en JPEG-afbeeldingen zonder aanzienlijk kwaliteitsverlies. Het is erg gebruiksvriendelijk; je hoeft alleen je afbeelding te uploaden en TinyPNG doet de rest.
• ImageOptim: een webversie van de populaire desktop applicatie, ImageOptim optimaliseert je afbeeldingen door onnodige bestandsinformatie te verwijderen. Dit verkleint de bestandsgrootte zonder de kwaliteit te beïnvloeden.

Tip 2: vermijd pop-ups boven bestaande content

Inhoud die bovenaan een al reeds geladen pagina wordt ingevoegd, zoals een pop-upadvertentie of een meldingsbalk, kan leiden tot een slechte CLS-score. Het is beter om deze elementen op een manier te integreren die de bestaande inhoud niet verstoort. Een nieuwswebsite kan bijvoorbeeld kiezen voor een vaste advertentieruimte die losstaat van de hoofdinhoud.

Om het invoegen van nieuwe inhoud boven bestaande content te vermijden en zo een hoge CLS te voorkomen, kun je de volgende strategieën toepassen:

• Creëer vaste ruimtes voor dynamische elementen: maak specifieke secties op je pagina die gereserveerd zijn voor dynamische inhoud zoals advertenties of meldingen. Dit zorgt ervoor dat de rest van de pagina-inhoud niet verschuift wanneer deze elementen geladen worden.
• Gebruik van overlays in plaats van in-page inhoud: overweeg het gebruik van overlays voor pop-ups in plaats van deze direct in de pagina-inhoud te integreren. Dit zorgt ervoor dat de onderliggende inhoud niet verschuift.
• Gebruik animaties met voorzichtigheid: als je animaties gebruikt voor het tonen van inhoud, zorg er dan voor dat deze de bestaande lay-out niet verstoren. Bijvoorbeeld, een geleidelijk verschijnende meldingsbalk aan de bovenkant van de pagina is beter dan een die de hele pagina naar beneden duwt.

Het is belangrijk om uitgebreide tests uit te blijven voeren, zowel op desktop als mobiele apparaten, om te zorgen dat nieuwe inhoud geen negatieve impact heeft op de lay-out. 

Gebruik tools als BrowserStack voor cross-browser testing. Cross-browser testing is het proces van het testen van webapplicaties of websites in meerdere webbrowsers om te verzekeren dat de content en functionaliteit consistent zijn over verschillende browsers en apparaten heen. Dit is belangrijk omdat verschillende browsers, webpagina’s anders kunnen interpreteren en weergeven.

Tip 3: reserveer ruimte voor dynamisch geladen inhoud

Als je website onderdelen heeft die later worden geladen, zoals reacties of interactieve widgets, reserveer dan de benodigde ruimte in de initiële lay-out. Dit voorkomt dat de rest van de pagina verschuift wanneer deze elementen worden geladen.

Stel, je hebt een nieuwswebsite met een sectie voor gebruikersreacties onder elk artikel. In plaats van dat deze reacties direct zichtbaar zijn, worden ze dynamisch geladen nadat de rest van de pagina is weergegeven. Om te voorkomen dat de pagina-inhoud verschuift wanneer de reacties laden, kun je een vaste ruimte reserveren voor deze sectie. Dit kan door in de CSS een minimale hoogte in te stellen voor het reactie gedeelte. Wanneer de reacties geladen zijn, past de ruimte zich aan de daadwerkelijke inhoud aan. Door deze aanpak verminder je onverwachte lay-out verschuivingen en verbeter je de CLS-score.

Een voorbeeld van hoe je in CSS ruimte kunt reserveren voor dynamisch geladen inhoud, zoals een reactie gedeelte, is als volgt:

Hier stel je met ‘min-height’ een minimale hoogte in voor het element met het ID ‘reacties’. Dit betekent dat er altijd een ruimte van 200 pixels gereserveerd wordt, zelfs als de inhoud nog niet geladen is. Wanneer de reacties geladen worden en de inhoud groter is dan 200 pixels, zal het element zich uitbreiden om de inhoud te accommoderen zonder de rest van de pagina te verstoren.

Tip 4: gebruik van CSS animaties in plaats van JavaScript

CSS-gebaseerde animaties en overgangen veroorzaken minder lay-out verschuivingen dan JavaScript. Een subtiel fade-in effect voor afbeeldingen kan bijvoorbeeld worden gerealiseerd met CSS, wat zorgt voor een vloeiende gebruikerservaring zonder de CLS-score te verhogen.

Om CSS-animaties te gebruiken in plaats van JavaScript, kun je een eenvoudige CSS-code implementeren voor subtiele effecten zoals een fade-in voor afbeeldingen. Dit kan als volgt:

Voeg de klasse ‘fade-in’ toe aan je afbeeldingen in HTML. Wanneer de pagina geladen is, kun je met JavaScript de klasse ‘visible’ toevoegen om het fade-in effect te activeren. Dit zorgt voor een vloeiende overgang zonder dat de pagina-lay-out wordt verstoord. Deze aanpak vermindert de kans op hoge CLS-scores en verbetert tegelijkertijd de gebruikerservaring.

Tip 5: gebruik uitgebreide SEO tools voor het verbeteren van jouw CLS-score

Naast de eerder genoemde tips kan je nog meer tips, voor het verbeteren van je CLS-score, halen uit de volgende twee tools: Google Lighthouse en Web Vitals Chrome Extension. Deze tools analyseren de prestaties van je website, inclusief de CLS-score. Ze identificeren specifieke problemen en geven suggesties voor verbetering. Door deze tools te gebruiken, kun je gerichte aanpassingen maken om de CLS van je website te verbeteren.

Gebruik Google Lighthouse om onnodige CSS te identificeren

Google Lighthouse is een geautomatiseerde tool die je helpt bij het uitvoeren van een reeks audits voor performance, toegankelijkheid, progressive web apps, SEO en meer. Het genereert een rapport waarin duidelijk wordt aangegeven waar je verbeteringen kunt aanbrengen. Het kan bijvoorbeeld onnodige CSS identificeren die bijdraagt aan lay-out verschuivingen of het gebruik van afbeeldingen zonder afmetingen.

Web vitals chrome extension voor real-time feedback

De Web Vitals Chrome Extension is een andere nuttige tool, specifiek gericht op de Core Web Vitals, waaronder CLS. Deze extensie biedt real-time feedback over de prestaties van je website tijdens het browsen. Dit kan bijzonder waardevol zijn voor het direct observeren van hoe veranderingen de gebruikerservaring beïnvloeden. De extensie toont visuele indicatoren in de browserbalk, waardoor je snel kunt zien wanneer er problemen zijn met CLS of andere ‘vital metrics’.

Verbeter nu jouw Cumulative Layout Shift score!

Het optimaliseren van je Cumulative Layout Shift, is dus essentieel voor een goede gebruikerservaring en rankings in Google. Door te letten op zaken als het definiëren van afmetingen voor media, het slim invoegen van nieuwe inhoud, het reserveren van ruimte voor dynamisch geladen content, het gebruik van CSS-animaties en het inzetten van handige tools, til je jouw website naar een hoger niveau. 

Mocht je hulp nodig hebben met de technische details of wil je gewoon zeker weten dat je website optimaal presteert, dan staan wij van Ranking Masters voor je klaar. Met onze expertise en ervaring helpen wij jou om jouw CLS-score te verbeteren en ervoor te zorgen dat jouw website online goed scoort.

Neem gerust contact met ons op en ontdek wat wij voor jou kunnen betekenen!

Bronvermelding:

• Google. (z.j.). Optimize Cumulative Layout Shift. Geraadpleegd op 17-11-23, van https://web.dev/articles/optimize-cls