# [[Render-Blocking Resources]]

## 📌 Brief Summary
렌더링 차단 리소스(Render-Blocking Resources)는 웹 페이지의 주요 콘텐츠가 화면에 시각적으로 표시되는 과정(painting)을 지연시키거나 막는 요소들을 의미한다 [1, 2]. 대표적으로 비동기 처리되지 않은 동기식 CSS 및 JavaScript 파일, 그리고 최적화되지 않은 웹 폰트가 포함된다 [2]. 이러한 리소스의 로딩을 지연시키거나 제거하는 것은 초기 로딩 속도를 높이고 사용자 경험 및 핵심 웹 바이탈(Core Web Vitals)을 개선하는 데 필수적인 작업이다 [1, 3, 4].

## 📖 Core Content
- **주요 렌더링 차단 요소:** 브라우저의 렌더링을 차단하는 주된 병목 요소로는 동기식으로 로드되어 화면 페인팅을 막는 CSS 파일, `async`나 `defer` 속성 없이 삽입된 JavaScript 코드, 그리고 적절한 로딩 전략 없이 사용된 웹 폰트가 있다 [2, 5].
- **핵심 웹 바이탈(Core Web Vitals)에 미치는 영향:** 
  - 렌더링 차단 리소스는 LCP(최대 콘텐츠 풀 페인트) 성능을 저하시키는 주요 병목 현상 중 하나이다 [5, 6].
  - 렌더링을 차단하는 스크립트를 최소화하거나 지연시키지 않으면 FID(최초 입력 지연)와 INP(다음 페인트에 대한 상호작용) 지표가 급격히 악화될 수 있다 [4]. 
  - 첫 텍스트나 이미지가 그려지는 FCP(최초 콘텐츠 풀 페인트)를 최적화하기 위해서도 해당 리소스를 최소화해야 한다 [7].
- **최적화 전략 및 구현 방법:**
  - 웹사이트의 주요 콘텐츠가 가능한 한 빠르게 표시되도록 비핵심(non-critical) CSS와 JavaScript의 로딩을 뒤로 미루어야(defer) 한다 [1].
  - 성능 테스트의 심층 분석(Deep Dive Analysis) 단계에서 폭포수(waterfall) 분석 도구 등을 통해 렌더링을 차단하는 리소스를 적극적으로 식별해 내야 한다 [8, 9].
  - 렌더링 차단 리소스를 성공적으로 제거하면 애플리케이션의 로딩 속도를 평균적으로 400ms가량 개선할 수 있다 [10, 11].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Interaction to Next Paint (INP)]], [[First Contentful Paint (FCP)]]
- **Projects/Contexts:** [[웹 성능 및 속도 최적화 (Web Performance Optimization)]], [[프론트엔드 렌더링 최적화]]
- **Contradictions/Notes:** 제공된 소스들 간에 모순되는 내용은 없으며, 모든 문서가 사용자 경험과 검색 엔진 최적화(SEO) 향상을 위해 렌더링 차단 리소스의 제거 또는 지연이 필수적임을 일관되게 강조하고 있습니다.

---
*Last updated: 2026-04-26*