성능 통계 패널을 사용하여 웹사이트 실적에 대한 활용 가능한 사용 사례 기반 통계를 확인합니다.
새 패널을 사용해야 하는 이유
새로운 실적 통계 패널은 기존 실적 패널로 작업할 때 다음과 같은 3가지 개발자 고충을 해결하기 위한 실험입니다.
- 정보가 너무 많음. 새롭게 디자인된 UI의 실적 통계 패널에서는 데이터를 간소화하고 관련 정보만 표시합니다.
- 사용 사례를 구분하기 어려움. 성능 통계 패널은 사용 사례 기반 분석을 지원합니다. 현재는 페이지 로드 사용 사례만 지원하며 향후 상호작용과 같은 의견을 기반으로 더 많은 기능이 추가될 예정입니다.
- 브라우저를 효과적으로 사용하려면 작동 방식에 대한 전문 지식이 필요합니다. 성능 통계 패널에는 통계 창의 주요 통계 및 문제 해결 방법에 대한 활용 가능한 피드백이 강조표시되어 있습니다.
소개
이 튜토리얼에서는 성능 통계 패널을 사용하여 페이지 로드 성능을 측정하고 파악하는 방법을 설명합니다. 위 튜토리얼을 계속 읽거나 이 튜토리얼의 동영상 버전을 시청하세요.
성능 통계 패널 열기
- DevTools를 엽니다.
옵션 더보기 > 도구 더보기 > 실적 통계를 클릭합니다.
또는 명령어 메뉴를 사용하여 성능 통계 패널을 엽니다.
실적 기록
성능 통계 패널에서 일반 및 사용 사례별 성능 (예: 페이지 로드)을 기록할 수 있습니다.
- 새 탭에서 이 데모 페이지를 열고 페이지에서 실적 통계 패널을 엽니다.
녹화 중에 네트워크와 CPU를 제한할 수 있습니다. 이 가이드에서는 캐시 사용 중지를 선택하고 드롭다운 메뉴에서 CPU를 4x 속도 저하로 설정합니다.
페이지 로드 측정을 클릭합니다. DevTools는 페이지가 새로고침되는 동안 성능 측정항목을 기록한 다음 페이지 로드가 완료되고 몇 초 후에 자동으로 기록을 중지합니다.
공연 녹음 다시 재생하기
하단의 컨트롤을 사용하여 녹화물의 다시보기를 제어합니다.
다음은 그 방법을 보여주는 예입니다.
- Play를 클릭하여 녹화 파일을 재생합니다.
- 일시중지를 클릭하여 다시 재생을 일시중지합니다.
- 드롭다운을 사용하여 재생 속도를 조정합니다.
- 시각적 미리보기 전환을 클릭하여 시각적 미리보기를 표시하거나 숨깁니다.
공연 녹음 파일 탐색하기
DevTools가 자동으로 축소되어 전체 기록 타임라인이 표시됩니다. 확대/축소 기능으로 기록을 탐색하고 타임라인을 이동할 수 있습니다.
타임라인을 확대/축소하고 좌우로 이동하려면 해당하는 탐색 버튼을 사용하세요.
- 타임라인을 클릭하여 플레이헤드를 이동하여 특정 프레임을 확인합니다.
- 하단의 확대 및 축소 컨트롤을 클릭하여 확대/축소합니다. 이 경우 플레이헤드를 기준으로 확대/축소합니다.
- 타임라인을 좌우로 이동하려면 하단의 가로 스크롤바를 드래그합니다.
또는 단축키를 사용할 수 있습니다. 버튼을 클릭하면 단축키를 볼 수 있습니다.
단축키를 사용하는 경우 마우스 커서를 기준으로 확대/축소합니다.
실적 통계 보기
통계 창에서 성능 통계 목록을 확인합니다. 잠재적인 성능 문제를 식별하고 해결합니다.
각 통계 위로 마우스를 가져가면 주요 트랙에서 강조 표시됩니다.
통계(예: 렌더링 차단 요청)를 클릭하여 세부정보 창에서 엽니다. 문제를 더 자세히 알아보려면 파일, 문제, 해결 방법 섹션 등을 확인하세요.
웹 바이탈 성능 측정항목 보기
웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 품질 신호에 관한 통합 가이드를 제공하기 위한 Google의 이니셔티브입니다.
타임라인 및 통계 창에서 이러한 측정항목을 볼 수 있습니다.
타임라인의 통계 위로 마우스를 가져가면 측정항목에 대해 자세히 알아볼 수 있습니다.
최대 규모의 콘텐츠 페인트 지연 알아보기
최대 콘텐츠 렌더링 시간 (LCP)은 코어 웹 바이탈 측정항목 중 하나입니다. 페이지가 처음 로드되기 시작한 시점을 기준으로 표시 영역 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고합니다.
좋은 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 기준점을 감안할 때 개선이 필요합니다. 세션 창 배경 색상은 동일하게 반영됩니다.
세션 기간 배경 그래프는 시간이 지남에 따라 증가합니다. 레이아웃 변경의 누적 점수는 해당 시점의 증가를 반영합니다.
네트워크 활동 보기
Network 트랙에서 네트워크 활동을 봅니다. 네트워크 트랙을 펼쳐 모든 네트워크 활동을 볼 수 있으며 각 항목을 클릭하여 세부 정보를 볼 수 있습니다.
렌더기 활동 보기
Renderer 트랙에서 렌더링 활동을 확인하세요. 각 렌더기를 펼쳐 활동을 보고 각 항목을 클릭하여 세부정보를 볼 수 있습니다.
GPU 활동 보기
GPU 트랙에서 GPU 활동을 확인합니다. GPU 트랙은 기본적으로 숨겨져 있습니다. 사용 설정하려면 설정에서 GPU를 선택하세요.
사용자 시간 보기
맞춤 성능 측정값을 얻으려면 사용자 시간을 사용하고 타이밍 트랙으로 타이밍을 시각화하면 됩니다. 자세한 내용은 User Timing API를 참고하세요.
텍스트 로드의 경과 시간을 계산하는 데모 페이지를 확인해 보세요.
사용자 시간을 보려면 다음 단계를 따르세요.
performance.mark()를 사용하여 애플리케이션에서 장소를 표시합니다.performance.measure()를 사용하여 표시 사이에 경과된 시간을 측정합니다.- 실적을 기록합니다.
- 시간 트랙에서 측정값을 확인합니다. 트랙이 표시되지 않으면 설정에서 사용자 시간을 확인하세요.
- 세부정보를 보려면 트랙에서 시간을 클릭하세요.
UI 맞춤설정
타임라인 및 트랙을 맞춤설정하려면 패널의 설정 아이콘을 클릭하고 원하는 옵션을 선택합니다.
녹음 파일 내보내기
기록을 저장하려면 내보내기 를 클릭합니다.
녹음 파일 가져오기
녹음 파일을 로드하려면 Import 를 선택합니다.
녹음 파일 삭제
녹음 파일을 삭제하려면 다음 단계를 따르세요.
- 삭제를 클릭합니다. 확인 대화상자가 열립니다.
- 대화상자에서 삭제를 클릭하여 삭제를 확인합니다.