CRP - Critical Rendering Path

CSS를 공부하면서 나는 별생각 없이 JS를 통해 앨리 먼트의 CSS를 조작하고는 하였다.
그러다가 내가 좋아하는 유튜버의 강의를 듣다가 CRP라는 것을 알게 되었다.

CRP란?

CRP란 Critical Rendering Path의 줄임말로 한국어로 번역하자면 중요 렌더링 경로라고 한다.

중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다.
중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

이를 간단하게 설명하자면 우리가 웹을 첫 로딩하면 총 6단계를 거쳐서 우리 눈에 보이게 된다. 

이때 크게 2개로 나눌 수 있는데 1~3단계는 Construction 단계, 4~6단계는 Operation단계로 나눌 수 있다. 

Construction 단계

이 단계는 최종적으로 Render Tree를 만들게 된다. 

1단계 - Dom [Request/Response]

Html을 읽어 DOM트리로 변환하게 된다. 

즉 코드를 읽어 내려가면서 각각의 태그를 읽으면서 tree를 만들게 된다.

2단계 - CSSOM [loading]

1단계 생성된 Dom은 페이지의 모든 콘텐츠를 포함하고 있다면 CSSOM은 DOM을 스타일링하기 위한 스타일 정보를 포함하게 된다. 

DOM구조는 점진적으로 증가하지만 CSSOM은 완료가 될 때까지 페이지의 렌더링을 막아버리는데 이러한 이유는 CSS가 규칙을 덮어쓸 수 있기 때문이다. 

이 말을 간단하게 설명하자면 상위 노드에 CSS 규칙을 선언하였다면 이는 하위 노드에 종속(Cascade) 또는 상속 이 되는데 반대로 하위 노드에서 이전 규칙들을 덮어 쓰일 수도 있다. 그렇기에 나중에 덮어쓰여질 노드를 미리 렌더링 하는 것은 안되기 때문에 완전히 분석될 때까지 렌더링을 막아야 한다. 

3단계 - Render Tree

1단계에서 생성된 DOM tree와 CSSOM을 렌더 트리로 결합한다. 

렌더 트리를 구성하기 위해 Dom트리의 최상단(root)부터 시작하여 모든 노드에 어떤 CSS 규칙을 적용할지 결정하게 된다. 

Html의 구조에는 Head태그가 존재하는데 이는 렌더 트리에서 제외된다. 그러한 이유는 Head의 경우 사용자에게 보이지 않기 때문에 렌더 트리에서 제외되는 것이다. 

또한 CSS를 통해 특정 엘리먼트를 `display: none`을 하게 된다면 이 또한 렌더트리에서 제외되게 된다. 

Operation 단계

이 단계에서는 사용자에게 보여주기 위해 렌더트리에 스타일을 적용하는 단계이다.

4단계  - Layout

해당 단계에서는 페이지에 배치되는 위치와 방법, 각 요소의 너비와 높이, 그리고 엘리먼트 간이 위치를 결정하는 단계이다. 

5단계 - Paint

페인트 과정은 이전에 만들어 놓은 레이아웃을 바로 브라우저에 그리는 것이 아닌, 레이아웃을 레이어로 세분화하여 생성해 놓는다. 

이때 레이어로 세분화하여 나누는 이유는 특정 요소의 CSS가 변경이 되었을 때 레이어가 없다면 모든 요소를 다시 업데이트해줘야 하는데 레이어로 인해 모든 요소를 업데이트하지 않고 특정한 요소만 업데이트를 해주는 것이 가능하다. 

6단계 - Composition

해당 단계는 이전 단계에서 생성해놓은 레이어를 순서대로 페이지에 표기를 해주는 단계이다. 

 

비교

https://csstriggers.com/

CSS Triggers List - What Kind of Changes You Can Make

해당 사이트는 CSS의 성능을 보기 쉽게 표로 보여주는 사이트이다. 

예를 들어 Margin의 경우 모든 칸이 다 차있는 것을 볼 수 있다. 

이는 처음 로딩될 때 paint, layout, composit 현상이 모두 일어나고, 이후에 변경이 될 때도 paint,layout,composit 현상이 모두 실행된다는 것을 알려주고 있다. 

 

진짜일까?

나는 위의 표를 보고 실제인지 확인해보고자 간단하게 코드를 짜고, 성능을 확인해보았다. 

먼저 Left의 경우 처음에는 paint,layout,composit 현상이 모두 일어나고,

추후에 이벤트로 인해 left가 변경되면 paint,layout,composit 현상이 모두 재실행된다고 나와있었다. 

퍼포먼스 창을 확인해보니 실제로 Layout Shift가 발생하는 것을 볼 수 있었다. 

그리고 나는 left를 translateX로 변경을 해보았다. 

translateX는 left와 같이 처음에는 paint,layout,composit 현상이 모두 일어나지만 추후에 변경은 composit만 일어난다고 나와있었다.

그리고 퍼포먼스 창을 확인하니 정말로 빨간색 경고는 하나도 안 나와있던 것을 볼 수 있었다.

마무리

기존에 CSS를 작성할 때는 CRP를 생각하지 않고 내가 좀 더 편하고 손이 많이 가는 것을 사용해왔다.

하지만 CRP를 알게 된 계기로 CSS를 작성할 때 어떻게 하면 layout shift를 덜 발생시키게 하면서 성능이 좋은 웹을 만들 수 있을까를 생각해보게 되었고, CSS에 대하여 좀 더 깊게 생각해보게 되는 계기가 되었다.