useReportWebVitals

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

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

useReportWebVitals kancası "use client" yönergesini gerektirdiğinden, en performanslı yaklaşım kök yerleşimin içe aktardığı ayrı bir bileşen oluşturmaktır. Bu, istemci sınırını yalnızca WebVitals bileşeniyle sınırlar.

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.

app/components/web-vitals.tsx

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
}

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

useReportWebVitals

Web Vitals

Usage on Vercel

Sending results to external systems