React) report Web Vitals

// index.js

<사이트의 성능에 대한 지표들>

• getCLS ( cumulative layout shift )
  : 광고가 많아서 클릭하기 힘들다거나,컨텐츠가 깨졌다거나, 컨텐츠 위치가 움직여서 사용자가 버튼을 클릭하기가 힘들다거나 하는등 불편이 있는지를 측정하는 지표. 잘못된 클릭을 유도하지는 않나(클릭미스율) 확인하는 지표

• getFID ( first input delay )
  : 웹페이지의 반응성에 대한 지표. 링크나 버튼을 클릭하면 이벤트가 시작되는데 시간이 얼마나 걸리는가를 확인하는 지표

• getFCP ( first contentful paint )
  : 브라우저가 화면에 그려지기 시작한 시점까지의 시간을 측정하는 지표( 새로고침후 빈화면에서 컨텐츠가 있는것이 뜨기까지 시간이 얼마나 걸리는가 ). 여기서 content는 텍스트나 이미지 같은 시각적인 요소들을 말한다. <div>가 로드되어도 흰 화면일때는 측정되지 않는다

• getLCP ( largest contentful paint )
  : 웹페이지에서 가장 커다란 덩어리를 로드하는데 걸리는 시간. 여기서 무엇이 커다란것이냐는 중요도로 판단한다. 예를들어 중요도 : p태그 < h1태그

• getTTFB ( time to first byte )
  : 브라우저가 페이지에 들어갈 가장 첫번째 바이트(컨텐츠데이터)를 가지고 오는데 걸리는 시간
  프론트에서 개선할 부분 : 이 페이지 콘텐츠를 서버한테서 반환받는 그 순간까지의 값이나, 얼마나 프론트에서 잘 요청하느냐도 중요. 너무 큰것을 요청해서 한번에 다 가지고 오는게 아니고 잘게 쪼개서 가지고 온다던가 해서 프론트에서도 개선할수있다. SSR 이나 프리렌더링 시에는 반드시 TTFB가 얼마나 걸리나 체크해야함.

지표들을 확인하는 방법

예시로 콘솔에다가 찍어보았다

// index.js 


...

//reportWebVitals(어디에다가 저 지표를 띄워줄건지 적는곳);
reportWebVitals(console.log);

지표기록을 firebase analytics 서비스를 사용해서 보가

(Firebase 자체에 analytics 포함)

import { analytics } from './firebase';

...

function sendToAnalytics(metric) {
  const _report = JSON.stringify(metric);
	//전체를 찍어보기
  analytics.logEvent("web_vital_report", _report);
  //개별의 지표를 찍어보기
  analytics.logEvent('ttfb',getTTFB);
  analytics.logEvent('fcp',getFCP);

  console.log({ _report });
}
reportWebVitals(sendToAnalytics);

firebase - analytics - dashboard 에서 확인할수있다