기본적으로, CSS는 렌더링 차단 리소스(render blocking resource) 입니다. CSS를 파싱하여 CSSOM이 생성될 때까지 브라우저는 렌더링하지 않습니다. 렌더 트리를 이용하여 레이아웃과 페인팅을 하기 때문에, 렌더 트리를 만들 때 사용되는 HTML과 CSS 는 둘 다 렌더링 차단 리소스 입니다.

CSS는 렌더링 차단 리소스 이기 때문에, 최초 렌더링에 걸리는 시간을 최적화하려면 CSS를 간단하게 만들고 클라이언트에 최대한 빠르게 다운로드 되어야 합니다.

*미디어 유형미디어 쿼리를 사용하면 일부 CSS 리소스를 렌더링 비차단 리소스로 표시할 수 있습니다. 브라우저는 차단 리소스이든 비차단 리소스이든 상관없이 모든 CSS 리소스를 다운로드 합니다.*

미디어 유형, 미디어 쿼리 사용

페이지가 인쇄될 때나 대형 모니터에 출력하는 경우 등 몇 가지 특수한 경우에만 사용되는 CSS가 있다면, 해당 CSS가 렌더링을 차단하지 않는 것이 좋습니다. 이 경우에 미디어 쿼리를 사용하면 CSS 리소스를 렌더링 비차단 리소스로 표시할 수 있습니다.

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="print.css"    rel="stylesheet" media="print">
<link href="portrait.css" rel="stylesheet" media="orientation:landscape">
<link href="other.css"    rel="stylesheet" media="min-width: 40em">

렌더링 차단 리소스를 만나 렌더링이 차단된 경우, 페이지의 초기 렌더링을 보류만 할 뿐 항상 리소스를 다운로드 합니다. 즉, 어느 경우든지 비차단 리소스의 우선순위가 낮더라도 브라우저는 항상 CSS 리소스를 다운로드 합니다.

<aside> 💡 초기 브라우저가 로드 되면서 렌더링 차단 리소스 : 렌더 트리가 만들어져서 렌더링 되어야 하므로 렌더링이 차단된다.

렌더링 비차단 리소스 : 아직 렌더 트리가 만들어질 필요가 없으므로 렌더링이 비차단된다.

</aside>