웹사이트 성능 개선하기: 성능 지표

성능 지표

성능이란 단순하게 웹사이트가 얼마나 빠른가?를 의미한다.

그런데 웹사이트를 '빠르게' 만든다는 것은 어떤 의미일까?

 

사실 성능은 상대적이다.

- (고성능 디바이스, 빠른 네트워크)의 유저에게는 사이트가 빠를 수 있지만, (저성능 디바이스, 느린 네트워크)의 유저에게는 사이트가 느릴 수 있다.

- 똑같은 시간에 로딩이 완료되더라도, 흰 화면이었다가 한번에 로드되는 것과 각 요소가 점진적으로 로드되는 것에 따라 후자가 더 빠르게 로드된다고 느낄 수 있다.

- 사이트가 빠르게 보이더라도, 사용자 상호작용에 반응하지 않을 수도 있다.

 

따라서 성능을 이야기할 때는 지표를 이용하는 것이 좋다.

또한 그 지표가 유용한지도 함께 고려하는것이 좋다.

성능 지표를 측정하는법

성능 지표는 일반적으로 두 가지 방법으로 측정한다.

- Lab(실험실): 도구를 이용해 통제된 환경에서 페이지 로드 시뮬레이션

- Field(실제 환경): 실제 유저가 실제로 페이지를 로드하고 상호작용한 기록

 

어느 것이 더 낫다는건 없으며, 일반적으로 두 상황 다 사용하는 것이 좋다.

In the Lab

새로운 기능을 출시할 때는 사용자 정보가 없으므로, Lab에서 성능 테스트를 할 수 밖에 없고, 그 상황에서 가장 유용한 방법이다.

In the field

실제 사용자가 로드하고 상호작용한 기록을 수집하여 성능 지표를 측정한다.

따라서 Lab에서 측정하지 못하는 개인화된 콘텐츠나 광고 로드와 관련한 성능도 측정할 수 있다.

또한 여러 성능의 디바이스와 네트워크로 접속한 사용자들의 성능지표를 수집할 수 있다.

지표의 종류

유저가 성능을 인지하는 것과 관련한 몇 가지 유형이 있다.

 

- 체감 로드 속도: 페이지가 얼마나 빨리 모든 시각적 요소를 로드하고 화면에 렌더링할 수 있는지?

- 로드 응답성: 페이지가 사용자 상호작용에 빠르게 응답하기 위해 필요한 자바스크립트 코드를 얼마나 빨리 로드하고 실행할 수 있는지?

- 런타임 응답성: 페이지 로드 후 페이지가 얼마나 빨리 상호작용에 반응할 수 있는지?

- 시각적 안정성: 페이지 요소가 사용자가 예상하지 못한 방식으로 이동하여 상호 작용을 방해하는지?

- 부드러움: 애니매이션이 일정한 프레임 속도로 렌더되고, 원활하게 동작하는지?

 

이처럼 다양한 성능 지표가 있으며, 단일 지표로는 페이지의 모든 성능 특성을 파악하기 힘들다는걸 인지해야한다.

측정해야할 중요한 지표

• First Contentful Paint (FCP): 페이지 로딩이 시작되는 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링되는 시점까지의 시간을 측정한다. (lab, field)
• Largest Contentful Paint (LCP): 페이지 로딩이 시작될 때부터 가장 큰 텍스트 블록 또는 이미지 요소가 화면에 렌더링될 때까지의 시간을 측정합니다.(lab, field)
• Interaction to Next Paint (INP): 페이지에 대한 모든 탭, 클릭 또는 키보드 상호 작용의 지연 시간을 측정하고 상호 작용 횟수에 따라 페이지의 가장 낮은(또는 가장 높은 값에 가까운) 상호 작용 지연 시간을 단일 대표 값으로 선택하여 페이지의 전반적인 응답성을 설명한다. (lab, field)
• Total Blocking Time (TBT): 메인 스레드가 입력 응답을 방해할 만큼 차단된 FCP와 TTI 사이의 총 시간 (lab)
• Cumulative Layout Shift (CLS): 페이지가 로드 되고, 요소가 hidden 처리될 때까지의 모든 예기치 않은 레이아웃 이동의 누적 점수 (lab, field)
• Time to First Byte (TTFB): 사용자 요청부터 응답 리소스의 네트워크 첫 바이트가 도착할 때까지 걸리는 시간 (lab, field)

각 페이지의 성능 개선을 위해 지표를 이용할 때는, 페이지의 특성에 맞게 고른 뒤, 개선하는 것이 좋다.

예를 들어 LCP 지표는 페이지의 주요 콘텐츠 로딩이 완료된 시점을 측정하기 위한 것이지만, 가장 큰 요소가 페이지의 주요 콘텐츠에 포함되지 않아 LCP와 관련이 없는 경우, 큰 의미없는 지표일 수 있다.

Google이 제시하는 Core Web Vitals

Google은 웹사이트의 사용자 경험 향상을 위한 핵심 지표를 제시하는데, 이를 Core Web Vitals라고 한다.

Core Web Vitals을 구성하는 지표는 꾸준히 업데이트하기 때문에, 지표가 달라질 수 있다.

또한 이 지표는 보통 in the field 기반으로 설명되고, lab에서도 측정할 수 있긴 하다.

현재 Core Web Vitals는 loading, interactivity, visual stability에 초점을 두어 측정한다.

Core Web Vitals

• Largest Contentful Paint (LCP): loading 성능을 측정한다. 우수한 사용자 경험을 제공하려면 페이지가 처음 로딩되기 시작한 후 2.5초 이내에 LCP가 발생해야한다.
• Interaction to Next Paint (INP): interactivity 성능을 측정한다. 우수한 사용자 경험을 제공하려면 페이지의 INP가 200밀리초 이하여야한다.
• Cumulative Layout Shift (CLS): visual stability 성능을 측정한다. 좋은 사용자 경험을 제공하려면 페이지의 CLS가 0.1 이하로 유지되어야한다.

각 지표의 권장 사항은 페이지 로드 기록의 백분위 수 상위 75%를 기준으로 삼는 것이 좋다.

예시

PageSpeed Insights: Core Web Vitals field 수집 정보

PageSpeed Insights: Core Web Vitals lab 수집 정보

Lighthouse Lab에서는 입력과 같은 상호작용 시간(INP)을 측정할 수 없기 때문에 대신 TBT를 측정한다.

reference

https://web.dev/articles/user-centric-performance-metrics#how_metrics_are_measured

사용자 중심 성능 측정항목  |  Articles  |  web.dev

https://web.dev/articles/vitals

Web Vitals  |  Articles  |  web.dev