useReportWebVitals

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

app/_components/web-vitals.js

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

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 consiste à 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 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.

'use client'

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

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

'use client'

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

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

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