NextJS Core Web Vitals - mät Core Web Vitals

Mät Core Web Vitals i NextJS

Next.js är ett JavaScript-ramverk ovanpå REACT som gör det möjligt att bygga supersnabba och extremt användarvänliga webbplatser. Det stämmer, Next.js är ganska snabbt och har många inbyggda funktioner för att säkerställa att det förblir snabbt. Åtminstone ....., i teorin. Med tiden, när din webbplats växer och fler funktioner läggs till och kanske när inte alla best-practices följs kommer Next.js-sidor att bli långsammare och långsammare. Det är förmodligen därför du besöker den här sidan :-)

För att mäta och förhindra långsamma sidor är det viktigt att mäta Core Web Vitals och vidta åtgärder när en Core Vitals-metrik är under ett tröskelvärde.

Vad är Core Web Vitals?

Core Web Vitals är den delmängd av Web Vitals som gäller för alla webbsidor, bör mätas av alla webbplatsägare och kommer att visas i alla Google-verktyg. Var och en av Core Web Vitals representerar en distinkt aspekt av användarupplevelsen, är mätbar i fält och återspeglar den verkliga upplevelsen av ett kritiskt användarcentrerat resultat.

Mätvärdena som utgör Core Web Vitals kommer att utvecklas över tiden. Den nuvarande uppsättningen för 2020 fokuserar på tre aspekter av användarupplevelsen—laddning, interaktivitet och visuell stabilitet—och inkluderar följande mätvärden (och deras respektive tröskelvärden):

Largest Contentful Paint (LCP): mäter laddningsprestanda. För att ge en bra användarupplevelse bör LCP inträffa inom 2,5 sekunder från när sidan först börjar laddas.

First Input Delay (FID): mäter interaktivitet. För att ge en bra användarupplevelse bör sidor ha en FID på 100 millisekunder eller mindre.

Cumulative Layout Shift (CLS): mäter visuell stabilitet. För att ge en bra användarupplevelse bör sidor upprätthålla en CLS på 0,1 eller mindre.

Glöm lighthouse (typ)

Lighthouse är ett testverktyg för Core Web Vitals. Nästan varje klient jag arbetar för kommer, vid något tillfälle, börja prata om sina lighthouse-poäng och hur de inte stämmer överens med deras Search Console-poäng. Det första jag säger till dem är detta: glöm lighthouse. Jag ska förklara:

Lighthouse är ett mycket användbart verktyg som samlar 'labbdata' för ett icke-cachat första besök under reglerade förhållanden. Tyvärr återspeglar den insamlade datan inte nödvändigtvis fältdatan. Fältdata samlas in av webbläsaren varje gång en användare laddar en av dina sidor. Den datan skickas sedan till Google och används för att bestämma dina faktiska Core Web Vitals-poäng. Denna process kallas också real-user monitoring (RUM).

Missförstå mig inte: jag älskar lighthouse. Det är en mästerlig programvara och den kommer att ge dig bra förslag som du förmodligen borde implementera. Det jag säger är att RUM-mätvärdena på en Next.js-webbplats inte bara är uppbyggda av första gången, ocachade visningar och av besökare som inte interagerar med din webbplats (lighthouse interagerar inte med din webbplats!)

Nej, Core Web Vitals på en Next.js-webbplats är mer komplicerade. Det är därför en av de första sakerna jag implementerar för mina klienter är real-time real user monitoring.

Konfigurera Core Web Vitals Real-time real user monitoring

Att samla in Core Web Vitals-data i Next.js är enkelt eftersom Next.js tillhandahåller en inbyggd metod för att fånga Core Web Vitals. Allt du behöver göra är att exportera funktionen reportWebVitals i _app.tsx så är du klar.

Nu på webbplatser med hög trafik kommer det att vara meningslöst att samla in all data från alla användare. Vi kan enkelt sampla 50% eller mindre så här:

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

Nu om vi till exempel vill skicka Core Web Vitals-mätvärdena till analytics är allt vi behöver göra:

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), // values must be integers
      event_label: metric.id, // id unique to current page load
      non_interaction: true, // avoids affecting bounce rate.
    })  
  }
}

Och lika enkelt kan vi skicka Core Web Vitals till vilken anpassad analytics-backend som helst:

  const url = 'https://example.com/custom-analytics'

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

Kom nu ihåg att när du läser RUM-datan för Core Web Vitals måste du använda den 75:e percentilen.

Tredjepartsverktyg som samlar in Core Web Vitals i Next.js

Det finns några tredjepartsverktyg som samlar in Core Web Vitals i Next.js. Till exempel NewRelic och sentry. Nu som en Core Web Vitals-kille är jag inte ett fan. Sentry avfyrar några förfrågningar med hög prioritet tidigt i renderingsprocessen och NewRelic saktar också ner din webbplats avsevärt. Med detta sagt förstår jag vikten av sådana verktyg och om du redan använder ett av dessa verktyg kommer de att göra ett bra jobb med att samla in och rapportera Core Web Vitals.s