렌더링 탭에 있는 성능 관련 옵션에 관한 이 참조 문서를 통해 렌더링 성능 문제를 살펴보세요.
페인트 플래시로 다시 페인트칠한 영역 강조표시
이 옵션을 사용 설정하면 다시 페인트할 때마다 Chrome에서 화면이 녹색으로 깜박입니다.
다시 칠할 영역을 보려면 다음 단계를 따르세요.
다른 페이지에서 전체 화면이 녹색으로 깜박이거나 화면에서 페인트해야 한다고 생각하지 못한 화면 영역이 보이면 더 자세히 조사해 보세요.
레이아웃 변경 영역 강조표시
레이아웃 변경은 예기치 않은 다시 페인트를 유발하며 짜증을 낼 뿐만 아니라 유해할 수 있습니다.
페이지에서 레이아웃 변경의 위치와 시간을 보려면 다음 단계를 따르세요.
렌더링 탭을 열고 Layout Shift regions를 선택합니다.
페이지를 새로고침하세요. 레이아웃 변경 영역은 잠시 보라색으로 강조표시됩니다.
레이어 테두리가 있는 레이어 및 타일 보기
레이어 테두리를 사용하여 페이지 상단에 레이어 테두리 및 타일의 오버레이를 표시합니다.
레이어 테두리를 사용 설정하려면 다음 단계를 따르세요.
- 렌더링 탭을 열고 레이어 테두리를 선택합니다.
- 주황색과 올리브색의 레이어 테두리와 청록색인 타일을 관찰합니다.
색상 구분에 관한 설명은 debug_colors.cc의 주석을 참고하세요.
프레임 렌더링 통계를 통해 실시간으로 초당 프레임 보기
프레임 렌더링 통계는 표시 영역의 오른쪽 상단에 표시되는 오버레이입니다.
프레임 렌더링 통계를 여는 방법은 다음과 같습니다.
- 렌더링 탭을 열고 프레임 렌더링 통계 체크박스를 사용 설정합니다.
- 페이지 오른쪽 상단에서 통계를 확인합니다.
프레임 렌더링 통계 오버레이에는 다음 정보가 표시됩니다.
- 페이지 실행 시 초당 프레임 수의 실시간 추정치입니다.
- 세 가지 프레임 유형이 있는 도표로 표시된 프레임 타임라인
- 렌더링된 프레임 (파란색 선)
- 부분적으로 표시된 프레임 (노란색 선)
- 드롭된 프레임 (빨간색 선)
- GPU 래스터의 상태: 사용 또는 사용 안함. 자세한 내용은 GPU 래스터화 수행 방법을 참조하세요.
- GPU 메모리 사용량: 사용된 메모리 수 및 최대 메모리 MB입니다.
스크롤 성능 문제 파악
스크롤 성능 문제를 사용하면 페이지 성능을 저하시킬 수 있는 스크롤과 관련된 이벤트 리스너가 있는 페이지 요소를 식별할 수 있습니다.
문제가 될 수 있는 요소를 보려면 다음 단계를 따르세요.
- 렌더링 탭을 열고 스크롤 성능 문제를 확인합니다.
- 잠재적으로 문제가 될 수 있는 요소가 강조 표시된 것을 관찰합니다.
코어 웹 바이탈 보기
웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 품질 신호에 관한 통합 가이드를 제공하기 위한 Google의 이니셔티브입니다.
코어 웹 바이탈은 웹 바이탈의 하위 집합으로, 모든 웹페이지에 적용됩니다. 각 코어 웹 바이탈은 사용자 경험의 고유한 측면을 보여주고, 현장에서 측정 가능하며, 중요한 사용자 중심 결과의 실제 경험을 반영합니다. 코어 웹 바이탈의 특징은 다음과 같습니다.
- 최대 콘텐츠 렌더링 시간 (LCP): 로드 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.
- 다음 페인트에 대한 상호작용 (INP): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 INP가 200밀리초 이하여야 합니다.
- 누적 레이아웃 변경 (CLS): 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 CLS를 0.1. 이하로 유지해야 합니다.
웹 바이탈 Chrome 확장 프로그램을 사용하여 페이지의 코어 웹 바이탈 값을 확인합니다.