reportWebVitals

1. Web-vitals kütüphanesini kurmak 3.

   npm install web-vitals

   veya

   yarn add web-vitals

   komutlarıyla kütüphane yüklenir 3.

2. reportWebVitals.js

   dosyası oluşturmak 3. React projesinde

   reportWebVitals.js

   adında bir dosya oluşturulur 3.
3. Metrikleri ölçmek 3.

   reportWebVitals.js

   dosyasına aşağıdaki kod eklenir 3:

import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';

function reportWebVitals(onPerfEntry) {
   if (onPerfEntry && typeof onPerfEntry === 'function') {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getLCP(onPerfEntry);
       getFCP(onPerfEntry);
       getTTFB(onPerfEntry);
   }
}

export default reportWebVitals;
Kopyala

4. Web Vitals'ı React'e entegre etmek 3. Web Vitals, ana React dosyasına (

   index.js

   veya

   main.js

   ) entegre edilir 3. Dosya şu şekilde değiştirilir 3:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
   <React.StrictMode>
   <App />
   </React.StrictMode>,
   document.getElementById('root')
);
// Web Vitals'ı ölçmeye başlamak
reportWebVitals(console.log);
Kopyala

reportWebVitals

function sendToAnalytics(metric) {
   // Örnek: Google Analytics'e veri gönderme
   const body = JSON.stringify(metric);
Kopyala