Antigravity Agent
4.5 KiB
4.5 KiB
렌더링 차단 리소스(Render-blocking resources)
📌 Brief Summary
렌더링 차단 리소스란 브라우저가 화면에 페이지를 그리는 렌더링 과정을 일시적으로 중단하게 만드는 핵심 웹 리소스를 뜻합니다 [1]. 대표적인 예인 CSS는 스타일이 적용되지 않은 화면(FOUC)이 사용자에게 노출되는 것을 막기 위해 CSSOM이 완전히 구성될 때까지 렌더링을 막습니다 [2, 3]. 동기적으로 실행되는 JavaScript 또한 HTML 파서를 멈추게 만들어 결과적으로 렌더링을 차단합니다 [4, 5]. 이러한 리소스들을 비동기 처리하거나 다운로드를 지연시키는 등 최적화하는 것은 초기 페이지 로드 속도와 웹 성능을 향상시키는 핵심 요소입니다 [6, 7].
📖 Core Content
- CSS의 렌더링 차단 원리: 브라우저가 문서 파싱 중 일부 외부 리소스 요청을 만나면 해당 에셋이 처리될 때까지 렌더링을 중단합니다 [8]. CSS는 기본적으로 렌더링 차단 리소스로 동작하는데, 그 이유는 나중에 로드된 스타일 규칙이 이전 규칙을 덮어씌울 수 있기 때문에 브라우저가 CSSOM(CSS Object Model)을 완성하기 전까지 화면 렌더링을 보류해야 하기 때문입니다 [3]. 이는 사용자가 스타일이 입혀지지 않은 HTML 원본을 보게 되는 '스타일 없는 콘텐츠의 번쩍임(FOUC)' 현상을 방지하기 위한 안전장치입니다 [2].
<head>태그 내에 존재하는 렌더링 차단 리소스는 사실상 페이지 전체의 렌더링을 차단합니다 [9]. - 파서 차단(Parser-blocking)과 JavaScript: JavaScript는 기본적으로 파서를 차단하는 리소스입니다 [5]. 스크립트 실행 과정에서 DOM이나 CSSOM이 어떻게 변경될지 알 수 없으므로, 브라우저는 실행이 완료될 때까지 HTML 파싱을 중단합니다 [5, 10]. 파싱이 막히면 브라우저는 그 이후의 콘텐츠에 접근해 렌더링할 수 없기 때문에, 파서 차단 리소스는 결과적으로 렌더링도 차단하게 됩니다 [11].
- 차단 우회 및 최적화 방법:
- CSS의 경우
<link>요소에media="print"와 같이 현재 뷰포트 조건과 일치하지 않는 미디어 속성을 지정하면 렌더링을 차단하지 않도록 만들 수 있습니다 [12]. - JavaScript의 경우
<script>태그에async또는defer속성을 추가하여 파서와 렌더링이 막히는 것을 방지할 수 있습니다 [5, 13]. - 중요하지 않은 리소스의 다운로드를 지연시키고, CSS 선택자 특이성을 최적화하거나 축소(minifying)하여 전체 차단 시간을 줄여야 합니다 [6, 14].
- 최신 기술로는 Chrome 105부터 도입된
blocking=render속성을 통해 파서는 계속 진행하도록 두면서 명시적으로 렌더링만 차단하게 설정할 수도 있습니다 [5].
- CSS의 경우
- 측정 및 식별: WebPageTest, Lighthouse 등과 같은 성능 감사 도구는 렌더링 차단 리소스를 식별하는 기능을 제공합니다. 이를 통해 어떤 리소스가 실제 페이지 렌더링을 지연시키고 있는지 찾아내어 최적화의 단서로 삼을 수 있습니다 [15].
🔗 Knowledge Connections
- Related Topics: 핵심 렌더링 경로(Critical Rendering Path), CSSOM(CSS Object Model), 파서 차단 리소스(Parser-blocking resources), FOUC(Flash of Unstyled Content)
- Projects/Contexts: 웹 성능 최적화(Web Performance Optimization), Lighthouse 성능 감사
- Contradictions/Notes: 소스에 따르면 CSS가 렌더링을 차단한다고 해서 브라우저의 모든 작업이 중지되는 것은 아닙니다. 브라우저는 CSS를 다운로드하고 렌더링을 일시 정지한 상태에서도 나머지 HTML을 계속 처리하며 할 수 있는 다른 작업(예: 리소스 탐색 등)을 수행하여 효율성을 높입니다 [12]. 또한, 과거에는 렌더링 차단 리소스가 페이지 전체 렌더링을 막았으나 최근 브라우저(Firefox, Chrome)는 렌더링 차단 리소스 아래에 있는 콘텐츠의 렌더링만 차단하도록 동작 방식이 개선되었습니다 [9].
Last updated: 2026-04-25