[개발자 도구] 크롬 개발자 도구 활용법 (3)

▤ 목차

Performance 메뉴는 웹 페이지의 런타임 성능을 심층적으로 분석하는 데 사용된다.

페이지 로드 과정 및 사용자와의 상호작용(새로고침, 클릭 등)시 발생하는 렌더링 속도, 애니메이션 속도, 응답 대기 시간 등을 시각화하여 나타낸다.

이를 통해 성능 병목 현상과 렌더링 문제의 원인을 찾는 데 도움을 줄 수 있다.

---

1. Performance 메뉴 활용법

1. 기록 시작(Record)

2. 원하는 페이지 동작 수행  

녹화가 시작되면 측정하고자 하는 상호작용을 수행한다. (예: 새로고침, 애니메이션 재생, 버튼 클릭 등)

3. 기록중지

기록 중지: 원하는 활동이 끝났거나 충분한 시간이 지났다면, Stop을 클릭하여 기록을 중지하고 결과를 처리한다. 

4. 성능 분석 결과 확인

보고서는 여러 섹션으로 나뉘어 시간 경과에 따른 페이지 활동을 보여준다.

---

2. Performance 메뉴 분석

녹화가 끝나면 복잡한 타임라인이 나타난다.

각각 색상의 의미는 이렇다.

🟨 노란색 막대	JavaScript 함수 실행	• JavaScript 함수 실행 • 이벤트 리스너 • 예: onClick, setTimeout
🟪 보라색 막대	스타일 및 레이아웃 계산	• Recalculate Style (스타일 재계산) • Layout (레이아웃 계산) • Update Layer Tree
🟩 초록색 막대	화면 그리기	• Paint (페인트) • Composite Layers (합성) • Rasterize (래스터화)
🔵 파란색 막대	파싱 및 평가	• Parse HTML (HTML 파싱) • Parse Stylesheet • Evaluate Script
⚫ 검은색 막대	스크립트 컴파일	• Compile Script (스크립트 컴파일) • V8 엔진 최적화
🔴 빨간색 삼각형	경고 표시!	• Long Task (50ms 이상 실행) • 메인 스레드 블로킹 • 즉시 최적화 필요! ⚠️

 

---

• FPS (Frames Per Second): 막대가 낮아지거나 붉은색이 보이면 '프레임 드랍(버벅임)'이 발생했다는 뜻이다. 
  ├─ 초록색 (높은 막대): 60 FPS 유지 - 매끄러운 애니메이션 ✅
  ├─ 노란색 (중간 막대): 30-60 FPS - 약간 버벅임 ⚠️
  └─ 빨간색 (낮은 막대): 30 FPS 이하 - 심각한 프레임 드랍 ❌  
• CPU: 어떤 작업(스크립팅, 렌더링, 페인팅)이 CPU를 점유했는지 색상별로 보여준다.

---

• Main (메인 스레드): 브라우저의 메인 스레드에서 실행된 함수 호출 스택을 보여준다.
• Flame Chart(폭포수 차트): 아래로 갈수록 하위 함수이다. 붉은색 삼각형 표시가 있는 막대는 Long Task로, 최적화가 필요하다.

---

• Summary (요약): 하단 탭에서 전체 시간 중 자바스크립트(Scripting), 화면 그리기(Rendering) 등이 차지하는 비중을 보여준다.
• Summary 하단 탭:
  ├─ 🟨 Scripting: JavaScript 실행 시간
  ├─ 🟪 Rendering: 스타일/레이아웃 계산
  ├─ 🟩 Painting: 화면 그리기
  ├─ 🔵 System: 브라우저 시스템 작업
  ├─ ⚪ Idle: 유휴 시간
  └─ 🔴 Other: 기타 작업
• Bottom-Up : 탭에서 실행 시간이 가장 오래 걸린 함수를 내림차순으로 정렬하여 우선순위를 파악할 수 있다

---

3. Performance 활용법

1. Long Task와 정크(Jank) 현상 해결

화면이 뚝뚝 끊기는 현상(Jank)을 정확하게 분석할 수 있다.

메인 스레드에서 50ms 이상 걸리는 작업은 사용자 입력을 방해하며, 이를 Long Task라고 부른다.

Performance 도구는 이러한 Long Task가 발생하는 정확한 시점을 빨간색 삼각형으로 표시하여, 어떤 JavaScript 함수가 병목을 일으키는지 명확히 알려준다.

 

구체적인 활용:

• Flame Chart에서 빨간 삼각형이 표시된 막대를 클릭하면 해당 함수명과 소스 코드 위치를 확인할 수 있다
• Bottom-Up 탭에서 실행 시간이 가장 오래 걸린 함수를 내림차순으로 정렬하여 우선순위를 파악할 수 있다

---

2. 레이아웃 스래싱(Layout Thrashing) 감지

JavaScript로 DOM 스타일을 변경한 직후 위치나 크기 값을 읽을 때 발생하는 강제 동기 레이아웃(Forced Reflow)을 정확히 찾아낸다.

이는 브라우저가 예정에 없던 레이아웃 계산을 즉시 수행하도록 강제하여 성능을 크게 저하시킨다.

Performance 타임라인에서 보라색 Layout 막대가 반복적으로 나타나고 경고 표시가 뜨면, 레이아웃 스래싱이 발생하고 있다는 신호다.

 

구체적인 활용:

• 타임라인에서 "Recalculate Style"과 "Layout"이 짧은 시간 내에 반복되는 패턴을 찾을 수 있다
• 경고 아이콘을 클릭하면 "Forced reflow is a likely performance bottleneck" 메시지와 함께 문제가 되는 코드 라인을 보여준다
• getBoundingClientRect(), offsetHeight 같은 레이아웃 속성 읽기를 최소화하거나 캐싱하여 성능을 개선할 수 있다

---

3. 핵심 웹 지표(Core Web Vitals) 측정

Performance 도구는 구글이 정의한 사용자 경험 핵심 지표를 시각적으로 측정하고 분석할 수 있게 해준다.

LCP (Largest Contentful Paint):

• 페이지에서 가장 큰 콘텐츠 요소(이미지, 텍스트 블록 등)가 화면에 렌더링되는 시점을 정확히 확인할 수 있다
• 타임라인 상단에 "LCP" 마커가 표시되며, 해당 시점을 클릭하면 어떤 요소가 LCP로 측정되었는지 알 수 있다
• 이상적인 LCP는 2.5초 이내이며, 이를 초과하면 최적화가 필요하다

CLS (Cumulative Layout Shift):

• 페이지 로딩 중 예상치 못한 레이아웃 이동이 발생하는 시점과 정도를 스크린샷과 함께 확인할 수 있다
• 이상적인 CLS는 0.1 이하이며, 광고나 동적 콘텐츠 삽입 시 주로 발생한다

INP (Interaction to Next Paint):

• 사용자가 페이지와 상호작용한 순간부터 그 결과가 화면에 실제로 그려지기까지의 시간을 측정하는 지표다.

Performance 도구의 Summary 탭과 Timings 섹션에서 이러한 모든 지표를 한눈에 파악할 수 있으며, Lighthouse와 병행하여 사용하면 더욱 정확한 성능 진단이 가능하다.

 

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.