기본적으로, 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">

• 첫 번째 스타일시트 선언은 미디어 유형이나 미디어 쿼리를 제공하지 않았기 때문에 모든 경우에 적용됩니다. 즉, 항상 렌더링을 차단합니다.
• 두 번째 스타일시트 선언은 미디어 유형을 all 로 설정되었습니다. 첫 번째와 두 번째는 사실상 똑같아서 두 번째 스타일시트 또한 항상 렌더링을 차단합니다.
• 세 번째 스타일시트 선언은 미디어 유형을 사용합니다. 콘텐츠가 인쇄될 때만 적용되어 처음 로드 될 때 페이지 렌더링이 차단되지 않습니다.
• 네 번째 스타일시트 선언은 미디어 쿼리를 orientation:landscape 로 설정되었습니다. 기기의 방향이 가로일 때 렌더링을 차단합니다.
• 다섯 번째 스타일시트 선언은 미디어 쿼리를 min-width: 40em 로 설정되었습니다. 기기의 너비의 조건이 일치하면 렌더링을 차단합니다.

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

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

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

</aside>