Next.js에서 WebVitals 및 성능 측정하기

 

웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 웹페이지 품질 신호에 관한 통합 가이드를 제공하기 위한 Google 이니셔티브이다.

현재는 아래 3가지를 중요 평가 지표로 사용한다.

출처 : Web vitals

 

이를 next.js의 useReportWebVitals 훅을 사용하면 콘솔에서 우리 웹의 WebVitals를 측정할 수 있다. 

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
 
  return <Component {...pageProps} />
}

공식 문서의 사용법은 위와 같고,  내 프로젝트에 적용한 모습은 아래와 같다.

export default function App({
  Component,
  pageProps: { dehydratedState, session, ...pageProps },
}: AppProps) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

 

이후 웹 페이지에 접속하면, 아래와 같이 주석에서 확인할 수 있다.

그리고 rating을 통해서 good을 얻으면 괜찮다는 것이다.

 

해당 훅에서는 아래 타입에서 확인할 수 있듯이  FCP, LCP ,CLS, FID, TTFB ,INP를 지원한다.

1. FCP (First Contentful Paint):
   • 첫 번째 콘텐츠가 화면에 그려지기 시작하는 시점
   • 사용자가 페이지를 로드했을 때 실제로 눈에 보이는 첫 번째 콘텐츠가 얼마나 빨리 표시되는지를 측정
2. LCP (Largest Contentful Paint):
   • 페이지에서 가장 큰 콘텐츠 요소가 화면에 완전히 그려지는 시점
   • 사용자가 페이지에서 가장 중요한 콘텐츠를 볼 수 있는 시간을 측정하여 페이지의 시각적 로딩 성능을 평가
3. CLS (Cumulative Layout Shift):
   • 페이지의 레이아웃이 얼마나 불안정한지를 측정. (랜더링 도중에 화면이 얼마나 밀리는 지)
   • 사용자가 페이지를 로드할 때 콘텐츠의 위치가 얼마나 자주 변경되는지를 측정하여 불안정한 레이아웃을 감지
4. FID (First Input Delay):
   • 사용자가 페이지와 상호작용하려고 할 때 브라우저가 해당 입력에 대해 얼마나 빨리 반응하는지
   • 페이지가 사용자의 입력에 얼마나 빠르게 반응하는지를 측정하여 사용자 경험을 평가
5. TTFB (Time to First Byte):
   • 사용자가 페이지를 요청한 후 서버가 첫 번째 바이트를 응답하는 데 걸리는 시간
   • 서버 응답 시간을 측정하여 웹 페이지의 초기 로딩 성능을 평가
6. INP (Input Timing):
   • 사용자 상호작용에 대한 성능을 나타내는 지표
   • 사용자가 페이지와 상호작용하고 실제로 응답이 일어나는 시점을 측정하여 사용자 경험을 평가

export type NextWebVitalsMetric = {
  id: string
  startTime: number
  value: number
} & (
  | {
      label: 'web-vital'
      name: 'FCP' | 'LCP' | 'CLS' | 'FID' | 'TTFB' | 'INP'
    }
  | {
      label: 'custom'
      name:
        | 'Next.js-hydration'
        | 'Next.js-route-change-to-render'
        | 'Next.js-render'
    }
)

 https://github.com/vercel/next.js/blob/442378d21dd56d6e769863eb8c2cb521a463a2e0/packages/next/shared/lib/utils.ts#L43

 

 

웹성능은  LightHouse를 통해서도 측정할 수 있다. 

LIghtHouse에서는 FID 대신 TBT를 측정한다.

TBT는 사용자와 페이지가 상호작용한 경우 해당 요청을 처리하는 시간을 의미하는데,  상호작용에 대한 응답이 50ms가 넘어가면, 그때부턴 사용자의 다음 상호작용을 차단하는 긴 작업으로 인지한다

 

 

 

 

https://nextjs.org/docs/pages/api-reference/functions/use-report-web-vitals

 

Functions: useReportWebVitals | Next.js

https://web.dev/articles/vitals?hl=ko

Web Vitals  |  Articles  |  web.dev

https://web.dev/articles/tbt?hl=ko

총 차단 시간 (TBT)  |  Articles  |  web.dev