본문 중간의 쿠팡 추천 상품 구매시 쿠팡 파트너스에서 일정액의 수수료를 제공받습니다.
HTML blocking 속성은 특정 리소스나 문서 일부가 준비될 때까지 렌더링을 기다리게 하는 속성입니다. 현재 표준에서 널리 설명되는 토큰은 render이며, 주로 <head> 안의 중요한 스타일시트나 스크립트가 첫 화면 전에 준비되어야 할 때 검토합니다.
결론부터 말하면 blocking="render"는 성능을 무조건 빠르게 만드는 옵션이 아닙니다. 오히려 첫 화면 표시를 늦출 수 있습니다. 이 속성은 "이 리소스가 준비되기 전에는 화면을 보여 주면 안 된다"는 의도를 명시할 때 쓰는 장치에 가깝습니다.
blocking 속성은 무엇을 뜻할까
WHATWG HTML 표준은 blocking attribute를 외부 리소스 가져오기 같은 조건이 끝날 때까지 특정 작업을 막는 속성으로 정의합니다. 가능한 blocking token은 표준에서 정의되며, 현재 설명되는 핵심 토큰은 render입니다.
render 토큰은 요소가 잠재적으로 render-blocking이 될 수 있음을 나타냅니다. 즉 브라우저가 해당 요소를 render-blocking 요소 집합에 넣으면 문서의 첫 렌더링이 그 요소의 조건을 기다릴 수 있습니다.
<link rel="stylesheet" href="/critical.css" blocking="render">
이 예시는 스타일시트가 첫 화면의 모양을 결정하고, 그 스타일이 적용되기 전의 화면 깜박임을 피해야 할 때 검토할 수 있는 형태입니다. 다만 일반적인 <head> 안의 stylesheet는 파싱 중 발견되면 기본적으로 렌더링을 막을 수 있으므로, 정적 HTML에 습관적으로 붙이는 속성은 아닙니다.
어떤 요소에서 의미가 있을까
MDN과 HTML 표준 문서를 기준으로 보면 blocking은 주로 <link>, <style>, <script>에서 확인합니다. 하지만 요소마다 조건이 다릅니다.
| 요소 | 대표 조건 | 확인할 점 |
|---|---|---|
<link> |
rel="stylesheet" 또는 rel="expect"와 함께 사용 |
<head> 안에서 렌더 차단 의미가 생김 |
<style> |
스타일 적용과 critical subresource 준비를 기다릴 수 있음 | <head> 안의 style만 렌더 차단 대상이 될 수 있음 |
<script> |
스크립트가 실행될 때까지 렌더링을 기다리게 할 수 있음 | 일반 classic script는 기본적으로 렌더링이 아니라 파싱을 막는다는 차이를 봐야 함 |
핵심은 위치입니다. 렌더 차단은 첫 렌더링 전의 <head> 단계와 연결됩니다. 이미 <body>가 파싱된 뒤 동적으로 넣는 리소스는 첫 화면 렌더링을 같은 방식으로 막는다고 기대하면 안 됩니다.
동적 리소스에서 왜 중요할까
blocking="render"가 특히 헷갈리는 지점은 동적으로 추가되는 리소스입니다. 정적 HTML을 파싱하면서 발견한 <head> 안의 stylesheet는 기본적으로 렌더링을 막을 수 있습니다. 반면 script로 나중에 추가한 stylesheet나 style은 브라우저가 같은 의도로 판단하지 않을 수 있습니다.
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "/theme.css";
link.blocking = "render";
document.head.append(link);
이런 코드는 테마 CSS나 초기 UI에 꼭 필요한 CSS를 런타임에 결정해야 하는 구조에서 검토할 수 있습니다. 다만 이 방식은 첫 화면 표시를 지연시킬 수 있으므로, 실제로 차단이 필요한 CSS인지 먼저 분리해야 합니다.
preload, fetchpriority와 무엇이 다를까
blocking, preload, fetchpriority는 모두 리소스 로딩과 관련되어 보이지만 목적이 다릅니다. 이 차이를 섞으면 첫 화면 성능 튜닝이 오히려 불명확해집니다.
| 기능 | 목적 | 선택 기준 |
|---|---|---|
blocking="render" |
준비 전 렌더링을 막음 | 미완성 화면을 보여 주면 안 되는 경우 |
rel="preload" |
필요한 리소스를 미리 가져오게 함 | 곧 사용할 리소스의 발견 시점을 앞당기는 경우 |
fetchpriority |
리소스 요청 우선순위 힌트를 줌 | LCP 후보 이미지처럼 상대적 우선순위를 조정하는 경우 |
preload는 가져오는 시점을 앞당기는 힌트이고, fetchpriority는 우선순위 힌트입니다. 반면 blocking은 조건이 끝날 때까지 렌더링을 기다리게 하는 의미가 있으므로 사용자에게 화면이 늦게 보일 수 있습니다.
실무 적용 기준
첫째, 첫 화면에 반드시 필요한 리소스인지 확인합니다. 로고 아래의 보조 위젯, 접힌 영역의 스타일, 나중에 열리는 모달 스크립트는 렌더링을 막을 후보가 아닙니다.
둘째, 정적 HTML에서 이미 렌더 차단으로 처리되는 리소스인지 봅니다. <head> 안의 기본 stylesheet는 별도 속성 없이도 렌더링에 영향을 줍니다. blocking="render"는 의도를 명확히 하거나 동적 삽입에서 동작을 지정해야 할 때 더 의미가 큽니다.
셋째, 지원 범위를 확인합니다. MDN은 관련 DOM blocking 속성을 일부 브라우저에서 제한적으로 지원되는 기능으로 표시합니다. 오래된 WebView, 사내 브라우저, 특정 모바일 앱 내장 브라우저까지 포함한다면 실제 대상 환경에서 확인해야 합니다.
넷째, 차단 시간이 길어지지 않게 합니다. 렌더 차단 리소스가 크거나 네트워크가 느리면 빈 화면 시간이 늘어날 수 있습니다. critical CSS를 작게 유지하고, 나머지 CSS와 스크립트는 지연 로딩하거나 일반 로딩 흐름으로 분리하는 편이 안전합니다.
자주 묻는 질문
blocking="render"를 넣으면 페이지가 빨라질까
그렇지 않습니다. 이 속성은 렌더링을 기다리게 할 수 있으므로 첫 화면이 더 늦어질 수도 있습니다. 성능 개선 목적이라면 먼저 리소스 크기, 캐시, preload, 지연 로딩, critical CSS 분리를 검토해야 합니다.
모든 stylesheet에 붙이면 안전할까
권장하기 어렵습니다. 첫 화면에 필요하지 않은 stylesheet까지 렌더링을 막으면 사용자에게 빈 화면이 길게 보일 수 있습니다. 화면 표시 전에 반드시 적용되어야 하는 작은 리소스에만 제한적으로 검토하는 편이 낫습니다.
script의 blocking은 defer나 async와 같은 기능일까
다릅니다. defer와 async는 스크립트 다운로드와 실행 시점을 조정합니다. blocking="render"는 스크립트 실행 전 렌더링을 기다리게 할 수 있다는 점에서 목적이 다릅니다.
정리
HTML blocking 속성은 첫 렌더링 전에 반드시 준비되어야 하는 리소스나 문서 조건을 명시하는 도구입니다. 현재 핵심 토큰은 render이며, 주로 <head> 안의 <link>, <style>, <script>와 함께 검토합니다.
실무 기준은 단순합니다. 미완성 화면을 보여 주면 안 되는 작은 핵심 리소스에만 제한적으로 쓰고, 단순 성능 개선 목적으로 남용하지 않습니다. preload나 fetchpriority처럼 가져오기 순서를 조정하는 기능과도 목적을 분리해서 봐야 합니다. 이 글은 2026년 8월 19일 기준 WHATWG HTML 표준과 MDN 문서를 바탕으로 정리했습니다.
'프로그래밍 > HTML, Javascript, CSS' 카테고리의 다른 글
| CSS @starting-style 기준 (0) | 2026.08.16 |
|---|---|
| CSS content-visibility 기준 (0) | 2026.08.14 |
| HTML commandfor 속성 기준 정리 (0) | 2026.08.11 |
| HTML hidden until-found 속성 기준 정리 (1) | 2026.08.05 |
| HTML fetchpriority 속성 기준 정리 (0) | 2026.08.03 |