1. web-vitals kütüphanesini yükleme 5. npm veya yarn paket yöneticisi kullanılarak

   npm install web-vitals

   veya

   yarn add web-vitals

   komutlarıyla kütüphane yüklenir 5.
2. Web vitals ölçüm fonksiyonu oluşturma 5. React projesinde

   reportWebVitals.js

   adında bir dosya oluşturulur ve bu dosyada aşağıdaki kod eklenir 5:

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

function reportWebVitals(onPerfEntry) {
   if (onPerfEntry && typeof onPerfEntry === 'function') {
       getCLS(onPerfEntry); // Görsel kararlılığı ölçer
       getFID(onPerfEntry); // Etkileşimi ölçer
       getLCP(onPerfEntry); // Yükleme performansını ölçer
       getFCP(onPerfEntry); // İlk içerik görüntüleme süresini ölçer
       getTTFB(onPerfEntry); // Sunucu yanıt süresini ölçer
   }
}

export default reportWebVitals;
Kopyala

3. Web vitals'ı React uygulamasına entegre etme 5. Web vitals, ana React dosyasına (index.js veya main.js) entegre edilir 5. Dosya şu şekilde değiştirilir 5:

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çümünü başlatma
reportWebVitals(console.log); // Metrikleri konsola kaydeder
Kopyala

reportWebVitals