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