개발자도구 Performance 살펴보기

지금까지 개발을 하면서 기능 구현에만 집중하다 보니 성능 최적화에 신경 쓸 여유가 없었다. 그러다 보니 브라우저 개발자 도구의 Performance 탭에 대해 잘 알지 못했고, 실제로 활용해 본 적도 없었다. 하지만 최근 웹 성능 최적화에 관심을 가지면서 처음으로 Performance 탭을 직접 사용해 보았다.
아직 Network 탭만큼 익숙하게 다루지는 못하지만, 공부할 겸 Performance탭을 정리해 보려고 한다.

이번엔 Performance 탭에 대해 살펴보자!

🙄Performance 탭이란?

개발자도구의 퍼포먼스 탭은 웹 애플리케이션의 성능을 분석하고 최적화할 수 있는 도구로, 웹 페이지의 로딩 및 사용자 상호작용 과정에서 발생하는 모든 작업(스크립트 실행, 렌더링, 이벤트 처리 등)을 시각적으로 확인할 수 있다.
이 탭을 사용하면 성능 병목 구간을 찾아내고, 페이지 로드 속도 및 렌더링 성능을 개선할 수 있다. 특히, 애니메이션, 스크롤 성능, 자바스크립트 실행 최적화 등 다양한 성능 문제를 디버깅하는 데 유용하다.

✅Performance 탭 살펴보기

1. 녹화 버튼 (●)

• 성능 기록을 시작한다. 클릭하면 녹화가 시작되고, 다시 클릭(■)하면 녹화가 중지된다.

2. Record and Reload (🔄)

• 페이지를 새로고침하면서 자동으로 성능 데이터를 기록한다. 초기 로드 성능을 분석할 때 유용하다.

3. Clear 버튼 (⊘)

• 이전에 기록한 성능 데이터를 지우고 초기화한다.

4. Download 버튼 (⬇)

• 녹화된 성능 데이터를 파일로 다운로드한다. 나중에 분석하거나 공유할 때 사용할 수 있다.

5. Screenshots

• 성능 기록 중 페이지 상태의 스크린샷을 캡처한다. 이를 통해 시간에 따른 페이지 변화를 시각적으로 확인할 수 있다.

6. Memory

• 메모리 사용량을 기록한다. 메모리 누수나 과도한 메모리 사용 문제를 분석할 때 유용하다.

✅Performance 탭 성능 기록하는 방법

성능 기록 방법에는 두 가지가 있다.

1. 녹화 버튼(●)

• 특정 사용자 상호작용(클릭, 스크롤, 애니메이션 등)이나 동작의 성능 문제를 분석
• 페이지 로드 이후 발생하는 성능 문제를 디버깅할 때 적합

사용예시

• 버튼 클릭 후 반응 시간이 느리거나 이벤트 실행 시간이 긴 경우
• 애니메이션이나 스크롤 동작이 부드럽지 않은 경우
• 특정 DOM 조작이나 JavaScript 코드의 성능 문제를 확인하고자 할 때
  
  

사용방법

1. Performance 탭을 열고 녹화 버튼(●)을 클릭한다.
2. 성능을 분석하려는 작업을 수행한다.(예: 버튼 클릭, 페이지 전환, 드래그 및 드롭 등)
3. 작업이 완료되면 녹화 버튼(■)을 클릭하여 기록을 중지한다.
4. 수집된 데이터를 분석한다.

2. Record and Reload 버튼(🔄)

• 페이지 초기 로드 성능을 분석
• 새로고침과 함께 페이지의 로딩 과정에서 발생하는 문제를 디버깅할 때 적합

사용예시

• 페이지의 초기 렌더링 시간(FCP, LCP) 문제를 분석.
• HTML, CSS, JS 등의 리소스 로드 시간 최적화.
• 서버 응답 시간이나 네트워크 병목 문제를 디버깅.
  
  

사용방법

1. Performance 탭을 열고 Record and Reload 버튼(🔄)을 클릭한다.
2. 페이지가 새로고침되며 성능 데이터가 자동으로 수집된다.
3. 새로고침이 완료되면 브라우저가 녹화를 중지하고 데이터를 표시한다.
4. 초기 로드와 관련된 데이터를 분석한다.

✅Performance 성능 보고서 보고 이해하기

위에 사진은 Record and Reload 버튼을 사용하여 페이지 초기 로드 성능을 분석한 성능 보고서이다.
굉장히 복잡해보이는데 아래에서 하나씩 살펴보자.

1. 상단 타임라인 (Overview)

타임라인은 페이지 로드와 상호작용 동안의 주요 성능 데이터를 요약해준다.

• CPU 타임라인: CPU 사용량을 그래프로 보여준다. CPU가 과도하게 사용되는 구간을 식별할 수 있다. JavaScript(노란색) 및 레이아웃 작업(보라색)과 같은 다양한 유형의 작업으로 인해 CPU가 얼마나 달하는지 보여준다.

• NET (Network): 네트워크 요청과 응답 시간을 보여준다.

2. 메인 작업 타임라인 (Main Section)

1. Network

네트워크 요청과 응답의 타이밍 정보를 표시하며, 각 리소스(HTML, CSS, JS, 이미지, API 요청 등)가 로드된 시간을 확인할 수 있다.

• 요청이 시작된 시간, 응답이 완료된 시간, 대기 시간 등을 시각적으로 표시
• 네트워크 지연이나 특정 리소스 로딩 시간이 오래 걸리는 문제를 진단
• 리소스가 순차적으로 로드되었는지 또는 병렬 로드되는지 확인 가능

2. Frames

브라우저가 각 프레임(화면 업데이트)을 렌더링하는 과정을 표시한다. Frames는 초당 렌더링되는 프레임(Frame Per Second, FPS)을 시각화하여 표시하며, 프레임별 작업 시간을 보여준다.

• 프레임 드롭(낮은 FPS)이 발생한 위치를 파악
• 각 프레임에서 실행된 작업(스크립트 실행, 스타일 계산, 레이아웃, 페인팅 등)의 소요 시간을 확인
• 렌더링 속도를 최적화하는 데 유용

3. Timings

페이지 로딩 중 발생한 주요 이벤트의 타이밍 정보를 표시한다.

• 페이지 로딩 성능을 평가
• DCL, FCP, LCP 간의 시간 간격을 분석하여 병목 현상을 파악

  DOMContentLoaded (DCL): DOM이 완전히 파싱된 시점
  First Paint (FP): 화면에 첫 픽셀이 렌더링된 시점
  First Contentful Paint (FCP): 텍스트나 이미지 등 페이지 콘텐츠가 처음 렌더링된 시점
  Largest Contentful Paint (LCP): 가장 큰 콘텐츠가 렌더링된 시점
  Time to Interactive (TTI): 페이지가 사용 가능한 상태가 되는 시간

4. Layout Shifts

• Cumulative Layout Shift (CLS)와 관련된 정보를 표시하며, 페이지 로딩 중 레이아웃 이동이 발생한 위치와 정도를 보여준다.
• 높은 CLS 점수는 사용자 경험을 저하시킬 수 있으므로, 이 섹션을 통해 개선 방안을 모색이 필요하다.

5. Main

메인 스레드(Main Thread)에서 실행된 작업들을 타임라인 형식으로 보여준다.

• 작업이 오래 걸리는 영역(병목 현상)을 분석
• 스크립트, 스타일 계산, 레이아웃 작업 중 어떤 부분에서 시간이 많이 소요되는지 파악
• 메인 스레드가 막히는 구간을 찾아 최적화

작업 범주

HTML 파싱 (Parse HTML): HTML 파일을 파싱하여 DOM을 생성하는 작업.
Script 실행 (Evaluate Script): JavaScript 코드 실행 작업.
Style 계산 (Style): CSS 계산 작업.
레이아웃 계산 (Layout): DOM 요소들의 위치와 크기 계산.
페인팅 및 합성 (Painting, Compositing): 요소를 화면에 렌더링

3. 하단 탭들

Summary

• 기록된 성능 데이터의 전체적인 작업 시간 분포를 요약하여 보여주는 섹션이다.
• 페이지 로드나 사용자 작업이 실행되는 동안 CPU가 소모한 시간을 기반으로, 각각의 작업이 얼마나 많은 비율을 차지하는지 시각적으로 파악할 수 있다.
• 원형 차트를 통해 각 작업(Loading, Scripting, Rendering, Painting 등)이 전체 시간에서 차지하는 비율을 한눈에 확인할 수 있다.

원형 차트 색상 의미

연한 파란색 (Loading): HTML, CSS, JavaScript, 이미지 등 리소스를 네트워크를 통해 다운로드하는 데 사용된 시간
노란색 (Scripting): JavaScript 파일을 실행하고, 이벤트 핸들러를 처리하며, 동적으로 DOM을 조작하는 작업에 소요된 시간
보라색 (Rendering): CSS 스타일을 계산하고 DOM을 레이아웃 작업으로 변환(Layout), 화면에 표시하기 위해 준비하는 과정
초록색 (Painting): 픽셀 데이터를 생성하고 이를 화면에 그리는 작업
진한 회색 (System): 브라우저의 시스템 내부 처리 시간으로, 개발자가 직접 최적화하기 어려운 영역
연한 회색 (Idle): CPU가 작업을 하지 않고 대기한 시간, Idle 시간이 높다면 리소스 사용이 효율적이라는 신호일 수 있음
흰색(Total): 모든 작업의 총합 시간을 표시, 위 이미지의 경우 총 작업 시간은 약 3123ms로, 페이지 로딩 완료까지 걸린 시간을 나타냄

Summary 활용 방법
병목 지점(가장 많은 시간을 차지하는 작업)을 확인하여 최적화가 필요한 부분을 우선적으로 파악할 수 있다.

• Scripting이 많다 → JavaScript 최적화 필요.
• Rendering이 많다 → DOM 구조를 간소화하거나 스타일 최적화 필요.
• Loading이 많다 → 네트워크 요청 병렬화, 리소스 크기 최적화 필요.

Bottom-up

• 성능 기록 데이터를 가장 낮은 레벨의 함수 호출에서 시작해 상위 작업까지의 시간 소비 분석을 제공한다.
• 각 함수가 얼마나 많은 시간을 소비했는지와 해당 함수가 호출 계층에서 차지하는 비율을 보여주어, 최적화가 필요한 병목 함수나 작업을 찾아내는 데 유용하다.
  
  
  
  

CallTree

• 호출 계층 구조를 계층적으로 정리해 상위 작업에서 하위 작업까지 추적한다.
• 상위 함수에서 하위 함수로 이어지는 전체 호출 경로를 확인이 가능해 특정 함수의 호출 흐름과 관련된 성능 문제를 파악하는데 유용하다.
  
  
  
  

Event Log

• 성능 기록에서 발생한 이벤트를 시간순으로 나열한 목록이다.
• 주요 이벤트(예: 스크립트 실행, 스타일 계산, DOM 변경 등)와 관련된 로그를 확인할 수 있다.
• 작업 발생 시점과 순서를 확인하고 문제 원인 추적할 때 유용하다.

Self Time: 함수 자체가 직접 소비한 시간으로 하위 함수 호출에서 소요된 시간은 포함되지 않는다. 힘수 자체의 성능 문제를 확인하는 데 유용하다.
Total Time: 특정 작업에서 소비된 총 시간으로 특정 작업 자체의 Self Time + 모든 하위 작업들의 실행 시간을 포함한다. 함수 호출이 상위 프로세스에 얼마나 영향을 미치는지 확인하는 데 유용하다.
Activity: 작업의 유형 또는 실행된 특정 활동을 나타낸다.

혹시라도 잘못된 내용이 있거나 질문사항 있으시면 댓글 남겨주세요! 어떤 댓글이든 달게 받겠습니다!