성능 측정의 정의
과거 웹사이트의 성능 측정은 load 이벤트로 측정되었습니다. load 이벤트가 웹 페이지의 생애주기를 잘 반영하였지만, 사용자를 고려하지는 않았습니다. 예를 들어, load event는 종료가 되었음에도 종료된 후 몇 초간 컨텐츠를 불러오거나, 페이지에 무언가를 보여주기 위해 시간이 소모되었습니다.
이에, 크롬에서는 W3C 웹 성능 팀과 협력하여 사용자가 웹 페이지의 성능을 어떻게 경험하는지 보다 정확하게 측정하는 새로운 API와 지표를 표준으로 정립하고자 하였습니다.
성능 측정의 유형
- 페이지가 모든 시각적 요소를 화면에 얼마나 빠르게 로드하고 렌더링할 수 있는지?
- 사용자 상호 작용에 신속하게 반응할 수 있도록 페이지에서 필요한 JavaScript 코드를 로드하고 실행하는지?
- 페이지 로드 후, 페이지가 사용자 상호작용에 얼마나 빠르게 반응할 수 있는지?
- 페이지의 요소들이 사용자가 예상하지 못한 방식으로 변화하여 잠재적으로 상호작용을 방해하지는 않는지?
- 애니메이션이 일관된 프레임 속도로 렌더링되고 한 상태에서 다음 상태로 유연하게 변하는지?
위 기준을 바탕으로 주요 성능 측정 항목이 선정되었고 이 중 LCP, INP, CLS는 Web Vitals에서 가장 중요하게 다루는 Core 항목이다.
주요 성능 측정 항목
TTFB(Time to First Byte)
서버가 클라이언트의 요청을 받고, 첫 번째 바이트를 클라이언트로 전송하는데 걸리는 시간을 의미합니다.
TTFB는 페이지 로딩 과정의 첫 단계로 TTFB가 길어지면 FCP와 LCP도 늦어져 사용자 경험이 저하될 수 있습니다..
사용자에게 좋은 경험을 제공하기 위해서는 TTFB가 0.8초 이하여야 합니다.
FCP(First Contentful Paint)
사용자가 페이지를 로드한 후, 첫 번째 콘텐츠(텍스트, 이미지 등)가 화면에 렌더링되는 시간을 의미합니다.
사용자에게 좋은 경험을 제공하기 위해서는 FCP가 1.8초 이하여야 합니다.
FCP를 향상시키기 위한 방법
- 렌더링 차단 리소스 제거
- CSS 경량화
- 사용되지 않는 CSS/JS 제거
- 필요한 출처에 미리 연결
- 서버 응답 시간 줄이기(TTFB)
- 다중 페이지 리다이렉션 지양
- 주요 요청 미리 로드
- 비정상적으로 큰 네트워크 요청 지양
- 효율적인 캐시 정책으로 정적 요소 제공
- 과도한 DOM 크기 지양
- 주요 요청 깊이 최소화
- 웹폰트 로드 중 텍스트 가시성 보장
- 요청 수를 낮추고 전송 크기를 작게 유지
TBT(Total Blocking Time)
사용자가 콘텐츠를 볼 수 있는 시점(FCP) 이후 특정 시간 동안 메인 스레드가 차단되어 사용자 입력에 반응할 수 없는 시간을 의미합니다.
TBT는 일반적인 환경에서 200ms이내여야 사용자에게 좋은 경험을 제공할 수 있습니다.
❗️ LCP(Largest Contentful Paint)
페이지에서 가장 큰 콘텐츠(이미지,비디오 등)가 화면에 렌더링되는 시간을 의미합니다.
사용자에게 좋은 경험을 제공하기 위해서 LCP는 2.5초 이하여야 합니다.
LCP를 향상시키기 위한 방법
- 리소스 로드 지연 제거 : 비동기 로딩, preload 등
- 요소 렌더링 지연 제거 : 렌더링 차단 리소스를 최소화
- 페이지의 리소스가 로드되는데 걸리는 시간 감소 : 파일 크기 최적화 등
- TTFB 줄이기
❗️ INP(Interaction to Next Paint)
사용자가 페이지에서 입력(클릭, 터치 등)을 시도했을 때, 그 입력에 대한 응답이 이루어지기까지 걸리는 시간을 의미합니다.
사용자에게 좋은 경험을 제공하기 위해서 INP는 200ms 이하여야 합니다
INP를 향상시키기 위한 방법
- 입력 지연 시간 및 줄이기
- 이벤트 콜백 최적화
- 즉각적인 피드백 제공
❗️ CLS(Cumulative Layout Shift)
페이지가 로드되는 동안 시각적인 요소가 이동하는 정도를 측정한 것으로 이동이 발생한 요소의 크기와 이동 거리로 계산됩니다. 즉 예기치 않은 레이아웃 이동에 대한 점수를 의미합니다.
사용자에게 좋은 경험을 제공하기 위해서 CLS는 0.1 이하여야 합니다.
CLS를 향상시키기 위한 방법
- 이미지 및 비디오 크기 지정
- 광고 및 동적 콘텐츠 공간을 사전에 확보
