성능 통계 패널을 사용하여 웹사이트 실적에 대해 활용 가능한 사용 사례 기반 통계를 확인합니다.
새 패널을 사용해야 하는 이유
새로운 성능 통계 패널은 기존 성능 패널을 사용할 때 개발자가 겪는 다음과 같은 세 가지 문제를 해결하기 위한 실험입니다.
- 정보가 너무 많음. 새롭게 디자인된 UI를 사용하면 실적 통계 패널에서 데이터를 간소화하고 관련 정보만 표시합니다.
- 사용 사례를 구분하기 어렵습니다. 성능 통계 패널은 사용 사례 기반 분석을 지원합니다. 현재는 페이지 로드 사용 사례만 지원하며 향후 의견(예: 상호작용)을 바탕으로 더 많은 사용 사례가 지원될 예정입니다.
- 브라우저의 효과적인 사용을 위해 브라우저의 작동 방식에 대한 심층적인 전문 지식이 필요합니다. 실적 통계 패널에는 문제 해결 방법에 대한 활용 가능한 의견과 함께 통계 창의 주요 통계가 강조표시됩니다.
소개
이 튜토리얼에서는 실적 통계 패널을 사용해 페이지 로드 성능을 측정하고 이해하는 방법을 설명합니다. 위 튜토리얼의 동영상 버전을 계속 읽거나 시청하세요.
성능 통계 패널 열기
- DevTools를 엽니다.
옵션 더보기 > 도구 더보기 > 실적 통계를 클릭합니다.
또는 명령어 메뉴를 사용하여 성능 통계 패널을 엽니다.
실적 기록
성능 통계 패널에서는 일반 및 사용 사례 기반 (예: 페이지 로드) 성능을 기록할 수 있습니다.
- 새 탭에서 이 데모 페이지를 열고 페이지에서 성능 통계 패널을 엽니다.
기록하는 동안 네트워크와 CPU를 제한할 수 있습니다. 이 튜토리얼에서는 캐시 사용 중지를 선택하고 드롭다운 메뉴에서 CPU를 4배 감속으로 설정합니다.
페이지 로드 측정을 클릭합니다. DevTools는 페이지를 새로고침하는 동안 성능 측정항목을 기록하고, 페이지 로드가 완료되고 몇 초 후에 기록을 자동으로 중지합니다.
공연 녹화 다시보기
하단의 컨트롤을 사용하여 녹화 파일의 재생을 제어합니다.
다음은 이를 수행하는 방법의 예입니다.
- Play를 클릭하여 녹화 파일을 재생합니다.
- Pause를 클릭하여 다시보기를 일시중지합니다.
- 드롭다운을 사용하여 재생 속도를 조정합니다.
- 시각적 미리보기 전환을 클릭하여 시각적 미리보기를 표시하거나 숨깁니다.
공연 기록 탐색하기
DevTools가 자동으로 축소되어 전체 기록 타임라인을 표시합니다. 확대/축소를 통해 녹화 파일을 탐색하고 타임라인을 이동할 수 있습니다.
타임라인을 확대/축소하고 좌우로 이동하려면 해당하는 탐색 버튼을 사용합니다.
- 타임라인을 클릭하면 플레이헤드를 이동하여 특정 프레임을 볼 수 있습니다.
- 하단에 있는 확대 및 축소 컨트롤을 클릭하여 확대합니다. 이 경우 플레이헤드를 기준으로 확대/축소합니다.
- 하단의 가로 스크롤바를 드래그하여 타임라인을 좌우로 이동합니다.
또는 단축키를 사용할 수 있습니다. 바로가기를 보려면 버튼을 클릭하세요.
단축키를 사용하는 경우 마우스 커서를 기반으로 확대/축소합니다.
성능 통계 보기
통계 창에서 성능 통계 목록을 가져옵니다. 잠재적인 성능 문제를 식별하고 수정합니다.
각 통계 위로 마우스를 가져가면 기본 트랙에 강조 표시됩니다.
렌더링 차단 요청과 같은 통계를 클릭하여 세부정보 창에서 엽니다. 문제를 더 자세히 알아보려면 파일, 문제, 해결 방법 섹션 등을 확인하세요.
Web Vitals 성능 측정항목 보기
웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 품질 신호에 관한 통합 가이드를 제공하기 위한 Google의 이니셔티브입니다.
이러한 측정항목은 타임라인 및 통계 창에서 확인할 수 있습니다.
타임라인의 통계 위로 마우스를 가져가면 측정항목에 대해 자세히 알아볼 수 있습니다.
콘텐츠가 포함된 최대 페인트의 지연 살펴보기
최대 콘텐츠 페인트 (LCP)는 Core Web Vitals 측정항목 중 하나입니다. 페이지가 처음 로드되기 시작한 시점을 기준으로 표시 영역 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고합니다.
좋은 LCP 점수는 2.5초 이하입니다.
페이지에서 콘텐츠가 가장 큰 페인트를 렌더링하는 데 시간이 더 오래 걸리는 경우 타임라인에 노란색 정사각형 또는 빨간색 삼각형과 함께 LCP 배지가 표시됩니다.
세부정보 창을 열려면 타임라인 또는 오른쪽의 통계 창에서 LCP 배지를 클릭합니다. 이 창에서 지연의 잠재적 원인과 해결 방법을 확인할 수 있습니다.
이 예에서는 요청이 렌더링을 차단하므로 개발자는 중요한 스타일을 인라인으로 적용하여 이를 수정할 수 있습니다. 자세한 내용은 렌더링 차단 리소스 제거하기를 참고하세요.
LCP 렌더링 시간의 하위 부분을 보려면 세부정보 > 타이밍 분석 섹션까지 아래로 스크롤합니다.
LCP 렌더링 시간은 다음과 같은 하위 부분으로 구성됩니다.
| LCP 하위 부분 | 설명 |
|---|---|
| TTFB (Time to First byte) | 사용자가 페이지 로드를 시작한 시점부터 브라우저가 HTML 문서 응답의 첫 번째 바이트를 수신할 때까지의 시간입니다. |
| 리소스 로드 지연 | TTFB와 브라우저에서 LCP 리소스 로드를 시작하는 시점 사이의 델타입니다. |
| 리소스 로드 시간 | LCP 리소스 자체를 로드하는 데 걸리는 시간입니다. |
| 요소 렌더링 지연 | LCP 리소스 로드가 완료된 후 LCP 요소가 완전히 렌더링될 때까지의 델타입니다. |
LCP 요소를 렌더링하는 데 리소스 로드가 필요하지 않은 경우 리소스 로드 지연과 시간이 생략됩니다. 예를 들어 요소가 시스템 글꼴로 렌더링된 텍스트 노드인 경우입니다.
레이아웃 변경 활동 보기
Layout Shifts 트랙에서 레이아웃 변경 활동을 확인합니다.
레이아웃 변경은 세션 창에 그룹화됩니다. 이 예에서는 두 개의 세션 기간이 있습니다. 세션 기간에는 간격이 있습니다.
레이아웃 변경 횟수 (CLS)는 핵심 Web Vitals 측정항목 중 하나입니다. 레이아웃 변경 트랙을 사용하여 잠재적인 문제와 레이아웃 변경의 원인을 식별합니다.
CLS 측정항목을 개선할 때는 항상 가장 큰 세션 기간으로 시작합니다. 이 예에서 세션 기간 1은 배경 색상 및 수준을 기준으로 가장 큰 창입니다.
스크린샷을 클릭하면 레이아웃 변경의 세부정보를 확인하고 잠재적인 근본 원인과 영향을 받은 요소를 식별할 수 있습니다.
이 예에서는 크기가 조절되지 않은 미디어가 잠재적인 근본 원인이었을 수 있습니다. 해결 방법을 알아보려면 누적 레이아웃 변경 최적화를 참고하세요.
레이아웃 변경 점수 이해하기
점수가 계산되는 방식을 알아보려면 세부정보 창의 기간 섹션을 사용하세요. Window에는 현재 레이아웃 변경이 속한 세션 창이 표시됩니다.
전체 페이지가 이동하는 경우 각 레이아웃 변경의 최대 점수는 1입니다. 이 예에서 첫 번째 레이아웃 변경은 0.15점을 받았습니다. 두 번째 레이아웃 변경은 0.041점을 기록했습니다.
이 세션 기간의 총 점수는 0.19입니다. CLS 임계값에 따라 개선이 필요합니다. 세션 창 배경 색상도 동일하게 반영됩니다.
세션 기간 백그라운드 그래프는 시간이 지남에 따라 증가합니다. 레이아웃 변경의 누적 점수는 해당 시점의 증가를 반영합니다.
네트워크 활동 보기
네트워크 트랙에서 네트워크 활동을 확인합니다. 네트워크 트랙을 펼쳐 모든 네트워크 활동을 보고 각 항목을 클릭하여 세부 정보를 볼 수 있습니다.
렌더기 활동 보기
Renderer 트랙에서 렌더링 활동을 확인합니다. 각 렌더기를 펼쳐 활동을 보고 각 항목을 클릭하여 세부정보를 볼 수 있습니다.
GPU 활동 보기
GPU 트랙에서 GPU 활동을 확인합니다. GPU 트랙은 기본적으로 숨겨져 있습니다. 사용 설정하려면 설정에서 GPU를 확인하세요.
사용자 시간 보기
맞춤 실적 측정값을 얻으려면 사용자 시간을 사용하고 시간 트랙으로 타이밍을 시각화할 수 있습니다. 자세한 내용은 사용자 시간 API를 참고하세요.
텍스트 로드 경과 시간을 계산하는 데모 페이지를 확인하세요.
사용자 시간을 보려면 다음 단계를 따르세요.
performance.mark()로 애플리케이션의 장소를 표시합니다.performance.measure()를 사용하여 표시 사이의 경과 시간을 측정합니다.- 성능 기록.
- 시간 트랙에서 측정값을 확인합니다. 트랙이 표시되지 않으면 설정에서 사용자 시간을 확인하세요.
- 세부정보를 보려면 트랙에서 타이밍을 클릭합니다.
UI 맞춤설정
타임라인과 트랙을 맞춤설정하려면 패널의 설정 아이콘을 클릭하고 원하는 옵션을 선택합니다.
녹음 파일 내보내기
녹음 파일을 저장하려면 Export 를 클릭합니다.
기록 가져오기
녹화 파일을 로드하려면 Import 를 선택합니다.
녹음 파일 삭제
녹음 파일을 삭제하려면 다음 단계를 따르세요.
- 삭제를 클릭합니다. 확인 대화상자가 열립니다.
- 대화상자에서 삭제를 클릭하여 삭제를 확인합니다.