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

app/_components/web-vitals.js

'use client'

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

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

export function WebVitals() {
  useReportWebVitals(logWebVitals)

  return null
}

app/layout.js

import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

Comme le hook useReportWebVitals nécessite la directive 'use client', l'approche la plus performante est de créer un composant séparé que le layout racine importe. Cela confine la limite client exclusivement au composant WebVitals.

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.

'use client'

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

type ReportWebVitalsCallback = Parameters<typeof useReportWebVitals>[0]

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

export function WebVitals() {
  useReportWebVitals(handleWebVitals)
}

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