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