- FP(First Paint)
- 페이지 호출을 하고 첫 픽셀이 화면에 그려지기 전까지의 시간을 나타냄
- FP를 통해 사용자는 페이지에 접속중이라고 인지
- FMP(First Meaningful Paint)
- 페이지에서 가장 큰 레이아웃 변화와 웹폰트 로드 이후 첫 렌더링까지의 시간을 나타냄
- 브라우저 별로 다른 결과를 보일 수 있음
- lighthouse v6.0부터 지원을 중단했고 LCP 사용을 권장함
- LCP(Largest Contentful Paint)
- 페이지 로드가 시작된 시점부터 큰 텍스트나 이미지 엘리먼트가 렌더될 때까지의 시간을 나타냄
- 사용자가 감지하는 로드 속도를 측정할 수 있음
- 좋은 UX를 위해 2.5초 미만이어야 함
- FCP(First Contentful Paint)
- 브라우저가 처음 컨텐츠 엘리먼트를 렌더링하는데 걸리는 시간을 나타냄
- 컨텐츠는 canvas, svg 등을 말함
- 유저가 컨텐츠를 처음으로 소비하기 시작하는 시간
- 페이지의 일부라도 로딩이 끝나는 시간을 측정하는 지표
- 좋은 UX를 위해 1.8초 미만이어야 함
- 렌더링 차단 리소스 제거, css 축소, 핵심 요청 사전 로드, 캐싱, 요청 깊이 최소화를 하면 FCP를 최적화할 수 있음
<link rel="preconnect">혹은<link rel="preload">사용을 통해 UX 향상 가능<link rel="dns-prefetch">는 dns 조회만 사전처리하지만 브라우저 지원이 광범위하므로 좋은 대체 수단
- TTI(Time to Interactive)
- 페이지가 로드되기 시작한 시점부터 주요 하위 리소스가 로드된 후 사용자 입력을 안정적으로 응답할 수 있게 되기까지의 시간
- SSR을 사용하면 표시속도는 빨리지지만 TTI가 희생될 수 있음
- FCP와 TTI 사이 간격을 최소화해야 함
- 일반적으로 5초 미만이어야 함
- FID(First Input Delay)
- 사용자가 행동을 하고 나서 이벤트 핸들러 처리 시작까지의 시간
- 비동기 이벤트 핸들러에서도 일관된 수치 측정을 하기 위해 시작까지의 시간을 측정함
- 좋은 UX를 위해 100밀리초 미만이어야 함
- 사용자가 있어야 측정 가능한 지표로 자동 테스트에서는 TBT 사용
- TBT(Total Blocking Time)
- FCP와 TTI 사이 블록된 시간의 합
- 좋은 UX를 위해 300밀리초 미만이어야 함
- CLS(Cumulative Layout Shift)
- 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 측정한 지표