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