NextJS Core Web Vitals - meet de Core Web Vitals

Meet de Core Web Vitals in NextJS

Next.js is een JavaScript-framework bovenop REACT waarmee je supersnelle en uiterst gebruiksvriendelijke websites kunt bouwen. Dat is waar, Next.js is behoorlijk snel en heeft veel ingebouwde functies om ervoor te zorgen dat het snel blijft. Althans ....., in theorie. Na verloop van tijd, naarmate je website groeit en er meer functies worden toegevoegd en misschien wanneer niet alle best-practices worden gevolgd, zullen Next.js-pagina's langzamer en langzamer worden. Dat is waarschijnlijk de reden waarom je deze pagina bezoekt :-)

Om trage pagina's te meten en te voorkomen, is het belangrijk om de Core Web Vitals te meten en actie te ondernemen wanneer een Core Vitals metric onder een drempelwaarde ligt.

Wat zijn de Core Web Vitals?

De Core Web Vitals zijn de subset van Web Vitals die van toepassing zijn op alle webpagina's, door alle site-eigenaren moeten worden gemeten en in alle Google-tools naar de oppervlakte zullen komen. Elk van de Core Web Vitals vertegenwoordigt een onderscheidend facet van de user experience, is meetbaar in het veld en weerspiegelt de echte wereldervaring van een kritieke gebruikersgerichte uitkomst.

De meetwaarden die de Core Web Vitals vormen, zullen in de loop van de tijd evolueren. De huidige set voor 2020 richt zich op drie aspecten van de user experience—laden, interactiviteit en visuele stabiliteit—en omvat de volgende meetwaarden (en hun respectievelijke drempelwaarden):

Largest Contentful Paint (LCP): meet laadprestaties. Om een goede user experience te bieden, moet LCP optreden binnen 2,5 seconden nadat de pagina voor het eerst begint te laden.

First Input Delay (FID): meet interactiviteit. Om een goede user experience te bieden, moeten pagina's een FID van 100 milliseconden of minder hebben.

Cumulative Layout Shift (CLS): meet visuele stabiliteit. Om een goede user experience te bieden, moeten pagina's een CLS van 0,1 of minder behouden.

Vergeet Lighthouse (soort van)

Lighthouse is een testtool voor de Core Web Vitals. Bijna elke klant voor wie ik werk, begint op een gegeven moment te praten over hun Lighthouse-scores en hoe ze niet overeenkomen met hun Search Console-scores. Het eerste wat ik ze vertel is dit: vergeet Lighthouse. Ik zal het uitleggen:

Lighthouse is een zeer nuttige tool die 'lab-data' verzamelt voor een niet-gecacht eerste bezoek onder gereguleerde omstandigheden. Helaas weerspiegelt de verzamelde data niet noodzakelijkerwijs de velddata. Velddata wordt door de browser verzameld elke keer dat een gebruiker een van je pagina's laadt. Die data wordt vervolgens naar Google gestuurd en gebruikt om je werkelijke Core Web Vitals scores te bepalen. Dit proces wordt ook wel real-user monitoring (RUM) genoemd.

Begrijp me nu niet verkeerd: ik hou van Lighthouse. Het is een meesterlijk stuk software en het zal je geweldige suggesties geven die je waarschijnlijk zou moeten implementeren. Wat ik zeg is dat de RUM-statistieken op een Next.js-site niet alleen bestaan uit eerste keer, niet-gecachte weergaven en van bezoekers die geen interactie hebben met je website (Lighthouse heeft geen interactie met je website!)

Nee, de Core Web Vitals op een Next.js-website zijn ingewikkelder. Daarom is een van de eerste dingen die ik voor mijn klanten implementeer real-time real user monitoring.

Stel Core Web Vitals Real-time real user monitoring in

Het verzamelen van de Core Web Vitals data in Next.js is eenvoudig, aangezien Next.js een ingebouwde methode biedt voor het vastleggen van de Core Web Vitals. Het enige dat je hoeft te doen, is de functie reportWebVitals exporteren in _app.tsx en je bent klaar.

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    console.log(metric); 
     // Het metric object ({ id, name, startTime, value, label }) wordt gelogd naar de console
  }
}

Op websites met veel verkeer heeft het weinig zin om alle data van alle gebruikers te verzamelen. We kunnen eenvoudig 50% of minder samplen zoals dit:

const bInSample: boolean =  (Math.random() >= 0.5);

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital' && bInSample) {
  	console.log(metric)
  }
}

Als we nu bijvoorbeeld de Core Web Vitals statistieken naar analytics willen sturen, is alles wat we hoeven te doen:

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    window.gtag('event', name, {
      event_category: 'web-vital',
      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // waarden moeten integers zijn
      event_label: metric.id, // id uniek voor huidige paginalading
      non_interaction: true, // voorkomt beïnvloeding van bounce rate.
    })  
  }
}

En net zo gemakkelijk kunnen we de Core Web Vitals naar elke aangepaste analytics backend sturen:

export function reportWebVitals(metric: NextWebVitalsMetric) {
  const url = 'https://example.com/custom-analytics'

  // Gebruik `navigator.sendBeacon()` indien beschikbaar, terugvallend op `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

Onthoud nu dat je bij het lezen van de RUM-data voor de Core Web Vitals het 75e percentiel moet gebruiken.

Tools van derden die Core Web Vitals verzamelen in Next.js

Er zijn een paar tools van derden die Core Web Vitals verzamelen in Next.js. Bijvoorbeeld NewRelic en Sentry. Als Core Web Vitals jongen ben ik geen fan. Sentry vuurt enkele verzoeken met hoge prioriteit af vroeg in het renderingproces en NewRelic vertraagt je site ook aanzienlijk. Dat gezegd hebbende, begrijp ik het belang van dergelijke tools en als je al een van deze tools gebruikt, zullen ze prima werk leveren bij het verzamelen en rapporteren van de Core Web Vitals.s