npm install web-vitals

yarn add web-vitals

reportWebVitals.js

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

function reportWebVitals(onPerfEntry) {
  if (onPerfEntry && typeof onPerfEntry === 'function') {
    getCLS(onPerfEntry); // Görsel istikrarı ölçer
    getFID(onPerfEntry); // Kullanıcı etkileşim hızını ölçer
    getLCP(onPerfEntry); // Yükleme performansını ölçer
    getFCP(onPerfEntry); // İlk içerik görüntüleme zamanını ölçer
    getTTFB(onPerfEntry); // Sunucu yanıt süresini ölçer
  }
}

export default reportWebVitals;
Kopyala

index.js

main.js

reportWebVitals

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')
);

reportWebVitals(console.log); // Metrikleri konsola kaydeder [1](https://blog.ni18.in/web-vitals-in-react/)
Kopyala