페이지 성능¶
모든 웹사이트의 장기적인 성공을 위해서는 지속적인 사용자 경험 최적화가 핵심입니다. 기업가, 마케터, 개발자 모두에게 Web Vitals는 웹사이트의 경험 지수를 정량화하고 개선 기회를 발굴하는 데 도움을 줍니다.
Google 핵심 Web Vitals (Google’s Core Web Vitals)¶
Web Vitals는 뛰어난 웹 사용자 경험을 제공하는 데 필수적인 웹 품질 신호에 대한 통합된 지침을 제공하기 위해 Google이 시작한 새로운 이니셔티브입니다.
핵심 Web Vitals를 구성하는 지표는 시간이 지남에 따라 발전합니다. 현재 2020년 기준 지표 구성은 로딩 성능, 상호작용성, 시각적 안정성이라는 세 가지 사용자 경험 측면에 중점을 두며, 다음과 같은 지표(및 각 지표에 해당하는 임계값)를 포함합니다.
Largest Contentful Paint (LCP): 최대 콘텐츠풀 페인트, 로딩 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 LCP가 페이지가 처음 로드되기 시작한 후 2.5초 이내에 발생해야 합니다.
First Input Delay (FID): 최초 입력 지연, 상호작용성을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.
Cumulative Layout Shift (CLS): 누적 레이아웃 이동, 시각적 안정성을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 CLS가 0.1 이하로 유지되어야 합니다.
대부분의 사용자 방문 동안 권장 목표값을 달성할 수 있도록 하려면 위의 각 지표에 대해 페이지 로드의 75번째 백분위수를 좋은 측정 임계값으로 설정하며, 이 임계값은 모바일과 데스크톱 장치 모두에 적용됩니다.
페이지 수집 지표¶
| 지표 | 유형(단위) | 설명 |
|---|---|---|
view.time_spent |
number(ns) | 페이지 체류 시간 |
view.loading_time |
number(ns) | 페이지가 준비되고 네트워크 요청 및 DOM 변경이 없는 상태입니다. > 페이지 로딩 시간을 참조하세요. |
view.largest_contentful_paint |
number(ns) | 최대 콘텐츠풀 페인트, 로딩 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 LCP가 페이지가 처음 로드되기 시작한 후 2.5초 이내에 발생해야 합니다. |
view.first_input_delay |
number(ns) | 최초 입력 지연, 상호작용성을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다. |
view.cumulative_layout_shift |
number(ns) | 누적 레이아웃 이동, 시각적 안정성을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 CLS가 0.1 이하로 유지되어야 합니다. |
view.first_contentful_paint |
number(ns) | 최초 콘텐츠풀 페인트(FCP) 지표는 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링 완료되는 시간을 측정합니다. 이 지표에서 "콘텐츠"는 텍스트, 이미지(배경 이미지 포함), <svg> 요소 또는 흰색이 아닌 <canvas> 요소를 의미합니다.> w3c를 참조하세요. |
view.first_byte |
number(ns) | 페이지를 요청한 시점부터 페이지 응답의 첫 번째 바이트를 수신할 때까지의 시간 |
view.time_to_interactive |
number(ns) | 페이지가 로드되기 시작한 시점부터 주요 하위 리소스 렌더링이 완료되고 사용자 입력에 신속하고 안정적으로 응답할 수 있을 때까지 필요한 시간 |
view.dom_interactive |
number(ns) | 파서가 문서 구문 분석을 완료하는 시간입니다. 자세한 내용은 MDN을 참조하세요. |
view.dom_content_loaded |
number(ns) | 순수 HTML이 완전히 로드되고 구문 분석되면 스타일시트, 이미지 또는 하위 프레임이 완전히 로드될 때까지 기다리지 않고 DOMContentLoaded 이벤트가 트리거됩니다. 자세한 내용은 MDN을 참조하세요. |
view.dom_complete |
number(ns) | 페이지와 모든 하위 리소스가 준비되었습니다. 사용자에게 로딩 애니메이션이 중지된 것으로 표시됩니다. 자세한 내용은 MDN을 참조하세요. |
view.load_event |
number(ns) | 전체 페이지와 스타일시트, 이미지 등 모든 종속 리소스의 로드가 완료되면 트리거됩니다. DOMContentLoaded는 종속 리소스의 로드를 기다리지 않고 페이지 DOM 로드가 완료되면 트리거된다는 점에서 다릅니다. 자세한 내용은 MDN을 참조하세요. |
단일 페이지 애플리케이션(SPA) 정보¶
단일 페이지 애플리케이션(SPA)의 경우, RUM 브라우저 SDK는 loading_type 태그를 사용하여 initial_load와 route_change를 구분합니다. RUM SDK는 loading_type:route_change 태그가 있는 view 이벤트를 생성합니다. RUM은 History API를 사용하여 URL 변경을 수신합니다.
로딩 시간 계산 방식¶
최신 브라우저가 제공하는 강력한 API 기능을 기반으로, 로딩 시간은 페이지의 DOM 변경 및 네트워크 요청 상태를 모니터링합니다.
-
Initial Load: 로딩 시간은 다음 두 값 중 더 긴 값을 사용합니다.
- loadEventEnd - navigationStart
- 페이지에 처음으로 활동이 없는 시간 - navigationStart
-
SPA 경로 변경: 페이지에 처음으로 활동이 없는 시간 - URL 변경 시간
페이지 활동 상태¶
다음 조건 중 하나를 충족하면 페이지가 활성 상태인 것으로 간주합니다.
- 페이지 DOM에 변경이 있는 경우
- 정적 리소스 로드가 있는 경우(JS, CSS 등 로드)
- 비동기 요청이 있는 경우
참고
페이지에서 100ms 이내에 이벤트가 발생하지 않으면 현재 페이지가 비활성 상태인 것으로 간주됩니다.
참고
다음 상황에서는 마지막 요청 또는 DOM 변경 이후 100ms 기준으로 활동을 정확하게 결정하지 못할 수 있습니다.
- 애플리케이션이 정기적으로 또는 매 클릭 후 API에 요청을 전송하여 분석 데이터를 수집하는 경우.
- 애플리케이션이 "comet" 기술(스트리밍 또는 롱 폴링)을 사용하여 요청이 무기한 유지되는 경우.
이러한 상황에서 활동 결정의 정확성을 높이기 위해 excludedActivityUrls 구성을 지정하여 이러한 요청을 제외할 수 있습니다.