useReportWebVitals

Le hook useReportWebVitals vous permet de rapporter les Core Web Vitals, et peut être utilisé en combinaison avec votre service d'analytique.

Les nouvelles fonctions passées à useReportWebVitals sont appelées avec les métriques disponibles jusqu'à ce point. Pour éviter de rapporter des données dupliquées, assurez-vous que la référence de la fonction callback ne change pas (comme montré dans les exemples de code ci-dessous).

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

const logWebVitals = (metric) => {
  console.log(metric)
}

function MyApp({ Component, pageProps }) {
  useReportWebVitals(logWebVitals)

  return <Component {...pageProps} />
}

L'objet metric passé comme argument du hook contient plusieurs propriétés :

id : Identifiant unique pour la métrique dans le contexte du chargement de page actuel
name : Le nom de la métrique de performance. Les valeurs possibles incluent les noms des métriques Web Vitals (TTFB, FCP, LCP, FID, CLS) spécifiques à une application web.
delta : La différence entre la valeur actuelle et la précédente de la métrique. La valeur est typiquement en millisecondes et représente le changement de valeur de la métrique dans le temps.
entries : Un tableau de Performance Entries associées à la métrique. Ces entrées fournissent des informations détaillées sur les événements de performance liés à la métrique.
navigationType : Indique le type de navigation qui a déclenché la collecte de métrique. Les valeurs possibles incluent "navigate", "reload", "back_forward", et "prerender".
rating : Une évaluation qualitative de la valeur de la métrique, fournissant une appréciation de la performance. Les valeurs possibles sont "good", "needs-improvement", et "poor". L'évaluation est typiquement déterminée en comparant la valeur de la métrique à des seuils prédéfinis qui indiquent une performance acceptable ou sous-optimale.
value : La valeur ou durée réelle de l'entrée de performance, typiquement en millisecondes. La valeur fournit une mesure quantitative de l'aspect de performance suivi par la métrique. La source de la valeur dépend de la métrique spécifique mesurée et peut provenir de diverses API Performance.

Web Vitals

Les Web Vitals sont un ensemble de métriques utiles qui visent à capturer l'expérience utilisateur d'une page web. Les web vitals suivants sont tous inclus :

Vous pouvez gérer tous les résultats de ces métriques en utilisant la propriété name.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

const handleWebVitals = (metric) => {
  switch (metric.name) {
    case 'FCP': {
      // gérer les résultats FCP
    }
    case 'LCP': {
      // gérer les résultats LCP
    }
    // ...
  }
}

function MyApp({ Component, pageProps }) {
  useReportWebVitals(handleWebVitals)

  return <Component {...pageProps} />
}

Métriques personnalisées

En plus des métriques principales listées ci-dessus, il existe des métriques personnalisées supplémentaires qui mesurent le temps nécessaire pour que la page s'hydrate et s'affiche :

Next.js-hydration : Durée nécessaire pour que la page commence et termine son hydratation (en ms)
Next.js-route-change-to-render : Durée nécessaire pour qu'une page commence à s'afficher après un changement de route (en ms)
Next.js-render : Durée nécessaire pour qu'une page termine de s'afficher après un changement de route (en ms)

Vous pouvez gérer tous les résultats de ces métriques séparément :

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

function handleCustomMetrics(metrics) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // gérer les résultats d'hydratation
      break
    case 'Next.js-route-change-to-render':
      // gérer les résultats de changement de route vers affichage
      break
    case 'Next.js-render':
      // gérer les résultats d'affichage
      break
    default:
      break
  }
}

function MyApp({ Component, pageProps }) {
  useReportWebVitals(handleCustomMetrics)

  return <Component {...pageProps} />
}

Ces métriques fonctionnent dans tous les navigateurs qui supportent l'API User Timing.

Envoi des résultats à des systèmes externes

Vous pouvez envoyer les résultats à n'importe quel endpoint pour mesurer et suivre la performance des utilisateurs réels sur votre site. Par exemple :

function postWebVitals(metrics) {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

  // Utilisez `navigator.sendBeacon()` si disponible, sinon utilisez `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
}

useReportWebVitals(postWebVitals)

Bon à savoir : Si vous utilisez Google Analytics, utiliser la valeur id peut vous permettre de construire manuellement des distributions de métriques (pour calculer des percentiles, etc.)

useReportWebVitals(metric => {
  // Utilisez `window.gtag` si vous avez initialisé Google Analytics comme dans cet exemple :
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
  window.gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // les valeurs doivent être des entiers
    event_label: metric.id, // id unique au chargement de page actuel
    non_interaction: true, // évite d'affecter le taux de rebond.
  });
}

En savoir plus sur l'envoi des résultats à Google Analytics.

useReportWebVitals