CRP 프로세스
CRP 프로세스 정의
웹개발에서 CRP(Critical Rendering Path)는 브라우저가 HTML, CSS, 자바스크립트를 화면에 픽셀로 변환하는 일련의 단계를 의미한다. 이 과정은 웹페이지가 사용자에게 어떻게 보여지는지를 결정짓는 중요한 요소로, 웹 성능 최적화에 있어서도 매우 중요한 역할을 한다. CRP를 이해하면 웹페이지의 로딩속도를 개선하고 사용자 경험을 향상시킬 수 있다.
브라우저 렌더링의 기본 원리
브라우저는 사용자가 웹페이지를 요청할 때, 서버로부터 HTML, CSS, 자바스크립트 파일을 받아온다. 이 파일들은 브라우저의 렌더링 엔진에 의해 처리되어 최종적으로 화면에 표시된다. 이 과정에서 브라우저는 HTML을 DOM으로 변환하고, CSS를 CSSOM으로 변환한다. 이 두 가지 모델은 렌더트리를 생성하는 데 사용되며, 이후 레이아웃단계와 페인트단계를 거치고, 렌더링된 요소들을 여러 레이어로 나누고 합성하는 컴포지트단계를 끝으로 화면에 표시되는 결과물이 만들어진다.
CRP의 단계별 과정
CRP는 다음과 같은 단계로 이루어져 있다.
- 네트워크 요청: 사용자가 웹페이지를 요청하면, 브라우저는 서버에 HTML 파일을 요청한다.
- HTML 파싱: 서버로부터 받은 HTML 파일은 브라우저에 의해 파싱되어 DOM 트리로 변환된다.
- CSS 파싱: CSS 파일도 마찬가지로 파싱되어 CSSOM으로 변환된다.
- 렌더트리 생성: DOM과 CSSOM을 기반으로 렌더트리가 생성된다. 이 과정에서 화면에 표시되지 않는 요소는 제외된다.
- 레이아웃 계산: 렌더트리를 기반으로 각 요소의 위치와 크기를 계산한다.
- 페인트: 계산된 레이아웃을 바탕으로 화면에 그려지는 페인트 과정이 진행된다.
- 컴포지트: 렌더링된 요소들을 여러 레이어로 나누고 합성하여 화면에 결과물을 나타낸다.
이 모든 과정은 사용자가 웹페이지를 요청한 순간부터 시작되어, 최종적으로 화면에 표시될 때까지의 흐름을 나타낸다.
CRP 최적화 방법
CRP를 최적화하기 위해서는 몇 가지 방법이 있는데, CSS 파일을 HTML 파일의 <head> 부분에 포함시키면, 브라우저가 HTML을 파싱하는동안 CSS도 함께 파싱할 수 있다. 또, 자바스크립트파일은 가능한 한 페이지의 하단에 위치시키는 것이 좋다. 이렇게 하면 HTML과 CSS가 먼저 로드되고, 그 후에 자바스크립트가 로드되므로 페이지의 렌더링 속도가 빨라진다.
또한, 다음과 같은 최적화 방법도 있다.
- 자원 다운로드 연기: 이미지, CSS, 자바스크립트 파일 등 웹페이지를 구성하는 자원 중에서 페이지 표시와 직접적으로 관련이 없는 자원은 나중에 로드하도록 설정한다.
- 파일 사이즈 최적화: 각 자원의 파일 크기를 줄여서 다운로드 시간을 단축한다.
- 자원의 우선순위 정하기: 페이지를 로드할 때 어떤 자원을 먼저 불러올지를 결정해서, 중요 자원은 빠르게 로드되고 덜 중요한 자원은 나중에 로드되도록 설정한다.