NextJS Core Web Vitals - pomiar Core Web Vitals

Pomiar Core Web Vitals w NextJS

Next.js to framework JavaScript oparty na REACT, który umożliwia tworzenie superszybkich i niezwykle przyjaznych dla użytkownika stron internetowych. To prawda, Next.js jest dość szybki i ma wiele wbudowanych funkcji zapewniających, że taki pozostanie. Przynajmniej....., w teorii. Z czasem, gdy Twoja strona rośnie, dodawane są kolejne funkcje i być może nie wszystkie najlepsze praktyki są przestrzegane, strony Next.js będą coraz wolniejsze. Prawdopodobnie dlatego odwiedzasz tę stronę :-)

Aby mierzyć i zapobiegać wolnym stronom, ważne jest mierzenie Core Web Vitals i podejmowanie działań, gdy metryka Core Vitals spada poniżej progu.

Czym są Core Web Vitals?

Core Web Vitals to podzbiór Web Vitals, który dotyczy wszystkich stron internetowych, powinien być mierzony przez wszystkich właścicieli witryn i będzie widoczny we wszystkich narzędziach Google. Każdy z Core Web Vitals reprezentuje odrębny aspekt user experience, jest mierzalny w terenie i odzwierciedla rzeczywiste doświadczenie krytycznego wyniku zorientowanego na użytkownika.

Metryki składające się na Core Web Vitals będą ewoluować z czasem. Obecny zestaw na rok 2020 koncentruje się na trzech aspektach user experience — ładowaniu, interaktywności i stabilności wizualnej — i obejmuje następujące metryki (oraz ich odpowiednie progi):

Largest Contentful Paint (LCP): mierzy wydajność ładowania. Aby zapewnić dobre user experience, LCP powinno wystąpić w ciągu 2,5 sekundy od momentu rozpoczęcia ładowania strony.

First Input Delay (FID): mierzy interaktywność. Aby zapewnić dobre user experience, strony powinny mieć FID wynoszący 100 milisekund lub mniej.

Cumulative Layout Shift (CLS): mierzy stabilność wizualną. Aby zapewnić dobre user experience, strony powinny utrzymywać CLS na poziomie 0,1 lub mniej.

Zapomnij o Lighthouse (poniekąd)

Lighthouse to narzędzie testowe dla Core Web Vitals. Prawie każdy klient, z którym pracuję, w pewnym momencie zaczyna mówić o swoich wynikach Lighthouse i o tym, jak nie zgadzają się z wynikami w Search Console. Pierwszą rzeczą, którą im mówię, jest: zapomnijcie o Lighthouse. Wyjaśnię:

Lighthouse to bardzo przydatne narzędzie, które zbiera 'dane laboratoryjne z pierwszej, niezapisanej w pamięci podręcznej wizyty w kontrolowanych warunkach. Niestety zebrane dane niekoniecznie odzwierciedlają dane terenowe. Dane terenowe są zbierane przez przeglądarkę za każdym razem, gdy użytkownik ładuje jedną z Twoich stron. Te dane są następnie wysyłane do Google i wykorzystywane do określania Twoich rzeczywistych wyników Core Web Vitals. Proces ten nazywany jest również real-user monitoring (RUM).

Nie zrozumcie mnie źle: uwielbiam Lighthouse. To mistrzowskie oprogramowanie, które da Wam świetne sugestie, które prawdopodobnie powinniście wdrożyć. Chcę powiedzieć, że metryki RUM na stronie Next.js nie składają się jedynie z pierwszych, niezapisanych w pamięci podręcznej wyświetleń i odwiedzających, którzy nie wchodzą w interakcję z Waszą stroną (Lighthouse nie wchodzi w interakcję z Waszą stroną!)

Nie, Core Web Vitals na stronie Next.js są bardziej skomplikowane. Dlatego jedną z pierwszych rzeczy, które wdrażam dla moich klientów, jest real-user monitoring w czasie rzeczywistym.

Konfiguracja real-user monitoring Core Web Vitals w czasie rzeczywistym

Zbieranie danych Core Web Vitals w Next.js jest proste, ponieważ Next.js zapewnia wbudowaną metodę przechwytywania Core Web Vitals. Wystarczy wyeksportować funkcję reportWebVitals w _app.tsx i gotowe.

Na stronach o dużym ruchu nie ma sensu zbierać wszystkich danych od wszystkich użytkowników. Możemy łatwo próbkować 50% lub mniej w ten sposób:

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

Jeśli na przykład chcemy wysłać metryki Core Web Vitals do analityki, wystarczy:

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

I równie łatwo możemy wysłać Core Web Vitals do dowolnego niestandardowego backendu analitycznego:

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

Pamiętaj, że podczas odczytywania danych RUM dla Core Web Vitals musisz użyć 75. percentyla.

Narzędzia zewnętrzne zbierające Core Web Vitals w Next.js

Istnieje kilka narzędzi zewnętrznych, które zbierają Core Web Vitals w Next.js. Na przykład NewRelic i Sentry. Jako specjalista od Core Web Vitals nie jestem ich fanem. Sentry wysyła żądania o wysokim priorytecie na wczesnym etapie procesu renderowania, a NewRelic również znacząco spowalnia Twoją stronę. Niemniej rozumiem znaczenie takich narzędzi i jeśli już używasz jednego z nich, świetnie poradzi sobie ze zbieraniem i raportowaniem Core Web Vitals.s