애널리틱스
Next.js 속도 인사이트를 사용하면 다양한 메트릭을 사용하여 페이지의 성능을 분석하고 측정할 수 있습니다.
vercel 배포에서 아무런 구성 없이 실제 경험 점수 수집을 시작할 수 있습니다.
이 문서의 나머지 부분에서는 Next.js 속도 인사이트에서 사용하는 기본 제공 릴레이에 대해 설명합니다.
웹 바이탈
웹 바이탈은 웹 페이지의 사용자 경험을 파악하기 위한 유용한 지표 세트입니다. 다음과 같은 웹 바이탈이 모두 포함되어 있습니다:
- 첫 바이트에 도달하는 시간(TTFB)
- 첫 번째 콘텐츠 페인트(FCP)
- 최대 콘텐츠 페인트(LCP)
- 첫 번째 입력 지연(FID)
- 누적 레이아웃 시프트(CLS)
- 다음 페인트(INP)로의 인터랙션(실험 중) (실험적)
첫 바이트에 도달하는 시간
첫 바이트까지의 시간(TTFB)은 브라우저가 페이지를 요청하고 서버로부터 첫 바이트의 정보를 수신할 때까지의 시간을 의미합니다. 이 시간에는 DNS 조회와 HTTPS를 통해 요청하는 경우 TCP 핸드셰이크 및 SSL 핸드셰이크를 사용한 연결 설정이 포함됩니다.
TTFB는 요청 시작과 응답 시작 사이에 걸리는 시간(밀리초)입니다
첫 번째 콘텐츠 페인트
첫 번째 콘텐츠 페인트(FCP)는 브라우저가 DOM에서 콘텐츠의 첫 번째 비트를 렌더링하여 사용자에게 페이지가 실제로 로드되고 있다는 첫 번째 피드백을 제공하는 것입니다.
첫 번째 콘텐츠 채우기 타임스탬프는 브라우저가 텍스트, 이미지(배경 이미지 포함), 비디오, 캔버스에 그려진 캔버스 또는 비어 있지 않은 SVG를 처음 렌더링한 시점을 의미합니다. 여기에는 iframe의 콘텐츠는 제외되지만 보류 중인 웹폰트가 있는 텍스트는 포함됩니다.
최대 콘텐츠풀 페인트
Largest Contentful Paint LCP는 페이지의 메인컨텐츠가 로드되었을 가능성이 있을때, 페이지 로드 타임라인에 해당 지점을 표시하기때문에 사용자가 로드 속도를 측정할수있는 지표가 됩니다. LCP가 빠르면 해당 페이지를 사용할 수 있다고 인지하는데 도움이 됩니다.
최초 입력 지연
First Input Delay(최초 입력 지연, FID)는, 사용자가 응답하지 않는 페이지와 상호작용할때 느끼는 경험을 측정하는 로드 반응성 측정 지표입니다. FID가 낮아야 페이지를 사용할 수 있다고 인지하는데 도움이 됩니다.
누적 레이아웃 시프트
Cumulative Layout Shift(누적 레이아웃 이동, CLS)는 사용자가 예상치못한 레이아웃 이동을 경험하는 빈도를 측정하므로, 시각적 안정성을 수치화한 지표입니다. CLS가 낮으면 사용자 경험이 좋다는것을 인지하는데 도움이 됩니다.
다음 페인트로의 인터랙션(INP)(실험적)
다음 페인트로의 인터랙션(INP)은 첫 입력 지연(FID)을 대체할 실험적인 지표입니다. 이벤트 타이밍 api의 데이터를 사용하여 응답성을 평가합니다. 페이지가 응답하지 않는다면 사용자 경험이 좋지 않다는 뜻이므로 사용자가 수행한 모든 상호작용의 지연시간을 관찰합니다. INP가 낮다는것은 빠르게 응답할 수 있음을 인지하는데 도움이 됩니다.