Cumulatieve lay-outverschuiving (CLS)

Geschreven door: avatar van de auteur Komal Bothra
avatar van de auteur Komal Bothra
Hé, ik ben Komal. Ik schrijf inhoud die vanuit het hart spreekt en WordPress voor u laat werken. Laten we uw ideeën tot leven brengen!
CLS-05-geschaald-1

De CLS-methode wordt gebruikt om de mate te meten waarin de inhoud op de webpagina verschuift of beweegt gedurende de gehele levenscyclus van de paginaweergavecyclus, of, met andere woorden, om te meten hoe stabiel het visuele uiterlijk van de website is.

Er zijn waarschijnlijk vele malen in uw leven geweest dat u met eigen ogen hebt gezien hoe frustrerend het is om op een item in een menu te kunnen klikken en per ongeluk op een advertentie te klikken, die u vervolgens naar een website van een derde partij brengt. en hoe frustrerend het is als de inhoud op de webpagina midden in een interactie verandert. Uiteraard zijn de indelingsverschuivingen ook vervelend voor de gebruikers. Ze kunnen echter ook grotere problemen veroorzaken voor webuitgevers, waaronder hoge bouncepercentages en schendingen van hun advertentiebeleid als gevolg van onbedoelde klikken als gevolg van lay-outverschuivingen.

Omdat Google CLS als een van de drie ' Core Web Vitals ' beschouwt, kan een lage CLS-score bovendien een negatieve invloed hebben op de algehele score voor de kernwebvitalen, waardoor de gebruiker een onvoldoende krijgt. Als onderdeel van recente wijzigingen in het zoekalgoritme van Google worden sites die een voldoende score krijgen op de kernbeoordeling van webvitaliteit gunstiger gerangschikt in de zoekresultaten.

Er is een directe correlatie tussen het verbeteren van de CLS-score, het verbeteren van de algehele gebruikerservaring, het mogelijk verbeteren van de Google-ranglijst en het vergroten van het organische verkeer op Google.

Hoe wordt de cumulatieve lay-outverschuiving gemeten?

Wanneer een element dat zichtbaar is in de viewport om welke reden dan ook zijn startpositie verschuift, wordt die verschuiving geregistreerd. Daarom zou het als onstabiel worden beschouwd als het zijn startpositie zou wijzigen. Het is belangrijk op te merken dat het alleen mogelijk is om een ​​lay-outverschuiving te maken als een zichtbaar element naar een andere plaats op de pagina wordt verplaatst omdat er iets op die pagina gebeurt, en niet als een nieuw element of een bestaand element groter of kleiner wordt.

Een CLS-score bestaat uit twee specifieke metingen die zijn ontworpen om lay-outverschuivingen bij te houden: impactfracties en afstandsfracties. Deze twee maten worden gebruikt om de CLS-score te bepalen. De impactfractie meet hoe onstabiele elementen de zichtvenster tussen twee frames beïnvloeden door het originele element en de verschuiving te combineren als een verhouding die kan worden vergeleken met het totale zichtbare gebied van het zichtvenster tussen de twee frames. In het geval van een onstabiel element dat horizontaal of verticaal beweegt, vertegenwoordigt de afstandsfractie de afstand die dat element rond de viewport heeft verplaatst (horizontaal of verticaal).

Hoe kunt u uw CLS-score verbeteren?

Om onstabiele elementen/schakelgedrag te verminderen, volgen hier enkele aanbevelingen:

  • Afhankelijk van de structuur van uw site kunnen verschillende webpagina's andere CLS-scores ontvangen. CLS-scores voor artikelpagina's kunnen bijvoorbeeld hoger zijn dan die voor de homepage. Daarom is de eerste stap het meten van de CLS-scores van alle primaire paginasjablonen van uw site.
  • Afbeeldingen en video's moeten altijd de kenmerken breedte en hoogte hebben. Maak responsieve afbeeldingen met gedefinieerde beeldverhoudingen.
  • Als alternatief kunnen CSS-beeldverhoudingvakken worden gebruikt om de benodigde ruimte voor de elementen te reserveren. Tijdens het laadproces zorgt dit ervoor dat de browser de juiste hoeveelheid ruimte in het document toewijst.
  • De advertentieweergave kan aanzienlijk bijdragen aan de lay-outverschuiving als plaatsingen niet op de juiste manier worden geoptimaliseerd.
  • Plaats geen dynamische inhoud boven reeds geladen inhoud, behalve als reactie op gebruikersinteracties, in welk geval de lay-out zal veranderen.

Versnel de WordPress-prestaties met onze site-optimalisatiediensten !

Gerelateerde berichten

Paginagewicht

Wat is paginagewicht?

Paginagewicht is de totale bestandsgrootte van een webpagina. Dit omvat alle

Wat-is-echte-browsermonitoring

Wat is Real Browser Monitoring?

Om real-browser monitoring te begrijpen, is het essentieel om te begrijpen wat een browser is. Een browser

Wat-is-serverresponstijd-

Wat is serverresponstijd?

Wanneer gebruikers een website bezoeken, stuurt hun browser een verzoek naar de server van de website. De

Ga aan de slag met Seahawk

Meld u aan in onze app om onze prijzen te bekijken en kortingen te krijgen.