useReportWebVitals

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

pages/_app.js

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

  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 d'entrées Performance 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 la 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 indiquant 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'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // gérer les résultats FCP
      }
      case 'LCP': {
        // gérer les résultats LCP
      }
      // ...
    }
  })

  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 MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    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
    }
  })

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

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

Les Vercel Speed Insights sont automatiquement configurés sur les déploiements Vercel et ne nécessitent pas l'utilisation de useReportWebVitals. Ce hook est utile en développement local ou si vous utilisez un autre service d'analytique.

Envoi des résultats vers des systèmes externes

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

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

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

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 => {
  // Utiliser `window.gtag` si vous avez initialisé Google Analytics comme dans cet exemple :
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
  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