이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Jecelyn Yeen

Sofia Emelianova

실적 통계 패널을 사용하여 웹사이트 실적에 관한 활용 가능한 사용 사례 기반 통계를 확인합니다.

개요

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

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

새 패널을 사용해야 하는 이유

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

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

소개

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

성능 통계 패널 열기

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

또는 명령어 메뉴를 사용하여 실적 통계 패널을 엽니다.

실적 기록

성능 통계 패널에서는 일반 및 사용 사례 기반 (예: 페이지 로드) 성능을 기록할 수 있습니다.

새 탭에서 이 데모 페이지를 열고 페이지에서 실적 통계 패널을 엽니다.
기록하는 동안 네트워크와 CPU를 제한할 수 있습니다. 이 튜토리얼에서는 캐시 사용 중지를 선택하고 드롭다운 메뉴에서 CPU를 4배 감속으로 설정합니다.

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

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

공연 녹화 다시 재생하기

하단의 컨트롤을 사용하여 녹화 파일의 재생을 제어합니다.

다시 재생 컨트롤

다음은 방법을 보여주는 예입니다.

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

공연 기록 탐색하기

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

타임라인을 확대/축소하고 좌우로 이동하려면 해당하는 탐색 버튼을 사용합니다.

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

또는 단축키를 사용할 수 있습니다. 바로가기를 보려면 버튼을 클릭하세요.

단축키를 사용하는 경우 마우스 커서를 기반으로 확대/축소합니다.

성능 통계 보기

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

유용한 정보 창

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

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

통계 세부정보

Web Vitals 성능 측정항목 보기

웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 품질 신호에 관한 통합 가이드를 제공하기 위한 Google의 이니셔티브입니다.

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

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

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

최대 콘텐츠 페인트 지연 시간 확인

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

LCP 기준점

좋은 LCP 점수는 2.5초 이하입니다.

페이지에서 콘텐츠가 가장 큰 페인트를 렌더링하는 데 시간이 더 오래 걸리는 경우 타임라인에 노란색 정사각형 또는 빨간색 삼각형과 함께 LCP 배지가 표시됩니다.

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

세부정보 창

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

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

타이밍 분류

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

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