[렌더링 병목] 웹페이지가 느려지는 이유

728x90

렌더링 병목 

웹페이지가 아무리 멋지게 만들어져 있어도, 스크롤이 끊기거나 애니메이션이 버벅거리는 등의 브라우저 성능 저하로 인해 사용자는 불편을 느낍니다. 이런 퍼포먼스 저하의 대부분은 렌더링 병목(Rendering Bottleneck)에서 발생합니다. 렌더링 병목이란 브라우저가 화면을 그리는 과정에서 특정 단계가 지나치게 오래 걸려 브라우저 전체 성능을 떨어뜨리는 현상을 말합니다. 이는 주로 불필요한 연산, 과도한 DOM 변경, 복잡한 스타일 계산, 비효율적인 스크립트 실행 등에서 비롯됩니다.

이 글에서는 브라우저 렌더링 파이프라인의 각 단계별 병목 지점을 상세히 살펴보고, 어떤 작업이 병목을 유발하는지, 이를 줄이기 위한 실전적인 최적화 전략까지 다뤄보겠습니다.

 

---

1.  브라우저 렌더링 파이프라인 요약

렌더링 병목을 이해하기 위해서는 먼저 브라우저가 웹페이지를 렌더링하는 기본 흐름을 알아야 합니다. 이 과정을 Critical Rendering Path (CRP)라고도 부릅니다.

HTML → DOM 생성 → CSSOM 생성 → Render Tree → Layout → Paint → Composite

 

1. DOM 생성 : HTML을 파싱하여 문서 객체 모델(DOM) 트리 구성
2. CSSOM 생성 : CSS 파싱하여 스타일 규칙 트리 구성
3. Render Tree 구성 : DOM + CSSOM → 실제 그릴 요소 트리 구성
4. Layout (Reflow) : 각 요소의 위치와 크기 계산
5. Paint (Repaint) : 픽셀로 변환 (색, 그림자, 이미지 등)
6. Composite : 모든 레이어를 조합하여 화면에 그리기

 

---

2.  렌더링 병목 지점별 문제 원인과 예시

a.  Layout 단계 병목 (Reflow)

발생 원인

• DOM 구조가 깊거나 요소 수가 지나치게 많은 경우
• offsetHeight, clientWidth 등 레이아웃 관련 프로퍼티 연속 사용
• DOM 요소의 위치/크기를 자주 변경할 때 (style.top, style.width 등)

대표 예시

const height = element.offsetHeight; // 강제 reflow 발생
element.style.height = height + 10 + "px"; // 또다시 레이아웃 트리거

해결 방법

• DOM 변경을 묶어서(batch) 처리
• CSS transform, opacity 속성 사용 (Layout 무관)
• 레이아웃 계산 값을 캐싱해서 중복 접근 방지

b.  Paint 단계 병목 (Repaint)

발생 원인

• 색상, 배경, 테두리, 그림자 등 스타일 변경
• 자주 변경되는 요소의 복잡한 그래픽 처리

대표 예시

.box {
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  background: linear-gradient(to right, red, yellow);
}

→ 이와 같은 시각 효과는 페인트 연산 비용이 큽니다.

해결 방법

• 시각 효과는 꼭 필요한 곳에만 제한
• 불필요한 애니메이션 효과 최소화
• 고비용 스타일은 별도의 레이어로 분리 (will-change 사용)

c.  Composite 단계 병목 (합성 단계)

발생 원인

• 여러 레이어를 동시에 병합하거나 GPU 처리 과부하
• 복잡한 3D transform, fixed 요소 다수 사용

대표 예시

.wide-container {
  will-change: transform; /* 과도한 will-change */
}

→ 많은 요소에 will-change를 남발하면 오히려 성능 저하 유발

해결 방법

• will-change는 꼭 필요한 요소에만 사용
• GPU-friendly 속성만 사용 (transform, opacity 중심)
• backface-visibility : hidden; 등 하드웨어 가속 유도 기법 활용

 

---

3.  렌더링 병목 감지 및 도구 활용 - Chrome DevTools

a.  Performance 탭

• 프레임 단위로 Paint, Layout 시간 측정
• Long Task 및 스크립트 병목 시각화

b.  Layers 탭

• 얼마나 많은 레이어가 생성되었는지 확인 가능
• 불필요한 레이어 확인 및 제거 유도

c.  Rendering 탭 (Developer Settings)

• Paint Flashing : 화면 갱신 영역 시각화
• FPS Meter : 프레임 속도 확인

 

---

4.  실전 렌더링 최적화 전략 요약

전략	설명
DOM 접근 최소화	DOM 요소 조작 전 캐싱
레이아웃 변경 줄이기	transform/opacity 위주로 변경
스타일 변경 묶어서 처리	연속적인 스타일 변경 시 reflow 방지
애니메이션 속성 최적화	left/top 대신 translateX/Y 사용
GPU 가속 적절히 사용	will-change, backface-visibility 등 활용
DevTools로 성능 점검	Paint 영역, FPS, Composite 확인

 

---

5.  마무리

렌더링 병목은 성능 저하의 숨은 원인으로, 사용자가 체감하는 페이지 응답성과 직결됩니다. 병목은 주로 DOM 조작 과다, 복잡한 스타일 변경, 과도한 레이어 생성에서 발생하며, 이를 피하기 위해서는 브라우저 렌더링 과정을 정확히 이해하고 최적화 전략을 실천하는 것이 중요합니다.

애니메이션이나 인터랙션이 많은 사이트일수록 렌더링 병목은 치명적일 수 있으니, 항상 성능을 모니터링하고, 사전에 병목 요인을 제거하는 습관을 들여야 합니다.

함께 보면 좋은 자료

블로그 글 :

[브라우저 렌더링 성능 최적화] 렌더링 지연 최소화 전략

 

---