NextJS Core Web Vitals - mesurer les Core Web Vitals

Mesurer les Core Web Vitals dans NextJS

Next.js est un framework JavaScript au-dessus de REACT qui vous permet de créer des sites web ultra-rapides et extrêmement conviviaux. C'est vrai, Next.js est assez rapide et possède de nombreuses fonctionnalités intégrées pour garantir qu'il le reste. Du moins..., en théorie. Au fil du temps, à mesure que votre site web se développe et que de nouvelles fonctionnalités sont ajoutées, et peut-être lorsque toutes les meilleures pratiques ne sont pas suivies, les pages Next.js deviendront de plus en plus lentes. C'est probablement la raison pour laquelle vous visitez cette page :-)

Pour mesurer et prévenir les pages lentes, il est important de mesurer les Core Web Vitals et d'agir lorsqu'une métrique Core Vitals est inférieure à un seuil.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont le sous-ensemble des Web Vitals qui s'appliquent à toutes les pages web, doivent être mesurés par tous les propriétaires de sites et seront affichés dans tous les outils Google. Chacun des Core Web Vitals représente une facette distincte de l'user experience, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat critique centré sur l'utilisateur.

Les métriques qui composent les Core Web Vitals évolueront avec le temps. L'ensemble actuel pour 2020 se concentre sur trois aspects de l'user experience — le chargement, l'interactivité et la stabilité visuelle — et inclut les métriques suivantes (et leurs seuils respectifs) :

Largest Contentful Paint (LCP) : mesure la performance de chargement. Pour offrir une bonne user experience, le LCP doit se produire dans les 2,5 secondes suivant le début du chargement de la page.

First Input Delay (FID) : mesure l'interactivité. Pour offrir une bonne user experience, les pages doivent avoir un FID de 100 millisecondes ou moins.

Cumulative Layout Shift (CLS) : mesure la stabilité visuelle. Pour offrir une bonne user experience, les pages doivent maintenir un CLS de 0,1 ou moins.

Oubliez lighthouse (en quelque sorte)

Lighthouse est un outil de test pour les Core Web Vitals. Presque tous les clients pour lesquels je travaille commencent, à un moment donné, à parler de leurs scores lighthouse et de la façon dont ils ne correspondent pas à leurs scores Search Console. La première chose que je leur dis est la suivante : oubliez lighthouse. Je vais expliquer :

Lighthouse est un outil très utile qui recueille des 'données de laboratoire' pour une première visite non mise en cache dans des conditions réglementées. Malheureusement, les données recueillies ne reflètent pas nécessairement les données de terrain. Les données de terrain sont collectées par le navigateur chaque fois qu'un utilisateur charge l'une de vos pages. Ces données sont ensuite envoyées à Google et utilisées pour déterminer vos scores Core Web Vitals réels. Ce processus est également appelé real-user monitoring (RUM).

Ne vous méprenez pas : j'adore lighthouse. C'est un logiciel magistral et il vous donnera d'excellentes suggestions que vous devriez probablement mettre en œuvre. Ce que je dis, c'est que les métriques RUM sur un site Next.js ne sont pas simplement constituées de vues initiales non mises en cache et de visiteurs qui n'interagissent pas avec votre site web (lighthouse n'interagit pas avec votre site web !)

Non, les Core Web Vitals sur un site web Next.js sont plus complexes. C'est pourquoi l'une des premières choses que je mets en œuvre pour mes clients est le real-user monitoring en temps réel.

Configurer le real-user monitoring Core Web Vitals en temps réel

La collecte des données Core Web Vitals dans Next.js est simple car Next.js fournit une méthode intégrée pour capturer les Core Web Vitals. Tout ce que vous avez à faire est d'exporter la fonction reportWebVitals dans _app.tsx et vous avez terminé.

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    console.log(metric); 
     // The metric object ({ id, name, startTime, value, label }) is logged to the console
  }
}

Maintenant, sur les sites web à fort trafic, il n'aura guère de sens à collecter toutes les données de tous les utilisateurs. Nous pouvons facilement échantillonner 50 % ou moins comme ceci :

const bInSample: boolean =  (Math.random() >= 0.5);

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

Maintenant, si nous voulons par exemple envoyer les métriques Core Web Vitals aux analytics, tout ce que nous avons à faire est :

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

Et tout aussi facilement, nous pouvons envoyer les Core Web Vitals à n'importe quel backend analytics personnalisé :

export function reportWebVitals(metric: NextWebVitalsMetric) {
  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 })
  }
}

Rappelez-vous maintenant que lors de la lecture des données RUM pour les Core Web Vitals, vous devez utiliser le 75ème centile.

Outils tiers qui collectent les Core Web Vitals dans Next.js

Il existe quelques outils tiers qui collectent les Core Web Vitals dans Next.js. Par exemple NewRelic et sentry. En tant que gars des Core Web Vitals, je ne suis pas fan. Sentry déclenche une requête prioritaire tôt dans le processus de rendu et NewRelic ralentit également considérablement votre site. Cela dit, je comprends l'importance de tels outils et si vous utilisez déjà l'un de ces outils, ils feront un excellent travail de collecte et de reporting des Core Web Vitals.s