실적 통계: 웹사이트 실적에 대한 활용 가능한 분석 정보 얻기

Jecelyn Yeen

Sofia Emelianova

성능 통계 패널을 사용하여 웹사이트 성능에 관한 실용적이고 사용 사례 중심적인 통계를 확인하세요.

개요

실적 통계 패널을 사용하면 다음 작업을 할 수 있습니다.

페이지 로드 성능을 기록하고 측정합니다.
Web Vitals 성능 측정항목 보기
네트워크 활동 보기
CPU 및 네트워크 속도를 느리게 시뮬레이션합니다.
녹음 파일 가져오기 및 내보내기

새 패널이 필요한 이유는 무엇인가요?

새로운 성능 통계 패널은 기존 성능 패널을 사용할 때 발생하는 다음 3가지 개발자 문제점을 해결하기 위한 실험입니다.

정보가 너무 많음 새롭게 디자인된 UI를 통해 성능 통계 패널은 데이터를 간소화하고 관련 정보만 표시합니다.
사용 사례를 구분하기 어려움 성능 통계 패널은 사용 사례 기반 분석을 지원합니다. 현재는 페이지 로드 사용 사례만 지원되며, 향후 의견을 바탕으로 상호작용과 같은 기능이 추가될 예정입니다.
효과적으로 사용하려면 브라우저 작동 방식에 대한 깊은 전문 지식이 필요합니다. 성능 통계 패널에는 통계 창의 주요 통계가 강조 표시되며, 문제를 해결하는 방법에 관한 실행 가능한 의견이 제공됩니다.

소개

이 튜토리얼에서는 성능 통계 패널을 사용하여 페이지 로드 성능을 측정하고 이해하는 방법을 알아봅니다. 계속해서 읽거나 위에서 이 튜토리얼의 동영상 버전을 시청하세요.

성능 통계 패널 열기

DevTools를 엽니다.
옵션 더보기 > 도구 더보기 > 성능 통계를 클릭합니다.

또는 명령어 메뉴를 사용하여 성능 인사이트 패널을 엽니다.

실적 기록

성능 통계 패널은 일반적인 성능과 사용 사례 기반 성능 (예: 페이지 로드)을 기록할 수 있습니다.

새 탭에서 이 데모 페이지를 열고 페이지에서 성능 통계 패널을 엽니다.
녹화 중에 네트워크와 CPU를 제한할 수 있습니다. 이 튜토리얼에서는 캐시 사용 중지를 선택하고 드롭다운 메뉴에서 CPU를 4배 느리게로 설정합니다.

핵심사항: 제한은 컴퓨터의 성능과 관련이 있습니다. 예를 들어 4배 느리게 옵션을 사용하면 CPU가 평소보다 4배 느리게 작동합니다. 모바일 기기의 아키텍처는 데스크톱 및 노트북의 아키텍처와 매우 다르기 때문에 DevTools는 모바일 기기의 CPU를 실제로 시뮬레이션할 수 없습니다.
페이지 로드 측정을 클릭합니다. DevTools는 페이지가 새로고침되는 동안 성능 측정항목을 기록한 다음 페이지 로드가 완료된 후 몇 초가 지나면 자동으로 기록을 중지합니다.

핵심 사항: 웹페이지의 일반적인 성능을 측정하려면 녹화 시작을 사용하세요. 페이지와 상호작용하고 녹화 중지를 수동으로 클릭하여 녹화를 중지합니다.

실적 녹화 재생

하단의 컨트롤을 사용하여 녹화 영상의 다시보기를 제어합니다.

다시 재생 컨트롤

다음은 이 작업을 실행하는 방법의 예입니다.

재생을 클릭하여 녹화 파일을 재생합니다.
일시중지를 클릭하여 다시 보기를 일시중지합니다.
드롭다운을 사용하여 재생 속도를 조정합니다.
시각적 미리보기 전환을 클릭하여 시각적 미리보기를 표시하거나 숨깁니다.

성능 녹화 탐색

전체 녹화 타임라인을 표시하기 위해 DevTools가 자동으로 축소됩니다. 확대/축소로 녹음 파일을 탐색하고 타임라인을 이동할 수 있습니다.

타임라인을 확대/축소하고 왼쪽과 오른쪽으로 이동하려면 다음 탐색 버튼을 사용하세요.

타임라인을 클릭하여 플레이헤드를 이동하고 특정 프레임을 확인합니다.
하단의 확대 및 축소 컨트롤을 클릭하여 확대/축소합니다. 이 경우 플레이헤드를 기준으로 확대/축소합니다.
하단의 가로 스크롤바를 드래그하여 타임라인을 좌우로 이동합니다.

또는 단축키를 사용할 수 있습니다. 버튼을 클릭하여 단축키를 확인합니다.

단축키를 사용하면 마우스 커서를 기준으로 확대/축소됩니다.

성능 통계 보기

통계 창에서 성능 통계 목록을 확인합니다. 잠재적인 성능 문제를 식별하고 수정합니다.

통계 창

각 통계 위로 마우스를 가져가면 기본 트랙에서 통계가 강조 표시됩니다.

렌더링 차단 요청과 같은 통계를 클릭하여 세부정보 창에서 엽니다. 문제를 자세히 알아보려면 파일, 문제, 해결 방법 섹션 등을 살펴보세요.

통계 세부정보입니다.

웹 바이탈 성능 측정항목 보기

성능 보고서는 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합된 안내를 제공하는 Google의 이니셔티브입니다.

타임라인 및 통계 창에서 이러한 측정항목을 볼 수 있습니다.

Core Web Vitals 성능 측정항목을 확인합니다.

타임라인의 통계 위로 마우스를 가져가면 측정항목에 대해 자세히 알아볼 수 있습니다.

최대 콘텐츠 페인트 지연 발견

콘텐츠가 포함된 최대 페인트 (LCP)는 Core Web Vitals 측정항목 중 하나입니다. 페이지에서 처음 로드를 시작한 시점을 기준으로 표시 영역 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고합니다.

LCP 기준점

양호한 LCP 점수는 2.5초 이하입니다.

페이지의 최대 콘텐츠 페인트가 렌더링되는 데 시간이 오래 걸리면 타임라인에 노란색 사각형 또는 빨간색 삼각형이 있는 LCP 배지가 표시됩니다.

세부정보 창을 열려면 타임라인 또는 오른쪽의 통계 창에서 LCP 배지를 클릭합니다. 이 창에서 지연의 잠재적 원인과 해결 방법에 대한 제안을 확인할 수 있습니다.

세부정보 창

이 예에서는 요청이 렌더링을 차단하므로 중요한 스타일을 인라인으로 적용하여 문제를 해결할 수 있습니다. 자세한 내용은 렌더링 차단 리소스 제거를 참고하세요.

LCP 렌더링 시간의 하위 부분을 보려면 세부정보 > 타이밍 분석 섹션으로 스크롤합니다.

타이밍 분석

LCP 렌더링 시간은 다음 하위 부분으로 구성됩니다.

LCP 하위 파트	설명
첫 바이트까지의 시간 (TTFB)	사용자가 페이지 로드를 시작한 시점부터 브라우저가 HTML 문서 응답의 첫 번째 바이트를 수신할 때까지의 시간입니다.
리소스 로드 지연	TTFB와 브라우저가 LCP 리소스 로드를 시작한 시점 간의 차이입니다.
리소스 로드 시간	LCP 리소스 자체를 로드하는 데 걸리는 시간입니다.
요소 렌더링 지연	LCP 리소스가 로드를 완료한 시점부터 LCP 요소가 완전히 렌더링될 때까지의 시간입니다.