Heb je ooit een website bezocht en stond je op het punt om op een hyperlink te klikken, maar veranderde de lay-out plotseling? Zo ja, dan zag je pagina-ervaring er waarschijnlijk ongeveer zo uit:
Hoewel u aanvankelijk van plan was om de bronnen van het artikel te controleren, wordt u nu naar een andere, onbekende plek gebracht vol met aanbiedingen voor creditcards, omdat u in plaats daarvan op een advertentie hebt geklikt.
Tenzij u uw cookiecache wist, zult u tot in den treure advertenties van MasterCard zien.
Zonder die gewijzigde lay-out had dit hele probleem voorkomen kunnen worden, en Google is het daarmee eens.
Voor Google is de gebruikerservaring (UX) een van hun topprioriteiten. Daarom werd in juni 2021 Cumulative Layout Shift (CLS) uitgerold, samen met twee andere Core Web Vitals .
Net als verschillende andere aspecten van de gebruikerservaring wordt Cumulative Layout Shift echter door weinigen begrepen. Daarom staan websites vaak vol met opdringerige advertenties en banners die de pagina-ervaring volledig verpesten. Maar Core Web Vitals brengt daar verandering in.
Wat is Cumulatieve Layout Shift (CLS)?
Cumulatieve lay-outverschuiving is een maatstaf voor de mate waarin de lay-out van een pagina verschuift tijdens het laden. Paginalay-outs verschuiven omdat verschillende elementen van een pagina met verschillende snelheden kunnen laden, waardoor de weergave van de gebruiker verandert.
Een langzaam ladende advertentie of video kan bijvoorbeeld een reeds geladen blok met leesbare content verder naar beneden op de pagina duwen zodra deze geladen is. Dit vormt een grote CLS.
Het is belangrijk om CLS te meten om twee redenen:
- Het heeft invloed op de gebruikerservaring
- Het heeft invloed op de manier waarop webcrawlers de inhoud op de pagina lezen en interpreteren.
Nu Google een rankingmaatstaf aan de gebruikerservaring heeft gekoppeld, vragen uitgevers zich af: "Wat is Cumulative Layout Shift?" en "Hoe kan ik dit gebruiken om de ranking van mijn website te beïnvloeden?"
Cumulatieve lay-outverschuiving is een Core Web Vital-metriek die alle lay-outverschuivingen op een pagina optelt, met uitzondering van de verschuivingen die niet door gebruikersinteractie zijn veroorzaakt, met een snelheidsafhankelijke berekening.
CLS kijkt naar de verhouding van het beïnvloede viewport en de bewegingsafstand.
De CLS-drempelwaarde bepaalt ook de lay-outverschuivingsscore en uw rankingfactor. Cumulatieve lay-outverschuiving is een relevante maatstaf voor de gebruikerservaring en beïnvloedt daarom uw SEO-prestaties.
Van de zes statistieken die PageSpeed van Google bijhoudt, is CLS goed voor 15% van de score. Daarmee is het de op twee na belangrijkste statistiek op het gebied van snelheid.
CLS vat alle onverwachte contentverschuivingen op de pagina samen. Om de beoordeling van Google te doorstaan, moeten gebruikers een hoge CLS-score behalen.
- Goed – onder 0,1,
- Verbetering nodig – tussen 0,1 en 0,25,
- Slecht – boven 0,25.
De numerieke waarde voor CLS geeft de ernst van elke verplaatsing aan. Wanneer er lay-outverschuivingen optreden, berekent Google hoe ver de content binnen de viewport is verplaatst gedurende de levensduur van de pagina.
Wat is de ideale drempelscore?
Een goede CLS-score is alles onder de 0,1. Hoewel Google aanbeveelt om je score onder de 0,1 te houden, is de ideale drempelwaarde 0 voor volledig statische pagina's. Het is makkelijker om deze score te behalen wanneer je weinig tot geen dynamisch ingevoegde content op je pagina's hebt.
Met code kunt u meerdere advertenties, banners en formulieren aan uw pagina toevoegen en toch grote lay-outverschuivingen voorkomen.
Wanneer een element dat zichtbaar is in het venster de startpositie verandert, wordt de verschuiving geregistreerd als een instabiel element.
Houd er rekening mee dat lay-outverschuivingen alleen worden geregistreerd als een factor ervoor zorgt dat zichtbare elementen van positie veranderen op de pagina. Als er nieuwe Document Object Model-elementen (DOM-elementen) worden toegevoegd of als bestaande elementen van grootte veranderen, wordt de CLS-score niet beïnvloed.
De scores voor lay-out shift worden bepaald door twee metingen van lay-out shift: impactfractie en afstandfractie. U moet het impactgebied vóór de impactfractie berekenen.
Welke invloed hebben lay-outwijzigingen op de gebruikersinteractie?
Onverwachte wijzigingen in de lay-out zijn niet alleen frustrerend, ze hebben ook een grote impact op de gebruikersinteractie.
Wanneer elementen over de pagina beginnen te verschuiven, verwarren ze gebruikers en maken ze het moeilijk om door websites te navigeren. Sommige websites staan zo vol met advertenties dat je cursor naar de knop 'Toevoegen aan winkelwagen' of 'Kopen' kan worden verplaatst, wat kan leiden tot een onbedoelde aankoop.
Zulke ervaringen zijn visueel storend en zorgen voor een slechte eerste indruk. Om te voorkomen dat uw gebruikers te veel op uw paginacontent blijven hangen, kunt u de CLS-score van uw site bijhouden.
Hoe wordt CLS berekend?
We weten nu dat een CLS wordt veroorzaakt door onstabiele elementen die met verschillende snelheden laden en inhoud in de viewport verschuiven. Hieruit volgt dat een CLS recht evenredig moet zijn met twee variabelen: het viewportoppervlak dat het onstabiele element inneemt en de afstand die dit onstabiele element aflegt om een verschuiving te veroorzaken.
Deze twee variabelen worden respectievelijk impactfractie en afstandfractie genoemd. Laten we nu eens kijken hoe deze worden gemeten en gebruikt bij het berekenen van CLS.
Impactfractieberekening
Bereken het impactgebied, oftewel de ruimte die wordt beïnvloed door lay-outverschuivingen, door een numerieke waarde voor het impactgebied te berekenen. Om de impactfractie te bepalen, deelt u het impactgebied door het viewport-oppervlak. De viewport is het gedeelte van de pagina dat zichtbaar blijft zonder naar beneden te scrollen.
Formule voor het berekenen van de impactfractie
Impactfractie = [Oppervlakte van impactgebied [300 x 400]] / [Oppervlakte van viewport [500 x 600]]
Impactfractie houdt alleen rekening met de beweging zelf en houdt geen rekening met hoe storend de beweging is. Afstandsfractie in combinatie met verplaatsingsafstand lost dit probleem op.
In dit geval bedraagt onze impactfractie 0,4.
Afstandsfractieberekening
Bepaal eerst de verplaatsingsafstand door te definiëren hoe ver de elementen zijn verplaatst. Deel vervolgens de maximale verplaatsingsafstand door de totale hoogte van de viewport om de afstandsfractie te bepalen.
Formule om de afstandsfractie te berekenen
Afstandsfractie = [Max. verplaatsingsafstand / hoogte van ViewPort]
Ervan uitgaande dat de teller in dit geval 100 is en de noemer 600, komen we op een afstandsfractiewaarde van 0,166.
Gebruik nu de oplossingen die u in beide formules vindt om de berekening van de lay-outverschuiving te voltooien.
Formule om de Google CLS-score te berekenen
Zoals uitgelegd is CLS het product van de impactfractie en de afstandsfactor.
Door de hierboven verkregen waarden voor impactfractie en afstandsfactor te gebruiken, krijgen we de volgende berekening
CLS = 0,166 x 0,4
Dat geeft ons een CLS-waarde van .066.
Om de score voor de lay-outverschuiving voor één animatie te bepalen, vermenigvuldigt u de impactfractie met de afstandfractie. Wilt u echter de totale cumulatieve lay-outverschuiving berekenen, tel dan alle scores voor de lay-outverschuiving voor het totale aantal animatieframes bij elkaar op.
Hoewel het optellen van de scores voor de lay-outverschuiving effectief was, werd er geen rekening gehouden met Single Page Applications die lang meegaan. Daardoor was de formule voor bepaalde gebruikers te oneerlijk.
Om hiermee rekening te houden, begon Google met het groeperen van verschuivingen in sessievensters. Dit zijn tijdsintervallen in de levenscyclus van een bestaande pagina.
Wijzigingen in de lay-out worden vervolgens samengevat binnen het sessievenster. Dit betekent dat de CLS-score alleen wordt beïnvloed tijdens de sessie.
Bovendien telt de uiteindelijke CLS-score mee voor de maximumscore van één sessievenster. Als een gebruiker het venster tijdens een shift sluit, wordt dit dus niet meegerekend. Alles wat binnen het invoeruitsluitingsvenster verandert, inclusief de tijd die nodig is om de pagina te laden, wordt ook niet meegerekend.
Andere berekeningen: CLS meten
Er zijn nog een paar andere elementen die in CLS worden overwogen, waaronder:
- Opzettelijke wijzigingen in de lay-out: het invoeruitsluitingsvenster negeert verschuivingen die binnen een halve seconde na de invoer van de gebruiker plaatsvinden.
- Lay-out- en animatieverschuivingen: Google negeert CSS-transformatiewijzigingen en animaties.
- Lay-outverschuivingen genereren: Als er lay-outverschuivingen plaatsvinden terwijl de pagina wordt geladen, kan dit een negatieve invloed hebben op uw CLS-score als dit buiten het uitsluitingsvenster gebeurt.
- Lay-outverschuivingen boven de vouw: Google telt alleen wijzigingen binnen het zichtbare venster.
Om lay-outverschuivingen en -wijzigingen nauwkeurig bij te houden, kunt u een CLS-meetinstrument gebruiken.
Hulpmiddelen voor het meten van CLS
Tools voor het meten van de CLS-score kunnen actief helpen bij het voorkomen van lay-outverschuivingen. Softwaretools meten je bestaande content en gebruiken het bijbehorende tabblad Prestaties van de cumulatieve lay-outverschuiving om bedrijven een definitieve CLS-score te bieden die ze kunnen verbeteren.
De meeste van de volgende softwareoplossingen interpreteren labgegevens, maar Google's PageSpeed Insights meet ook veldgegevens. Search Console biedt een eenvoudig Core Web Vitals-rapport.
Bij laboratoriumgegevens worden prestatiegegevens verzameld in een gecontroleerde omgeving, maar omdat deze gebaseerd zijn op vooraf gedefinieerde omstandigheden, weerspiegelen de meeste scores van laboratoriumgegevens niet voor 100% de werkelijke gebruikerservaring.
Veldgegevens daarentegen zijn gebaseerd op complexere gegevens, die worden verkregen door gegevens op individueel niveau te combineren. Ze worden vaak gebruikt voor statistische analyses van groepen mensen en om bedrijfsgegevens samen te vatten. Hoewel veldgegevens nauwkeuriger zijn, zijn ze niet altijd beschikbaar.
De termen "echte gebruikersgegevens" en "veldgegevens" zijn hetzelfde, maar de JavaScript API is een apart systeem. Als je enige programmeerervaring hebt, kun je de JavaScript API gebruiken om CLS per minuut te meten. Start de Layout Instability API als je wilt controleren op onverwachte lay-outverschuivingen.
PageSpeed Insights en Search Console kunnen u helpen bij het optimaliseren van CLS en het voorkomen van grote lay-outverschuivingen. De PageSpeed Cumulatieve Lay-outverschuivingstest controleert op responsief webdesign en biedt webontwikkelaars meer details en helpt u bij het invoegen van dynamische content.
Een ideale PageSpeed-score wordt bereikt wanneer alle snelheidsstatistieken gemiddeld 90 of hoger zijn. Als u merkt dat een of meer van uw statistieken oranje zijn, concentreer u dan op het verbeteren van die gebieden.
- Goed: 90 of hoger (groen)
- Verbeteringen nodig: 50 tot 90 (oranje)
- Slecht: onder de 50 (rood).
Op het tabblad Prestaties kunnen gebruikers precies zien hoe PageSpeed Insights de visuele stabiliteit meet. PageSpeed gebruikt Chrome User Experience Report, hun statistische analysesoftware, om statistieken te verzamelen die nuttig zijn voor het meten van de visuele stabiliteit. Het controleert op responsieve afbeeldingen, de beeldverhouding van afbeeldingen, weblettertypen, lettertypeweergave, de initiële laadtijd van de pagina en nog veel meer.
Alle webvitals in het overzichtstabblad worden verschillend gewogen: FID, Speed Index en Time to Interactive krijgen een score van 10%, CLS van 15%, LCP van 25% en Total Blocking Time van 30%. Google telt geen verschuivingen mee die voortkomen uit gebruikersinteracties.
Houd er rekening mee dat statistieken elkaar beïnvloeden. Als LCP en Total Blocking Time bijvoorbeeld traag zijn, zal je laadtijd waarschijnlijk met een slakkengangetje toenemen.
Hoe verminder je cumulatieve lay-outverschuiving (CLS)?
Om problemen met cumulatieve lay-outverschuivingen te verbeteren, is het essentieel om te begrijpen wat de CLS in de eerste plaats beïnvloedt. Verschillende factoren dragen bij aan slechte CLS-scores, waaronder:
- Video's en afbeeldingen toevoegen zonder afmetingen
- Advertenties, iframes en embeds installeren zonder afmetingen
- Acties die wachten op het laden van een pagina of een netwerkrespons om DOM-elementen bij te werken (dynamisch geïnjecteerde inhoud)
- Webfonts die een flits van onzichtbare tekst (FOIT) of een flits van niet-opgemaakte tekst (FOUT) veroorzaken, trage systeemfonts, trage lettertypelading of een falende lettertypeweergave
CLS speelt een belangrijke rol op mobiele apparaten. 77% van de Amerikanen heeft een smartphone en bijna 40% van alle e-commerceaankopen wordt gedaan via een mobiel apparaat. Tablets en smartphones zijn echter de apparaten die het meest uitdagend zijn om te optimaliseren.
Vanwege een zwakkere CPU, een ingewikkeld netwerk en een kleinere viewport kan het voor mobiele programmeurs lastig zijn om te bepalen hoeveel ruimte er op de pagina nodig is om alle elementen zichtbaar te houden.
U moet ervoor zorgen dat de kenmerken van uw video en afbeelding kleiner worden op basis van de viewportgrootte.
1. Kenmerken van de afbeeldingbreedte en -hoogte
Als u geen breedte- en hoogtekenmerken voor uw site opgeeft, weet de browser niet hoeveel ruimte er nodig is om elementen correct toe te wijzen terwijl de pagina wordt geladen.
Waarschijnlijk is de gereserveerde ruimte niet voldoende en zal het scherm verschuiven om het geheel te laten passen.
Bepaal de afmetingen van de afbeeldingen en video-elementen om de juiste hoeveelheid ruimte te creëren.
2. FOUT/FOIT weblettertype
Soms kan het meer dan twee gerenderde frames duren voordat aangepaste tekst is geladen, wat resulteert in onzichtbare tekst of het gebruik van een reservelettertype. Als aangepaste tekst langer nodig heeft om te verschijnen dan de oorspronkelijke laadlimiet van de pagina, veroorzaakt dit lay-outverschuivingen en heeft dit invloed op uw CLS-score en het weblettertype zelf.
U kunt dit probleem oplossen door een vooraf geladen lettertype of een systeemlettertype te gebruiken dat rechtstreeks in uw code is ingesloten.
3. Niet-gespecificeerde advertenties, iframes en ingesloten afmetingen
Een andere manier om grote lay-outverschuivingen te voorkomen, is door de afmetingen van advertenties, iframes en embeds te specificeren. Een lay-outverschuiving treedt op wanneer de verkeerde beeldverhouding van de advertentie in de code van de website is ingesloten.
Hoewel u bij het gebruik van mediaquery's mogelijk rekening moet houden met subtiele verschillen in de formaten en vormfactoren van advertenties/tijdelijke aanduidingen, kunt u ruimte reserveren om dit probleem te voorkomen.
4. Hoe animaties en dynamische inhoud
Acties die wachten op een netwerkrespons van een webserver voordat ze worden ingevuld, veroorzaken ook verschuivingen.
Als gebruikersinvoer ervoor heeft gezorgd dat de lay-outverschuivingsgebieden groter zijn geworden, telt dit niet mee voor een CLS-score, vooral niet als de verschuiving dezelfde beeldverhouding heeft als vóór de lay-outverschuiving. Als er echter wel rekening wordt gehouden met gecodeerde lay-outverschuivingsgegevens, moet u hiervoor ruimte reserveren.
Ga door naar het volgende gedeelte om te leren hoe u problemen met lay-outverschuivingen in WordPress kunt oplossen.
Hoe los je problemen met cumulatieve lay-outverschuivingen in WordPress op?
Programmeurs hebben verschillende methoden om problemen met cumulatieve lay-outverschuivingen in WordPress op te lossen. Als je over goede programmeervaardigheden beschikt en een cumulatieve lay-outverschuiving op je website wilt verminderen, kun je met dit 10-stappenproces WordPress-specifieke CLS-problemen oplossen.
Stap 1: Ontdek welke elementen verschuiven
Tools zoals Cumulative Layout Shift Debugger en PageSpeed Insights laten je precies zien waar verschuivingen plaatsvinden. Je kunt ook Chrome Dev Tools gebruiken en het selectievakje 'Layout Shift Regions' inschakelen, waarbij de verschoven elementen blauw worden gemarkeerd.
Stap 2: Asynchrone CSS uitschakelen of kritieke CSS gebruiken
De meeste cacheplugins hebben een instelling om CSS asynchroon te laden, maar dit kan FOUC veroorzaken en je weblettertype verschuiven. Je kunt CSS-levering uitschakelen in de instellingen van je plugin.
Ontwikkelaars kunnen ook alleen kritische CSS laden door mod_pagespeed uit te schakelen of paginaspecifieke kritische CSS-paden te genereren.
Stap 3: Host vooraf geladen lokale lettertypen
Vooraf geïnstalleerde lettertypen laten geen optimalisatie toe. Vaak duurt het laden van deze webfonts een eeuwigheid en wordt er een reservelettertype gebruikt voordat ze worden gevuld. Host lettertypen daarom altijd lokaal vanaf je website met behulp van tools zoals Transfonter of de OMGF-plug-in om de URL's van de lettertypen rechtstreeks te plakken.
Stap 4: Lettertype toevoegen - Weergave: Wisselen naar lettertypen
Bepaalde weblettertypen worden mogelijk nog steeds langzaam geladen, afhankelijk van hun grootte. Door font-display:swap toe te voegen aan de CSS van uw lettertype, voorkomt u dat uw lay-out verschuift vanwege FOIT.
Om een actieve lettertypeweergave te behouden, installeert u String Locator om te zoeken naar het problematische lettertype en voegt u vervolgens &display=swap toe aan uw code .
Stap 5: Stel het globale lettertype in op Mulish in Oxygen Builder
Als u Oxygen Build gebruikt, kunt u uw CLS-problemen oplossen door uw stylesheet te openen en 'Mulish' in het midden van de tekst toe te voegen, zoals hier: body { font-family: 'Mulish', Arial; }
Stap 6: Geef de afmetingen van afbeeldingen, video's en iframes op
Simply insert width=”000” height=“000” after the image signifier in the code or width=”000” height=“000 >after a video or iframe to ensure your media has enough space.
Stap 7: Gebruik CSS Transform Property voor animaties
Animaties kunnen leiden tot dramatische lay-outverschuivingen, en rekening houden met beeldverhoudingen lost uw probleem mogelijk niet op. Voeg de CSS-eigenschap transform:translate() toe in plaats van width + height.
Stap 8: Laat ruimte over voor advertenties en presenteer ze op de juiste manier
Reserveer ruimte voor advertenties. Anders verplaatsen advertenties andere content op de pagina wanneer ze uiteindelijk worden geladen.
Google advises creators to leave space for the largest size advertisement configured to serve like so:
Stap 9: Installeer een lichtgewicht AVG-plug-in
GDPR Cookie Compliance-software is handig voor websites die aan de CCPA willen voldoen, maar veroorzaakt vaak Cumulative Layout Shift-problemen.
Zware AVG-plug-ins kunnen elementen op elkaar stapelen tijdens het laden. Gebruik daarom een lichte AVG/CCPA-plug-in om dit probleem op te lossen.
Stap 10: Harde code headers en menu's
Je headers en menu's dragen mogelijk bij aan de lay-outverschuiving van je website. Door deze aspecten hard te coderen in CSS, verminder je de problemen met webpagina's. De meeste pagebuilders veroorzaken ook header- en menuverschuivingen, maar Elementor en Divi voegen hard-coded elementen toe voor gebruikers.
Conclusie
Cumulative Layout Shift (CLS) is een van de drie Core Web Vitals die Google heeft ontwikkeld om de gebruikerservaring voor website-eigenaren centraal te stellen. Hoewel CLS en andere essentiële statistieken misschien even wennen zijn, kan CLS de prestaties en de algehele laadtijd van een website verbeteren.
Met behulp van software van derden, zoals Lighthouse en Google's eigen PageSpeed Insights, kunnen gebruikers zien waar CLS-layoutverschuivingen optreden. Tegelijkertijd kan de software gebruikers best practices bieden om hun algehele SEO-score te verbeteren, wat hen zal helpen hoger te scoren.
Gebruikers kunnen lay-outwijzigingen hardcoderen of plug-ins gebruiken om hun CLS-score te verbeteren. Wanneer uw dynamische content statisch blijft, vermindert u de frustratie van gebruikers en verhoogt u de totale omzet.
Nu uw advertenties goed op hun plek staan, kunt u contact opnemen met Publift om te ontdekken hoe u uw advertentie-inkomsten verder kunt verhogen door uw advertentieplaatsing en advertentiepartners te optimaliseren.
Cumulatieve lay-outverschuiving - Veelgestelde vragen
Wat is een verwachte en onverwachte lay-outverschuiving?
Wanneer de lay-out van een pagina verandert als reactie op een verwachte gebeurtenis, zoals gebruikersinvoer, wordt dit een verwachte lay-outverschuiving genoemd. Onverwachte lay-outwijzigingen treden op wanneer verschillende elementen van een pagina op verschillende tijdstippen worden geladen of wanneer de pagina zich niet gedraagt zoals verwacht.
Heeft lazy loading invloed op de cumulatieve lay-outverschuiving?
Ja, lazy loading kan cumulatieve lay-outverschuivingen veroorzaken. Lazy loading, of uitgesteld laden, is het langzamer laden van niet-essentiële elementen van een pagina, zodat de kritieke elementen eerst kunnen laden.
Hoewel dit een goede strategie is om bandbreedte te besparen, kunnen elementen die langzamer laden er toch voor zorgen dat de eerder geladen elementen verschuiven.