성능 패널을 사용하여 웹사이트의 성능을 분석합니다.
개요
성능 패널을 사용하면 웹 애플리케이션의 CPU 성능 프로필을 기록할 수 있습니다. 프로필을 분석하여 잠재적인 성능 병목 현상과 리소스 사용을 최적화하는 방법을 찾습니다.
성능 패널을 사용하여 다음을 실행합니다.
- 성능 프로필을 기록합니다.
- 캡처 설정을 변경합니다.
- 실적 보고서를 분석합니다.
웹사이트 성능 개선에 관한 포괄적인 가이드는 런타임 성능 분석을 참고하세요.
성능 패널 열기
성능 패널을 열려면 DevTools를 열고 상단의 탭 모음에서 성능을 선택합니다.
또는 다음 단계에 따라 명령어 메뉴로 성능 패널을 엽니다.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴 를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Performance panel을 입력하고 성능 패2널 표시를 선택한 후 Enter를 누릅니다.
Core Web Vitals 실시간 관찰
성능 패널을 열면 로컬 최대 콘텐츠 페인트 (LCP) 및 누적 레이아웃 이동 (CLS) 측정항목이 즉시 캡처되어 표시되고 점수 (양호, 개선 필요, 나쁨)가 표시됩니다.
페이지와 상호작용하면 성능 패널은 LCP 및 CLS 외에도 네트워크 연결 및 기기를 사용하여 페이지의 Core Web Vitals에 대한 전체 개요를 제공하는 로컬 다음 페인트에 대한 상호작용 (INP) 및 점수도 캡처합니다. 또한 단일 페이지 애플리케이션에서 클라이언트 측 소프트 탐색의 Core Web Vitals를 캡처하고 보고합니다.
상호작용 및 레이아웃 이동 탭의 세 가지 측정항목 카드 아래에는 요소, 타이밍, 단계 (상호작용), 점수 (레이아웃 이동)를 비롯하여 캡처된 상호작용 및 레이아웃 이동에 관한 정보가 포함된 표가 있습니다. 두 목록을 모두 지우려면 지우기를 클릭합니다.
측정항목 점수의 세부정보를 보려면 측정항목 값 위로 마우스를 가져가 도움말을 확인합니다.
사용자 환경과 내 환경 비교
Chrome UX 보고서에서 필드 데이터를 가져와 사이트 사용자의 환경을 로컬 측정항목과 비교할 수도 있습니다.
필드 데이터를 추가하려면 다음 안내를 따르세요.
성능 > 다음 단계 > 필드 데이터에서 설정을 클릭합니다.
필드 데이터 가져오기 구성 대화상자에서 개인 정보 보호 공개를 확인하고 확인을 클릭합니다.
고급: 개발 환경과 프로덕션 환경 간의 매핑 설정...
가장 관련성 높은 필드 데이터를 자동으로 가져오려면 개발 출처와 프로덕션 출처 간에 매핑을 설정할 수 있습니다 (여러 개).
- 대화상자 창에서 고급 섹션을 펼치고 + 새로 만들기 를 클릭합니다.
매핑 표에서 개발 및 프로덕션 URL을 입력하고 + 를 클릭합니다.
예를 들어
http://localhost:8080을https://example.com에 매핑하면localhost:8080/page1로 이동할 때example.com/page1의 필드 데이터가 표시됩니다.또한 어떤 이유로든 필드 데이터를 자동으로 가져올 수 없는 경우 아래 URL의 필드 데이터 항상 표시 를 사용 설정하고 URL을 제공할 수 있습니다. 성능 패널은 먼저 이 URL의 필드 데이터를 가져오려고 시도한 후 이동하는 페이지와 관계없이 이 필드 데이터를 표시합니다.
설정 후 필드 데이터 가져오기 설정을 변경하려면 필드 데이터 > 구성 을 클릭합니다.
필드 데이터 가져오기가 설정되면 성능 패널에 로컬 측정항목 점수와 사용자가 경험하는 점수가 비교되어 표시됩니다. 오른쪽의 필드 데이터 섹션에서 수집 기간을 확인할 수 있습니다.
측정항목 점수의 세부정보를 보려면 측정항목 값 위로 마우스를 가져가 도움말을 확인합니다.
사용자 환경과 더 일치하도록 환경 구성
이전 섹션에서 설명한 대로 필드 데이터 가져오기를 설정하면 성능 패널에서 사용자 환경과 더 일치하도록 환경을 구성하는 방법에 관한 권장사항을 제공합니다.
환경을 구성하려면 다음 안내를 따르세요.
각 측정항목 카드에서 로컬 테스트 환경 고려 섹션이 있으면 펼치고 권장사항을 읽습니다.
이 예에서는 사용자 환경과 더 일치하도록 일반적인 데스크톱 화면 크기를 사용하고 CPU와 네트워크를 제한하는 것이 좋습니다.
이 예의 환경 구성을 일치시키려면 다음 안내를 따르세요.
- 표시 영역을 일반적인 화면 크기 중 하나 (예: 720p 또는 1080p)로 설정합니다. 특정 기기 및 화면 크기를 에뮬레이션하려면 기기 모드를 요소 패널에서 사용하면 됩니다.
- 이 예의 웹사이트 사용자 중 82% 가 데스크톱을 사용하여 탐색합니다. 로컬 측정항목 점수를 올바른 필드 데이터와 비교하려면 필드 데이터 > 기기 드롭다운 목록에서 데스크톱 을 선택하면 됩니다.
- 환경 설정 섹션에서 네트워크 드롭다운 목록을 예를 들어 빠른 4G로 설정하고 CPU를 예를 들어 20배 느리게로 설정합니다. 같은 섹션에서 네트워크 캐시 사용 중지 를 선택해야 할 수도 있습니다.
환경을 구성한 후 페이지를 새로고침하고 상호작용하여 로컬 INP를 캡처한 후 측정항목 점수를 다시 비교합니다.
이제 측정항목 점수가 사용자 환경과 더 유사해졌습니다. 따라서 측정항목 카드에서 로컬 테스트 환경 고려 섹션이 사라졌습니다.
이제 웹사이트의 Core Web Vitals를 개선할 수 있습니다.
실적 보고서 캡처 및 분석
다음 섹션에서는 프로필을 기록하고, 캡처 설정을 변경하고, 보고서를 분석하는 방법에 관한 안내를 따릅니다.
성능 프로필 기록
기록할 준비가 되면 성능 패널에 다음 옵션이 표시됩니다.
캡처 설정 변경
캡처 설정 을 사용하면 DevTools에서 성능 기록을 캡처하는 방식을 변경하고 보고서에 추가 정보를 제공할 수 있습니다. 캡처 설정 을 클릭하여 캡처 설정 메뉴에 액세스합니다.
캡처 설정 메뉴에서 다음 옵션을 선택합니다.
- JavaScript 샘플 사용 중지: 녹화 중에 호출되는 기본 트랙에 표시된 JavaScript 호출 스택의 녹화를 사용 중지합니다. 성능 오버헤드가 줄어듭니다.
- 고급 페인트 계측 사용 설정 (느림): 고급 페인트 계측을 캡처합니다. 성능이 크게 저하됩니다.
- CSS 선택자 통계 사용 설정 (느림): CSS 선택자 통계를 캡처합니다. 성능이 크게 저하됩니다.
- CPU 제한: CPU 속도가 느려지는 환경을 시뮬레이션합니다.
- **네트워크 제한**: 네트워크 속도가 느려지는 환경을 시뮬레이션합니다.
- 스크린샷 캡처: 스크린샷이 사용 설정된 경우 스크린샷 프레임 크기 및 개수 제한 사전 설정을 선택합니다.
실적 보고서 분석
성능 기록 분석에 관한 전체 가이드는 성능 패널 사용 방법을 참고하세요.
다음은 가이드의 주제 그룹과 기타 유용한 문서를 보여줍니다.
보고서를 탐색하는 방법 알아보기:
Performance Insights를 사용하여 웹사이트 성능에 관한 실행 가능한 분석 정보를 확인합니다.
워크플로에 중요한 사항에 집중하는 방법 알아보기:
Bottom-up, 호출 트리, 이벤트 로그 탭 알아보기:
보고서를 분석하는 방법 알아보기:
- 기본 스레드 활동 보기
- Flame Chart 읽기
- 스크린샷 보기
- 메모리 측정항목 보기
- 기록의 일부 기간 보기
- 스타일 재계산 이벤트 중에 CSS 선택자 성능 분석
- 성능 패널로 Node.js 성능 프로파일링
- 초당 프레임 수 (FPS) 분석
- 타임라인 이벤트 참조
이러한 패널로 성능 개선
웹사이트 성능 개선에 도움이 되는 다른 패널을 알아보세요.