Largest Contentful Paint (LCP) opzoeken met de Chrome Console

Largest Contentful Paint (LCP) is een belangrijke 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).

Inspecteren Chrome

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.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.