NextJS Core Web Vitals - misurare le Core Web Vitals

Misurare le Core Web Vitals in NextJS

Next.js è un framework JavaScript basato su REACT che ti permette di creare siti web superveloci ed estremamente user-friendly. È vero, Next.js è piuttosto veloce e ha molte funzionalità integrate per garantire che rimanga veloce. Almeno....., in teoria. Col tempo, man mano che il tuo sito web cresce e vengono aggiunte più funzionalità e magari quando non tutte le best-practice vengono seguite, le pagine Next.js diventeranno sempre più lente. Probabilmente è per questo che stai visitando questa pagina :-)

Per misurare e prevenire pagine lente è importante misurare le Core Web Vitals e intervenire quando una metrica delle Core Vitals è al di sotto di una soglia.

Cosa sono le Core Web Vitals?

Le Core Web Vitals sono il sottoinsieme dei Web Vitals che si applicano a tutte le pagine web, dovrebbero essere misurate da tutti i proprietari di siti e saranno visibili in tutti gli strumenti di Google. Ciascuna delle Core Web Vitals rappresenta un aspetto distinto della user experience, è misurabile sul campo e riflette l'esperienza reale di un risultato critico incentrato sull'utente.

Le metriche che compongono le Core Web Vitals evolveranno nel tempo. L'insieme attuale per il 2020 si concentra su tre aspetti della user experience—caricamento, interattività e stabilità visiva—e include le seguenti metriche (e le rispettive soglie):

Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per fornire una buona user experience, LCP dovrebbe verificarsi entro 2,5 secondi dall'inizio del caricamento della pagina.

First Input Delay (FID): misura l'interattività. Per fornire una buona user experience, le pagine dovrebbero avere un FID di 100 millisecondi o meno.

Cumulative Layout Shift (CLS): misura la stabilità visiva. Per fornire una buona user experience, le pagine dovrebbero mantenere un CLS di 0,1 o meno.

Dimentica Lighthouse (più o meno)

Lighthouse è uno strumento di test per le Core Web Vitals. Quasi ogni cliente per cui lavoro, a un certo punto, inizierà a parlare dei propri punteggi Lighthouse e di come non corrispondano ai punteggi della Search Console. La prima cosa che dico loro è questa: dimenticate Lighthouse. Vi spiego:

Lighthouse è uno strumento molto utile che raccoglie 'dati di laboratorio' per una prima visita non in cache in condizioni regolate. Sfortunatamente i dati raccolti non riflettono necessariamente i dati sul campo. I dati sul campo vengono raccolti dal browser ogni volta che un utente carica una delle tue pagine. Quei dati vengono poi inviati a Google e utilizzati per determinare i tuoi punteggi effettivi delle Core Web Vitals. Questo processo è anche chiamato real-user monitoring (RUM).

Ora non fraintendetemi: adoro Lighthouse. È un software magistrale e vi darà ottimi suggerimenti che probabilmente dovreste implementare. Quello che sto dicendo è che le metriche RUM su un sito Next.js non sono semplicemente composte da prime visite senza cache e da visitatori che non interagiscono con il vostro sito web (Lighthouse non interagisce con il vostro sito web!)

No, le Core Web Vitals su un sito web Next.js sono più complicate. Ecco perché una delle prime cose che implemento per i miei clienti è il monitoraggio in tempo reale degli utenti reali.

Configurare il monitoraggio Core Web Vitals in tempo reale degli utenti reali

Raccogliere i dati delle Core Web Vitals in Next.js è semplice poiché Next.js fornisce un metodo integrato per catturare le Core Web Vitals. Tutto quello che devi fare è esportare la funzione reportWebVitals in _app.tsx e il gioco è fatto.

Ora su siti web ad alto traffico avrà poco senso raccogliere tutti i dati da tutti gli utenti. Possiamo facilmente campionare il 50% o meno in questo modo:

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

Ora se per esempio vogliamo inviare le metriche Core Web Vitals ad analytics, tutto quello che dobbiamo fare è:

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.
    })  
  }
}

E altrettanto facilmente possiamo inviare le Core Web Vitals a qualsiasi backend di analytics personalizzato:

  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 })
  }
}

Ora ricorda che quando leggi i dati RUM per le Core Web Vitals devi utilizzare il 75° percentile.

Strumenti di terze parti che raccolgono le Core Web Vitals in Next.js

Ci sono alcuni strumenti di terze parti che raccolgono le Core Web Vitals in Next.js. Ad esempio NewRelic e Sentry. Ora, come esperto di Core Web Vitals, non ne sono un fan. Sentry esegue alcune richieste ad alta priorità nelle prime fasi del processo di rendering e anche NewRelic rallenta considerevolmente il tuo sito. Detto questo, comprendo l'importanza di tali strumenti e se già utilizzi uno di questi strumenti, faranno un ottimo lavoro nel raccogliere e segnalare le Core Web Vitals.s