Cumulative Layout Shift opzoeken met Chrome Console

Cumulative Layout Shift (CLS) met de Chrome Console

Cumulative Layout Shift (CLS) is een belangrijke gebruikerservaringsmetriek die de stabiliteit van een webpagina beoordeelt door te evalueren hoeveel onverwachte lay-outverschuivingen er optreden tijdens het laden en gebruik van de pagina. Het is een cruciaal onderdeel van de Core Web Vitals, een reeks prestatie-indicatoren die de gebruiksvriendelijkheid van websites beoordelen. In dit artikel zullen we uitleggen hoe je CLS kunt opsporen en meten met behulp van de Chrome Console.

Wat is Cumulative Layout Shift (CLS)?

Voordat we dieper ingaan op het meten van CLS, laten we eerst begrijpen wat het precies is. CLS meet onverwachte visuele verschuivingen op een webpagina terwijl deze wordt geladen en gebruikt. Dit kunnen bijvoorbeeld verschuivingen zijn die optreden wanneer tekst of afbeeldingen plotseling van positie veranderen, wat de gebruikerservaring verstoort. Het is belangrijk om CLS te minimaliseren omdat een hoge CLS-score frustrerend kan zijn voor gebruikers en hen kan ontmoedigen om op de website te blijven.

Het meten van CLS met de Chrome Console

Om Cumulative Layout Shift met de Chrome Console op te sporen en te meten, volg je deze stappen:

Stap 1: Open de Inspector Tools en ga naar het console-tabblad

Start Google Chrome en open de webpagina waarvan je de CLS wilt meten. Klik met de rechtermuisknop ergens op de pagina en selecteer “Inspecteren” om de Inspector Tools te openen. Ga vervolgens naar het tabblad “Console”.

Stap 2: Plak de volgende code in de console

Kopieer en plak de onderstaande code in de Console:

try {
  let cumulativeLayoutShiftScore = 0;
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (!entry.hadRecentInput) {
        cumulativeLayoutShiftScore += entry.value;
      }
    }
  });

  observer.observe({ type: "layout-shift", buffered: true });

  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      observer.takeRecords();
      observer.disconnect();

      console.log(`CLS: ${cumulativeLayoutShiftScore}`);
    }
  });
} catch (e) {
  console.log(`Browser doesn't support this API`);
}

Stap 3: Bekijk de CLS-score in de console

Na het plakken van de code en het drukken op Enter, zal de Chrome Console de CLS-score weergeven zodra de pagina is geladen. De CLS-score wordt getoond in de vorm van een decimaal getal. Hoe lager de CLS-score, hoe beter de pagina in termen van visuele stabiliteit.

Stap 4: Interpreteer de CLS-score

Een CLS-score van 0,1 of lager wordt als uitstekend beschouwd, terwijl een score tussen 0,1 en 0,25 als acceptabel wordt beschouwd. Als de CLS-score hoger is dan 0,25, moet je mogelijk optimalisaties doorvoeren om de visuele stabiliteit van je webpagina te verbeteren.

Cumulative Layout Shift (CLS) is een belangrijk aspect van webprestaties en gebruikerservaring. Door de CLS-score van je webpagina’s te meten met behulp van de Chrome Console, kun je problematische lay-outverschuivingen identificeren en aanpakken om de gebruikerservaring te verbeteren. Het minimaliseren van CLS is een essentiële stap om ervoor te zorgen dat je website soepel en gebruiksvriendelijk is voor je bezoekers.