Critical rendering path는 브라우저가 HTML, CSS, JS를 화면의 픽셀로 바꾸기 위해 실행하는 단계의 연속입니다. 첫 페인트 이전에 반드시 끝나야 하는 모든 것이 렌더 차단(render-blocking) 요소입니다.
단계
- HTML 파싱 → DOM 트리 구축.
- 파싱 → CSSOM 트리 구축.
<script>는 다운로드되고 실행되는 동안 HTML 파싱을 멈춥니다.<!-- 파싱 차단: 브라우저가 계속하기 전에 여기서 대기 -->
<script src="/app.js"></script>
<!-- defer: 병렬로 다운로드, HTML 파싱 후 순서대로 실행 -->
<script src="/app.js" defer></script>
<!-- async: 병렬로 다운로드, 준비되는 즉시 실행 (순서 보장 안 됨) -->
<script src="/analytics.js" async></script>
DOM을 다루는 앱 코드에는 defer를, 애널리틱스 같은 독립적인 스크립트에는 async를 사용하세요. 중요한 CSS는 인라인하고 나머지는 차단 없이 로드하세요.
이것은 거의 모든 로드 시간 개선의 배경이 되는 사고 모델입니다. 렌더 차단 CSS/JS는 느린 첫 페인트와 나쁜 LCP의 최대 원인입니다. defer/async가 왜 존재하는지 아는 것은 단순한 문법이 아니라 브라우저를 이해하고 있음을 보여줍니다.