Critical Rendering Path(크리티컬 렌더링 패스)란?

critical rendering path

토스 세션 영상을 보면서 찾아본 용어이다.
대충 짐작은 가지만 처음 들어보는 용어였기에 한 번 찾아보았다.

---

크리티컬 렌더링 패스(Critical Rendering Path)는 웹 페이지의 초기 로드 시각과 사용자에게 내용이 표시되는 시간에 영향을 주는 일련의 단계이다. 웹 페이지를 표시하는 데 필요한 리소스를 가져오고 처리하는 과정을 의미한다.

크리티컬 렌더링 패스는 몇 가지의 단계로 구성된다.

1. HTML 파싱
   브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다. DOM은 Document Object Model의 약자로 문서의 구조와 컨텐츠를 표현하는 객체 트리이다.

2. CSS 파싱
   브라우저는 CSS 파일 및 내장 스타일을 파싱하여 CSSOM(CSS Object Model)트리를 생성한다. CSSOM은 문서의 스타일 정보를 표현하는 객체 트리이다.

3. 렌터 트리 구성
   DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 렌터 트리는 화면에 표시되는 요소와 스타일 정보를 포함한다.

4. 레이아웃
   렌더 트리의 각 요소에 대해 위치와 크기를 계산하여 레이아웃을 수행한다. 이 단계에서 화면에 어떻게 요소를 배차할 것인지 결정한다.

5. 페인팅
   레이아웃 단계에서 계산된 위치와 크기를 기반으로 렌더링 엔진이 실제로 화면에 픽셀을 그린다.

크리티컬 렌더링 패스에서 성능 최적화가 중요한 이유

사용자가 페이지 초기 로드를 기다리는 동안 페이지가 렌더링되는 시간을 최소화하기 위함이다. 만약 초기 로드 속도가 5초를 초과하면 사용자의 이탈율은 급격히 늘어난다는 통계가 있다. 나 또한 로드 속도가 길어지면 이상이 있다고 생각하고 뒤로가기 버튼이나 브라우저를 닫는 경우가 상당히 많으니 말이다.
결국 최적화를 통해 사용자의 경험을 향상시키고 페이지 로딩 속도를 개선할 수 있다.

최적화 방법

HTML과 CSS를 최적화하고, 리소스의 압축과 캐싱, 자바스크립트의 비동기 로드 및 실행 등 다양한 방법으로 최적화가 가능하다.

 

 

끗!