웹 성능 측정 지표 정리 (Core Web Vitals 포함)
웹 페이지의 성능은 사용자 경험에 직접적인 영향을 미칩니다.
특히 Core Web Vitals는 Google이 권장하는 핵심 성능 지표로,
로딩 속도, 상호작용 가능 시점, 시각적 안정성 등을 객관적으로 측정하는 데 활용됩니다.
1. LCP (Largest Contentful Paint)
- 정의: 페이지에서 가장 큰 콘텐츠(예: 이미지, 텍스트 블록)가 화면에 렌더링되는 시간
- 목표 값: 2.5초 이내 (1초 이내면 이상적)
- 중요성: 사용자가 “페이지가 로드되었다”고 인식하는 기준
2. FCP (First Contentful Paint)
- 정의: 사용자에게 최초로 콘텐츠(텍스트, 이미지 등)가 표시되는 시점
- 목표 값: 1.8초 이내
- 중요성: 브라우저가 실제로 응답하고 있다는 신호를 줌
3. CLS (Cumulative Layout Shift)
- 정의: 로딩 중 요소들이 예기치 않게 움직인 비율(레이아웃 이동량)
- 목표 값: 0.1 이하
- 중요성: 버튼, 이미지, 텍스트 등이 튀지 않게 함으로써 사용자 혼란 방지
4. TTI (Time to Interactive)
- 정의: 페이지가 완전히 로딩되고 사용자와 상호작용할 준비가 된 시점
- 목표 값: 5초 이내
- 중요성: 클릭, 입력 등 사용자 행동에 빠르게 반응할 수 있어야 사용성 개선
5. TBT (Total Blocking Time)
- 정의: FCP와 TTI 사이에 사용자 입력이 차단된 시간의 총합
- 목표 값: 200ms 이하
- 중요성: 페이지가 뻣뻣하게 느껴지지 않도록 함
6. FID (First Input Delay)
- 정의: 사용자가 페이지에서 첫 상호작용(예: 클릭) 했을 때, 브라우저가 반응하는 데 걸린 시간
- 목표 값: 100ms 이하
- 중요성: 사용자 입력에 대한 초기 반응성 측정
7. 페이지 크기 및 요청 수
- 정의: HTML, CSS, JS, 이미지 등 전체 페이지의 용량과 요청 수
- 목표 값: 페이지 크기 1MB 이하, 요청 수 50개 이하 권장
- 중요성: 로딩 속도 향상과 네트워크 부담 완화
8. 자원 로딩 최적화 전략
-
예시:
- 이미지 Lazy Loading
- 이미지 포맷 최적화 (WebP, AVIF 등)
- HTTP/2 또는 HTTP/3 사용
- 코드 분할 (Code Splitting)
- 외부 폰트 비동기 로딩
-
중요성: 중요한 콘텐츠를 먼저 로드하고, 사용자와 가까운 자원을 우선적으로 처리
참고 및 진단 도구
- Lighthouse: 크롬 개발자 도구 내 성능 진단 도구
- PageSpeed Insights: https://pagespeed.web.dev
- Web Vitals Extension: 실시간 브라우저 성능 지표 확인
예시 (측정 도구 출력 형식)
// Lighthouse 측정 결과 예시 (간략):
- LCP: 1.9s ✅
- FCP: 1.2s ✅
- CLS: 0.23 ⚠️
- TTI: 4.5s ✅
- TBT: 320ms ⚠️
- FID: 95ms ✅
- 총 요청 수: 43개 ✅
- 페이지 용량: 980KB ✅
이 지표들은 단순한 점수가 아니라 실제 사용자가 웹사이트를 얼마나 빠르고 편하게 이용할 수 있는지를 나타내는 기준입니다.
프론트엔드 개발자라면 이 지표들을 주기적으로 체크하고 개선하는 습관이 중요합니다.
꾸준히