useReportWebVitals

useReportWebVitals kancası Core Web Vitals raporlamanıza olanak tanır ve analiz hizmetinizle birlikte kullanılabilir.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
 
  return <Component {...pageProps} />
}

useReportWebVitals

Kancanın argümanı olarak aktarılan metric nesnesi bir dizi özellikten oluşur:

id: Geçerli sayfa yüklemesi bağlamında metrik için benzersiz tanımlayıcı
name: Performans metriğinin adı. Olası değerler, bir web uygulamasına özgü Web Vitals ölçümlerinin (TTFB, FCP, LCP, FID, CLS) adlarını içerir.
delta: Metriğin geçerli değeri ile önceki değeri arasındaki fark. Değer genellikle milisaniye cinsindendir ve metriğin değerinin zaman içindeki değişimini temsil eder.
entries: Metrikle ilişkili Performans Girişleri dizisi. Bu girdiler, metrikle ilgili performans olayları hakkında ayrıntılı bilgi sağlar.
navigationType: Metrik toplamayı tetikleyen gezinti türünü belirtir. Olası değerler arasında "navigate", "reload", "back_forward" ve "prerender" bulunur.
rating: Performansın değerlendirilmesini sağlayan, metrik değerin nitel bir derecelendirmesi. Olası değerler "good", "needs-improvement" ve "poor" şeklindedir. Derecelendirme tipik olarak metrik değerin, kabul edilebilir veya optimum altı performansı gösteren önceden tanımlanmış eşiklerle karşılaştırılmasıyla belirlenir.
value: Performans girişinin gerçek değeri veya süresi, tipik olarak milisaniye cinsinden. Değer, metrik tarafından izlenen performans özelliğinin nicel bir ölçümünü sağlar. Değerin kaynağı, ölçülen belirli metriğe bağlıdır ve çeşitli Performans API'lerinden gelebilir s.

Web Vitals

Web Vitals, bir web sayfasının kullanıcı deneyimini yakalamayı amaçlayan bir dizi yararlı metriktir. Aşağıdaki web hayati değerlerinin tümü dahildir:

Bu metriklerin tüm sonuçlarını name özelliğini kullanarak işleyebilirsiniz.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
 
  return <Component {...pageProps} />
}

Custom Metrics

Yukarıda listelenen temel metriklere ek olarak, sayfanın nemlenmesi ve işlenmesi için geçen süreyi ölçen bazı ek özel metrikler de vardır:

Next.js-hydration: Sayfanın nemlendirmeye başlaması ve bitirmesi için geçen süre (ms cinsinden)
Next.js-route-change-to-render: Bir rota değişikliğinden sonra sayfanın oluşturulmaya başlaması için geçen süre (ms cinsinden)
Next.js-render: Rota değişikliğinden sonra bir sayfanın işlenmesinin tamamlanması için geçen süre (ms cinsinden)

Bu metriklerin tüm sonuçlarını ayrı ayrı ele alabilirsiniz:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // handle hydration results
      break
    case 'Next.js-route-change-to-render':
      // handle route-change to render results
      break
    case 'Next.js-render':
      // handle render results
      break
    default:
      break
  }
}

Bu ölçümler Kullanıcı Zamanlama API'sini destekleyen tüm tarayıcılarda çalışır .

Vercel Speed Insights, Vercel dağıtımlarında otomatik olarak yapılandırılır ve useReportWebVitals adresinin kullanılmasını gerektirmez. Bu kanca, yerel geliştirmede veya farklı bir analiz hizmeti kullanıyorsanız kullanışlıdır.

Sending results to external systems

Sitenizdeki gerçek kullanıcı performansını ölçmek ve izlemek için sonuçları herhangi bir uç noktaya gönderebilirsiniz. Örneğin:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
 
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Bilmekte fayda var: Google Analytics kullanıyorsanız,id değerini kullanmak metrik dağılımlarını manuel olarak oluşturmanıza (yüzdelik dilimleri hesaplamak vb.) olanak sağlayabilir.

useReportWebVitals(metric => {
  // Use `window.gtag` if you initialized Google Analytics as this example:
  // 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), // values must be integers
    event_label: metric.id, // id unique to current page load
    non_interaction: true, // avoids affecting bounce rate.
  });
}

Sonuçları Google Analytics'e gönderme hakkında daha fazla bilgi için .

useReportWebVitals