3. CRP와 관련된 리소스

브라우저가 초기 렌더링 작업을 수행하기 위해서는 먼저 몇 가지 필수 리소스(Critical resources)들을 다운받아야 함

따라서 필수 리소스인 것과 필수 리소스가 아닌 것을 먼저 구분해보면,

1. 필수 리소스(Critical resources)

HTML 일부 리소스

브라우저는 다음과 같은 리소스는 기다리지 않음

HTML 파일 전체(HTML은 스트리밍 형태로 받아 처리함)
폰트, 이미지 → 폰트나 이미지는 초기 렌더링 단계 이후, 나중에 채워넣어지는 부가적인 컨텐츠로 처리되기 때문에 초기 렌더링 과정을 지연시키지 않음

다만, 렌더링 초기에 공간이 비어있거나, 이미지가 차지할 영역을 미리 확보해두지 않을 경우, 레이아웃이 밀리는 현상(CLS)이 발생할 수 있음

<head> 요소 밖에 작성된 JavaScript
→ 렌더링을 차단하지 않음,
ex. HTML <body> 요소 최하단에 작성된 <script>
<head> 요소 밖에 작성된 CSS
→ 렌더링을 차단하지 않음
그 외 현재 뷰포트(viewport)에 적용되지 않는 media 속성의 CSS

초기 렌더링을 막는 핵심 병목?

초기 렌더링을 막는 핵심 병목은 <head> 안의 CSS와 JS이며, 브라우저는 HTML을 받는 즉시 렌더링을 시도하지만, 화면을 그리는 데 필수적이라고 판단한 리소스는 잠시 기다림

초기 렌더링(CRP)의 핵심 병목
1.렌더링을 차단하는 CSS
2.파싱 작업을 차단하는 JS
→ CSS와 JS는 CRP에 꼭 필요한 필수 리소스(Critical resources)

Note

<head> 내 요소

<head> 요소는 CRP에서 필수 리소스를 구분하는 중요 기준,

<head>는 페이지의 메타데이터(렌더링에 필요한 정보)와 필수 리소스들(css, js)을 포함하고 있음

브라우저가 컨텐츠를 렌더링하기 위해서는 <body>에 작성된 컨텐츠와 <head>에 작성된 메타데이터 및 필수 리소스가 필요함

다만 <head>에 있는 모든 리소스가 초기 렌더링에 꼭 필요한 것은 아님
→ ex. 폰트