NextJS Core Web Vitals - Core Web Vitals messen

Messen der Core Web Vitals in NextJS

Next.js ist ein JavaScript-Framework auf Basis von REACT, mit dem Sie superschnelle und extrem benutzerfreundliche Websites erstellen können. Das stimmt, Next.js ist ziemlich schnell und hat viele eingebaute Funktionen, um sicherzustellen, dass es schnell bleibt. Zumindest ....., theoretisch. Im Laufe der Zeit, wenn Ihre Website wächst und mehr Funktionen hinzugefügt werden und vielleicht nicht alle Best Practices befolgt werden, werden Next.js-Seiten langsamer und langsamer. Das ist wahrscheinlich der Grund, warum Sie diese Seite besuchen :-)

Um langsame Seiten zu messen und zu verhindern, ist es wichtig, die Core Web Vitals zu messen und Maßnahmen zu ergreifen, wenn eine Core Vitals Metrik unter einem Schwellenwert liegt.

Was sind die Core Web Vitals?

Die Core Web Vitals sind die Untergruppe von Web Vitals, die für alle Webseiten gelten, von allen Seitenbesitzern gemessen werden sollten und in allen Google-Tools auftauchen werden. Jede der Core Web Vitals repräsentiert eine bestimmte Facette der User Experience, ist im Feld messbar und spiegelt die reale Erfahrung eines kritischen nutzerzentrierten Ergebnisses wider.

Die Metriken, aus denen die Core Web Vitals bestehen, werden sich im Laufe der Zeit weiterentwickeln. Das aktuelle Set für 2020 konzentriert sich auf drei Aspekte der User Experience—Laden, Interaktivität und visuelle Stabilität—und umfasst die folgenden Metriken (und ihre jeweiligen Schwellenwerte):

Largest Contentful Paint (LCP): misst die Ladeleistung. Um eine gute User Experience zu bieten, sollte LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite auftreten.

First Input Delay (FID): misst die Interaktivität. Um eine gute User Experience zu bieten, sollten Seiten eine FID von 100 Millisekunden oder weniger haben.

Cumulative Layout Shift (CLS): misst die visuelle Stabilität. Um eine gute User Experience zu bieten, sollten Seiten einen CLS von 0,1 oder weniger beibehalten.

Vergessen Sie Lighthouse (sozusagen)

Lighthouse ist ein Testtool für die Core Web Vitals. Fast jeder Kunde, für den ich arbeite, fängt irgendwann an, über seine Lighthouse-Scores zu sprechen und wie sie nicht mit seinen Search Console Scores übereinstimmen. Das erste, was ich ihnen sage, ist das: Vergessen Sie Lighthouse. Ich werde es erklären:

Lighthouse ist ein sehr nützliches Tool, das 'Lab-Daten' für einen nicht gecachten Erstbesuch unter regulierten Bedingungen sammelt. Leider spiegeln die gesammelten Daten nicht unbedingt die Felddaten wider. Felddaten werden vom Browser jedes Mal gesammelt, wenn ein Benutzer eine Ihrer Seiten lädt. Diese Daten werden dann an Google gesendet und zur Bestimmung Ihrer tatsächlichen Core Web Vitals Scores verwendet. Dieser Prozess wird auch als Real-User-Monitoring (RUM) bezeichnet.

Verstehen Sie mich nicht falsch: Ich liebe Lighthouse. Es ist ein meisterhaftes Stück Software und es wird Ihnen großartige Vorschläge geben, die Sie wahrscheinlich implementieren sollten. Was ich sage ist, dass die RUM-Metriken auf einer Next.js-Seite nicht nur aus erstmaligen, nicht gecachten Ansichten und von Besuchern bestehen, die nicht mit Ihrer Website interagieren (Lighthouse interagiert nicht mit Ihrer Website!)

Nein, die Core Web Vitals auf einer Next.js-Website sind komplizierter. Deshalb ist eines der ersten Dinge, die ich für meine Kunden implementiere, Real-Time Real User Monitoring.

Richten Sie Core Web Vitals Real-Time Real User Monitoring ein

Das Sammeln der Core Web Vitals Daten in Next.js ist einfach, da Next.js eine integrierte Methode zum Erfassen der Core Web Vitals bietet. Alles, was Sie tun müssen, ist die Funktion reportWebVitals in _app.tsx zu exportieren und Sie sind fertig.

Auf Websites mit hohem Traffic macht es wenig Sinn, alle Daten von allen Benutzern zu sammeln. Wir können einfach 50% oder weniger sampeln wie hier:

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

Wenn wir nun zum Beispiel die Core Web Vitals Metriken an Analytics senden wollen, müssen wir nur Folgendes tun:

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), // Werte müssen Ganzzahlen sein
      event_label: metric.id, // id eindeutig für den aktuellen Seitenaufruf
      non_interaction: true, // vermeidet Beeinflussung der Absprungrate.
    })  
  }
}

Und genauso einfach können wir die Core Web Vitals an jedes benutzerdefinierte Analytics-Backend senden:

  const url = 'https://example.com/custom-analytics'

  // Verwenden Sie `navigator.sendBeacon()` wenn verfügbar, zurückfallend auf `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

Denken Sie jetzt daran, dass Sie beim Lesen der RUM-Daten für die Core Web Vitals das 75. Perzentil verwenden müssen.

Tools von Drittanbietern, die Core Web Vitals in Next.js sammeln

Es gibt einige Tools von Drittanbietern, die Core Web Vitals in Next.js sammeln. Zum Beispiel NewRelic und Sentry. Als Core Web Vitals Typ bin ich kein Fan. Sentry feuert einige Anfragen mit hoher Priorität früh im Rendering-Prozess ab und NewRelic verlangsamt Ihre Seite auch erheblich. Davon abgesehen verstehe ich die Bedeutung solcher Tools und wenn Sie bereits eines dieser Tools verwenden, werden sie gute Arbeit leisten, um die Core Web Vitals zu sammeln und zu berichten.s