Met Chrome Console Largest Contentful Paint vinden

Hoe je Largest Contentful Paint (LCP) kunt opsporen met de Chrome Console

Largest Contentful Paint (LCP) is een cruciale metriek voor webprestaties, omdat het de laadtijd meet van het grootste zichtbare element op een webpagina. Door LCP te begrijpen en te optimaliseren, kun je de gebruikerservaring op je website aanzienlijk verbeteren. In dit artikel laten we je zien hoe je LCP kunt opsporen met behulp van de Chrome Console en Inspector Tools van je browser.

Stap 1: Open de Chrome Inspector Tools

Om LCP te vinden, open je eerst de Inspector Tools van je Chrome-browser. Dit kun je doen door met de rechtermuisknop op een willekeurig element op de pagina te klikken en “Inspecteren” te selecteren. Je kunt ook gebruikmaken van de sneltoetsen Ctrl + Shift + I (Windows/Linux) of Cmd + Option + I (Mac).

Stap 2: Navigeer naar de Console Tab

In de Inspector Tools van Chrome kun je verschillende tabbladen vinden, waaronder “Console”. Klik op dit tabblad om de console te openen waar je JavaScript-code kunt uitvoeren en de LCP-metriek kunt bekijken.

Stap 3: Plak de Code

Nu je de Console Tab hebt geopend, kun je de onderstaande JavaScript-code plakken:

/**
 * PerformanceObserver
 */
const po = new PerformanceObserver((list) => {
  let entries = list.getEntries();

  entries = dedupe(entries, "startTime");

  /**
   * Print all entries of LCP
   */
  entries.forEach((item, i) => {
    console.dir(item);
    console.log(
      `${i + 1} current LCP item : ${item.element}: ${item.startTime}`
    );
    /**
     * Highlight LCP elements on the page
     */
    item.element ? (item.element.style = "border: 5px dotted blue;") : "";
  });

  /**
   * LCP is the lastEntry in getEntries Array
   */
  const lastEntry = entries[entries.length - 1];
  /**
   * Print final LCP
   */
  console.log(`LCP is: ${lastEntry.startTime}`);
});

/**
 * Start observing for largest-contentful-paint
 * buffered true getEntries prior to this script execution
 */
po.observe({ type: "largest-contentful-paint", buffered: true });

function dedupe(arr, key) {
  return [...new Map(arr.map((item) => [item[key], item])).values()];
}

Stap 4: Bekijk het Resultaat

Na het plakken van de code zal de Chrome Console beginnen met het verzamelen van informatie over LCP op de huidige webpagina. Dit wordt weergegeven met een blauwe stippellijn op de pagina. In de console kun je de details van de LCP-metingen zien, inclusief het element en de starttijd van elk item. Het laatste item in de lijst is de uiteindelijke LCP-meting.

Dit is een krachtige manier om de LCP van je webpagina te monitoren en te begrijpen. Je kunt de blauwe stippellijn op de pagina gebruiken om het specifieke element te identificeren dat verantwoordelijk is voor de LCP en optimalisaties doorvoeren om de laadtijd te verbeteren.

Met deze stappen kun je LCP eenvoudig opsporen en de prestaties van je website optimaliseren om een snellere en betere gebruikerservaring te bieden. Vergeet niet dat het begrijpen van andere prestatiegerelateerde metingen, zoals First Contentful Paint (FCP) en Cumulative Layout Shift (CLS), ook belangrijk is voor het optimaliseren van je website.