FCP (First Contentful Paint)LCP (Largest Contentful Paint)SI (Speed Index)TTI (Time To Interactive)TBT (Total Blocking Time)CLS (Cumulative Layout Shift)
크롬 브라우저에는 웹 사이트의 전체적인 성능을 체크할 수 있는 도구, Lighthouse 가 있다.
Lighthouse 는 구글 확장프로그램 또는 개발자 도구를 통해 사용할 수 있다.
Lighthouse 를 통해 성능(Performance), 접근성(Accessibility), 모범 사례(Best Practices), SEO 에 대한 성능을 체크할 수 있고, 이번 포스팅에서 성능(Performance) 에 대한 6가지 항목을 정리해보려고 한다.
FCP (First Contentful Paint)
FCP 는 페이지 로딩 시, 컨텐츠가 처음 보일 때 까지의 시간을 나타내는 지표이다.
위의 이미지를 보면 페이지를 로드하는 첫 번째 슬라이드부터 컨텐츠가 처음 보이는 두 번째 슬라이드까지의 시간을 FCP 라고 한다.
점수 기준
좋음 | 1.8초 이하 |
보통 | 1.8초 ~ 3초 |
나쁨 | 3초 이상 |
LCP (Largest Contentful Paint)
LCP 는 뷰포트 내의 컨텐츠 중, 가장 큰 컨텐츠(이미지 또는 텍스트)를 렌더링 하기까지의 시간을 나타내는 지표이다.
위의 이미지처럼 뷰포트의 가장 큰 컨텐츠는 페이지를 로드하면서 갱신이 진행된다. 그리고 뷰포트 내에서 가장 큰 컨텐츠인 이미지가 렌더링 되면서 LCP 측정이 완료된다.
점수 기준
좋음 | 2.5초 이하 |
보통 | 2.5초 ~ 4초 |
나쁨 | 4초 이상 |
SI (Speed Index)
SI 는 페이지의 모든 컨텐츠가 보이기까지의 시간을 나타내는 지표이다.
점수 기준
좋음 | 3.4초 이하 |
보통 | 3.4초 ~ 5.8초 |
나쁨 | 5.8초 이상 |
TTI (Time To Interactive)
TTI 는 컨텐츠가 로드된 후(FCP 이후), 사용자와의 상호작용(클릭, 입력 등)이 가능한 시점까지의 시간을 나타내는 지표이다.
점수 기준
좋음 | 3.8초 이하 |
보통 | 3.9초 ~ 7.3초 |
나쁨 | 7.3초 이상 |
TBT (Total Blocking Time)
TBT 는 FCP 와 TTI 사이의 시간에서 사용자가 상호작용을 할 수 없는 긴 시간(50ms 이상)에 대한 차단 시간을 나타내는 지표이다.
위의 이미지처럼 메인 스레드에서 5개의 작업이 있다고 했을 때, 5개의 작업 중 긴 시간의 기준이 되는 50ms 이상의 작업은 총 3개이다. (250ms, 90ms, 155ms)
3개의 긴 작업에서 기준이되는 50ms 을 각각 빼준 뒤, 그 값들을 더하게 되면 해당 작업에 대한 TBT 의 값이 구해진다. (200 + 40 + 105 = 345ms)
점수 기준
좋음 | 200ms 이하 |
보통 | 200ms ~ 600ms |
나쁨 | 600ms 이상 |
CLS (Cumulative Layout Shift)
CLS 는 페이지의 컨텐츠 레이아웃이 예상치 못하게 변경되는 것에 대해 측정하는 지표를 나타낸다.
해당 이미지는 CLS 의 점수가 좋지 않은 경우와 좋은 경우를 간단하게 나타내주는 이미지이다.
좌측의 CLS 점수가 좋지 않은 경우는 광고 등의 배너가 갑자기 상단에 생성되어 원하지 않았던 광고를 클릭하게 되는데 이런 부분은 CLS 점수가 좋지 않은 UX 이다.
CLS 점수는 거리분율과 영향분율을 곱한 값으로 점수가 계산된다.
영향분율
영향분율은 기존의 컨텐츠 영역에서 특정 요소에 의해 이동한 영역을 더한 영역을 의미한다.
상단 이미지의 영향분율은 기존의 컨텐츠 영역(50%) + 이동한 영역(25%) = 75% 이므로 0.75 이다.
거리분율
거리분율은 특정 요소에 의해 이동한 영역을 의미한다.
상단 이미지의 거리분율은 이동한 영역(25%) 이므로 0.25 이다.
그러므로 위 이미지의 CLS 점수는 영향분율(0.75) 와 거리분율(0.25) 을 곱한 0.1875 가 된다.
점수 기준
좋음 | 0.1점 이하 |
보통 | 0.1점 ~ 0.25점 |
나쁨 | 0.25점 이상 |
이번 포스팅을 통해 웹 사이트 성능지표에 대해 간단하게 개념 정리해보았다.
- 해당 항목들에 대해 개선하는 방법 등의 정보들은 참고 사이트의 web.dev 에 자세히 설명되어있기 때문에 확인해보면 좋을 것 같다.
- 프로젝트를 하면서 성능 지표에 대해 신경을 더 쓰고 개선해야겠다는 생각이 들었다.
참고
