게시일: 2025년 4월 2일
Chrome DevTools의 성능 패널은 매우 강력하며 사이트의 런타임 동작에서 발생할 수 있는 거의 모든 문제에 관한 데이터를 포함합니다. 하지만 이렇게 방대한 데이터는 부담이 될 수 있습니다. 많은 개발자가 어디서부터 시작해야 할지 파악하기 어려울 수 있으며, 전문가도 복잡한 페이지 로드 내에서 특정 문제를 파악하는 데 어려움을 겪을 수 있습니다.
Lighthouse와 같은 도구는 성능 트레이스를 분석하고 잠재적인 문제와 해결 방법을 간결하게 나열한 목록을 보고하여 이 문제를 해결하기 위해 개발되었습니다. 하지만 이 방법에는 단점도 있습니다. 세부정보와 연결되어 있지 않으면 문제 발생 시점이 서로 상대적으로 언제인지 파악하기 어려울 수 있습니다. 전체 트레이스 내 컨텍스트를 이해하려면 성능 패널에서 처음부터 시작해야 합니다.
새로운 통계 사이드바는 Lighthouse 통계를 성능 패널에 직접 가져와 이 간극을 메웁니다. 이제 트레이스를 볼 때 패널에 바로 추천이 표시되지만, 더 중요한 것은 통계를 통해 성능 타임라인에 이벤트를 강조 표시하고 설명을 직접 오버레이할 수 있다는 점입니다. 통계에 마우스를 가져가면 확대하고 트레이스의 관련 부분을 강조 표시하거나, 중요 경로를 시각화하거나, 전체 컨텍스트 내에서 성능 병목 현상을 신고할 수 있습니다.
통계 사이드바 사용하기
Chrome 131에서 초기 통계와 함께 추가된 새로운 사이드바는 이미 눈치채셨을 수도 있습니다. 이후 새로운 Chrome이 출시될 때마다 더 많은 통계가 추가되었습니다.
이를 보려면 성능 패널에서 기록을 누르고 URL을 로드하거나 페이지와 상호작용한 다음 녹화를 중지합니다. 이전에 사이드바를 닫은 경우 성능 패널의 왼쪽으로 접혀 있을 수 있습니다. 버튼을 클릭하면 성능 문제를 조사하기 위한 진입점 역할을 하는 통계 목록이 표시됩니다.
Lighthouse 보고서와 마찬가지로 사이드바에는 방금 녹화한 동영상에 대한 통계가 표시되며, 성능 또는 UX 문제를 식별하거나 문제를 직접 필터링하고 진단하는 데 도움이 되는 데이터가 제공됩니다. 하단에는 접힌 통과한 통계 섹션이 있습니다. 이 섹션에는 특정 성능 문제가 발생하지 않았거나 통계가 전혀 적용되지 않았기 때문에 (예: 페이지와의 상호작용 트레이스를 추적했지만 탐색하지 않은 경우) 이 녹화본에 문제가 없는 것으로 확인된 통계가 표시됩니다.
마지막으로 녹화한 트레이스에 여러 페이지로의 탐색이 포함된 경우 각 페이지에 고유한 통계가 표시되므로 이를 통해 각 탐색을 개별적으로 조사할 수 있습니다. URL 옆에 있는 아이콘을 클릭하면 타임라인 보기가 해당 페이지에 있는 동안 발생한 트레이스 부분으로 확대됩니다.
페이지 로드 통계
빠른 페이지 로드는 우수한 사용자 환경을 위해 필수적이며 최대 콘텐츠 페인트 (LCP)는 페이지 로드 측정에 중점을 둔 Core Web Vitals입니다. 통계 사이드바에는 LCP 개선을 위한 전용 통계와 LCP 이외의 페이지 로드 측면에 관한 통계가 표시됩니다.
LCP 통계
LCP를 이해하고 개선하려면 LCP까지의 시간을 4개의 하위 부분으로 나누고 개별적으로 해결하는 접근 방식인 LCP 단계부터 시작하는 것이 좋습니다.
왼쪽의 통계 탭에서 단계별 LCP를 클릭하면 각 하위 섹션에서 소비된 시간의 세부정보가 통계 탭에 표시됩니다. 통계 탭에서 각 하위 섹션 위로 마우스를 가져가거나 클릭하면 실적 타임라인의 각 하위 섹션이 강조 표시되거나 확대되어 해당 기간의 이벤트를 조사할 수 있습니다. 필드 데이터가 사용 설정되어 있고 사이트에서 이미지 LCP 로드 데이터를 사용할 수 있는 경우 하위 요소의 75번째 백분위수 값도 통계에 포함됩니다.
LCP 요청 탐색은 웹에서 LCP에 영향을 미치는 가장 일반적인 문제 중 하나인 LCP 리소스를 로드하는 방법을 개선하는 방법을 제안합니다. 이미지를 로드할 수 있었던 시점과 절약할 수 있었던 예상 로드 시간을 표시하는 주석으로 타임라인을 오버레이합니다.
추가 통계를 통해 LCP 하위 요소 내의 문제를 파악할 수 있습니다. 문서 요청 지연 시간은 서버에 대한 탐색 요청의 잠재적 최적화를 강조 표시합니다. 렌더링 차단 요청은 콘텐츠 (예: LCP)가 표시될 준비가 되었더라도 완료될 때까지 페이지의 초기 렌더링을 차단하는 요청을 나타냅니다.
LCP 이외의 페이지 로드 통계
추가 통계를 통해 LCP 외에도 전반적인 페이지 로드 속도에 영향을 미칠 수 있는 잠재적 문제를 파악할 수 있습니다.
가장 큰 문제 중 하나는 서드 파티 리소스의 성능입니다. 비즈니스적인 이유로 필요한 경우가 많지만 웹 개발자는 이러한 광고의 실적을 직접적으로 제어할 수 있는 방법이 거의 없습니다. 서드 파티 통계는 퍼스트 파티 및 서드 파티 항목별로 리소스와 CPU 활동을 분류하여 가장 많은 시간과 리소스를 소비한 항목을 보여줍니다. 각 항목 위로 마우스를 가져가면 실적 및 네트워크 타임라인 내에서 해당 항목의 활동이 강조표시됩니다. 이 통계는 '서드 파티 어둡게 표시' 체크박스 및 요약 탭의 새 퍼스트 파티/서드 파티 항목과 함께 작동합니다.
글꼴 표시에는 글꼴 로드 중에 텍스트가 표시되지 않도록 font-display: swap 또는 optional를 사용할 수 있었던 글꼴이 표시됩니다.
네트워크 종속 항목 트리는 페이지 로드 내에서 긴 종속 항목 체인을 식별합니다. 여기서 리소스 A는 리소스 B를 로드하고 리소스 B는 리소스 C를 로드하며 C는 페이지의 모양이나 기능에 중요합니다. 각 종속 요청은 특히 연결 상태가 좋지 않은 사용자의 경우 전체 체인을 로드하는 데 상당한 지연 시간을 추가할 수 있습니다.
마지막으로 이미지 리소스의 경우 이미지 전송 개선을 사용하면 상당히 최적화할 수 있는 이미지를 식별하여 불필요한 추가 바이트를 가져오는 데 상당한 다운로드 시간을 낭비할 수 있습니다.
응답성 통계
다음 페인트에 대한 상호작용 (INP)은 LCP와 마찬가지로 하위 부분으로 분류할 수 있습니다. 단계별 INP 통계는 실적 타임라인에 오버레이를 추가하여 이러한 하위 부분을 강조 표시하므로 기본 스레드 활동과의 직접적인 관계를 확인할 수 있습니다.
페이지를 업데이트하는 상호작용은 스타일과 레이아웃을 다시 계산하는 데 많은 시간을 소비하는 경우가 많습니다. 스타일과 레이아웃에 걸리는 시간을 가장 잘 예측하는 방법 중 하나는 총 노드 수와 트리 깊이 모두에서 DOM의 크기를 확인하는 것입니다. DOM 크기 최적화는 페이지의 DOM 크기를 보고하고 DOM 크기가 커서 성능이 저하되었을 가능성이 높은 이벤트를 강조 표시합니다.
강제 리플로는 응답성에 대한 일반적인 위협에 대해 알립니다. 브라우저가 레이아웃을 실행해야 하는 DOM에 대한 읽기와 쓰기가 교차되는 경우입니다. 예를 들어 DOM에 새 요소를 추가한 다음 화면의 일부 요소 크기를 읽는 DOM 함수를 호출하는 경우입니다. DOM의 두 부분이 서로의 레이아웃에 영향을 주지 않는다고 해도 명시적인 콘텐츠 포함이 없으면 두 부분 간의 알 수 없는 종속 항목으로 인해 브라우저에서 전체 페이지의 레이아웃을 다시 설정해야 할 수 있습니다.
이제 웹의 대부분의 페이지는 명시적인 모바일 뷰포인트를 설정하지만, 그렇지 않은 경우 브라우저가 추가 입력을 기다리는 동안 클릭할 때마다 수백 밀리초가 더 소요될 수 있습니다. 표시 영역이 올바르게 설정되지 않으면 모바일용으로 표시 영역 최적화 통계 알림이 표시됩니다.
마지막으로 CSS 선택자 통계 사용 설정 (느림) 옵션을 선택하면 스타일 재계산 성능 개요를 제공하는 CSS 선택자 비용 통계가 표시됩니다. 이 통계를 확인하려면 CSS 선택자 통계 사용 설정 (느림) 옵션을 사용 설정해야 하지만 이 옵션을 사용하면 페이지 성능이 크게 저하됩니다.
레이아웃 안정성에 관한 통계
누적 레이아웃 이동 (CLS)은 타임라인 내에 자체 레이아웃 이동 트랙을 가져와 CLS 점수를 계산하는 데 사용되는 최대 5초의 기간 (클러스터)으로 그룹화된 개별 이동을 보여줍니다.
레이아웃 변경 원인 통계는 최악의 CLS 클러스터를 강조 표시하고 그 안에 있는 개별 레이아웃 변경을 나열합니다. 목록 또는 트랙의 각 시프트 위로 마우스를 가져가면 애니메이션 오버레이로 시프트를 시각화하는 페이지의 스크린샷이 표시됩니다.
결론
통계는 Lighthouse의 기능을 성능 패널의 전체 컨텍스트로 가져와 트레이스를 더 쉽게 이해하고 출처 데이터와 통계를 연결하는 것을 목표로 합니다.
YouTube는 현재 통계를 적극적으로 개선하고 있으며 더 많은 통계를 제공할 예정입니다. 통계 사이드바를 사용해 보고 개선할 수 있는 사항이나 확인하고 싶은 다른 통계가 있는지 의견을 알려주세요.