정의
"페이지를 열면 왜 바로 안 보이고 잠깐 하얀 화면이 뜨지?", "무엇을 줄여야 첫 화면이 더 빨리 뜨지?"를 이해하고 개선하고 싶을 때 쓰는 개념이다.
Critical Rendering Path(CRP, 임계 렌더링 경로)는 브라우저가 받은 HTML, CSS, JavaScript를 화면의 실제 픽셀로 바꾸기까지 반드시 거쳐야 하는 최소 단계들의 순서다. 이 경로에 오래 걸리는 작업(렌더 차단 리소스)이 끼면 그만큼 첫 화면이 늦게 뜬다.
왜 필요한가
같은 페이지인데도 어떤 사이트는 열자마자 내용이 뜨고, 어떤 사이트는 몇 초간 빈 화면만 보인다. 이 차이는 대개 브라우저가 첫 픽셀을 그리기 전에 기다려야 하는 리소스가 얼마나 많은가에서 온다.
브라우저는 CSS를 다 받아 해석하기 전에는 화면을 그리지 않고(스타일이 확정되지 않으면 잘못 그리게 되므로), <head> 안의 일반 <script>를 만나면 그 스크립트를 받아 실행할 때까지 HTML 파싱을 멈춘다. 그래서 "어떤 리소스가 첫 화면을 붙잡고 있는지"를 CRP 단계로 짚어야, 무엇을 지연시키거나 인라인하거나 선로딩할지 판단할 수 있다.
동작 원리
브라우저는 대략 다음 순서를 거친다.
- DOM(Document Object Model, HTML을 브라우저가 다룰 수 있는 트리 구조로 바꾼 것) 구성 — HTML을 파싱해 노드 트리를 만든다.
- CSSOM(CSS Object Model, CSS를 트리 구조로 바꾼 것) 구성 — CSS를 파싱해 각 요소에 적용될 스타일 규칙 트리를 만든다.
- Render Tree(렌더 트리) 구성 — DOM과 CSSOM을 합쳐, 실제로 화면에 보일 요소만(예:
display: none은 제외) 스타일과 함께 모은다. - Layout(레이아웃, 리플로우라고도 함) — 각 요소가 화면에서 차지할 정확한 위치와 크기를 계산한다.
- Paint(페인트) — 계산된 요소들을 픽셀(색·텍스트·이미지)로 칠한다. 여러 레이어를 합치는 Composite(합성) 단계가 뒤따르기도 한다.
핵심은 순서가 있다는 점이다. CSSOM이 완성되기 전에는 Render Tree를 만들 수 없고, Render Tree 없이는 Layout·Paint로 넘어갈 수 없다. 그래서 CSS는 기본적으로 렌더 차단(render-blocking) 리소스(다 받기 전에는 화면을 못 그리게 막는 리소스)로 취급된다. 일반 <script>는 파싱을 멈추게 하는 파서 차단(parser-blocking) 리소스다.
실무 적용
- 첫 화면에 꼭 필요한 CSS만 우선 확보한다. 나머지 CSS·JS는 지연 로딩한다.
<script>에는 상황에 맞게defer(HTML 파싱을 막지 않고 문서 파싱이 끝난 뒤 순서대로 실행)나async(막지 않고 받는 대로 실행)를 붙여 파서 차단을 피한다.- 첫 화면(above-the-fold, 스크롤 없이 처음 보이는 영역)에 쓰이는 히어로 이미지·주요 폰트만 선로딩(preload)한다.
- 굳이 첫 화면에 필요 없는 큰 라이브러리는 동적 import로 잘라 나중에 불러온다.
트레이드오프
- CSS를 인라인으로 넣으면 요청 하나가 줄어 첫 페인트가 빨라질 수 있지만, 파일 캐시 재사용을 포기하게 된다 — 첫 화면용 최소 CSS에만 적용하는 편이 무난하다.
async스크립트는 빨리 실행되지만 실행 순서가 보장되지 않는다. 순서가 중요하면defer를 쓴다.- 리소스를 많이 preload하면 정작 중요한 리소스의 대역폭을 빼앗을 수 있으므로, 선로딩은 정말 첫 화면에 필요한 것만 골라야 한다.
사용하면 안 되는 경우
- CRP 최적화는 "첫 화면 표시 속도"를 겨냥한 작업이다. 이미 첫 화면이 충분히 빠르고 병목이 데이터 요청·런타임 자바스크립트 쪽이라면, CRP 단계를 더 손대기보다 그쪽을 봐야 한다.
- 첫 화면 콘텐츠가 본질적으로 클라이언트 데이터에 의존해 늦게 채워지는 경우, CSS/JS 차단만 줄여도 체감이 크지 않을 수 있다.
흔한 실수
- 모든 CSS를
<head>에서 한꺼번에 불러와, 첫 화면과 무관한 스타일까지 렌더를 차단하게 두기. <head>의 일반<script>에defer/async를 빼서, 스크립트를 받는 동안 HTML 파싱이 멈추는 것을 눈치채지 못하기.- Layout이 반복적으로 다시 계산되는(레이아웃 스래싱) 패턴을 만들어, 첫 페인트 이후에도 렌더가 느려지기.
관련 개념
- largest-contentful-paint — CRP가 짧을수록 유리한 대표 지표(가장 큰 요소가 그려지는 시점)