브라우저가 HTML, CSS, JS를 받아 화면에 첫 픽셀을 그리기까지의 과정을 이해하고 최적화하는 방법을 학습합니다.
크리티컬 렌더링 패스(CRP)는 브라우저가 서버로부터 받은 리소스를 화면에 렌더링하기까지의 핵심 경로입니다. DOM 생성, CSSOM 생성, 렌더 트리 구성, 레이아웃, 페인트 단계를 거칩니다. CRP에 포함된 리소스의 수와 크기를 최소화하면 FCP(First Contentful Paint)를 크게 단축할 수 있습니다.
각 최적화 전략을 선택하여 리소스 로딩 타임라인과 FCP가 어떻게 변하는지 비교하세요.
렌더 차단 CSS와 파서 차단 JS가 모두 <head>에 위치. CSS와 JS가 순차적으로 로드되어 렌더링이 크게 지연됩니다.
실제 코드로 동작 원리를 확인하세요.
<!-- 렌더 차단: CSS는 기본적으로 렌더를 차단합니다 -->
<head>
<!-- ❌ 렌더 차단 CSS -->
<link rel="stylesheet" href="/styles/main.css" />
<link rel="stylesheet" href="/styles/fonts.css" />
<!-- ❌ 파서 차단 JS (HTML 파싱 중단) -->
<script src="/js/app.js"></script>
</head>
<!-- 개선: media 쿼리로 조건부 로드 -->
<head>
<!-- 모든 화면에서 렌더 차단 -->
<link rel="stylesheet" href="/styles/main.css" />
<!-- print 시에만 렌더 차단 (화면 렌더링 비차단) -->
<link rel="stylesheet" href="/styles/print.css"
media="print" />
<!-- 큰 화면에서만 렌더 차단 -->
<link rel="stylesheet" href="/styles/desktop.css"
media="(min-width: 1024px)" />
</head>DOM 트리 생성 2) CSS를 파싱하여 CSSOM 트리 생성 3) DOM + CSSOM을 결합하여 렌더 트리 구성 4) Layout(리플로우)으로 위치/크기 계산 5) Paint로 실제 픽셀 그리기. CRP를 최적화하면 FCP(First Contentful Paint)를 단축할 수 있습니다.<style> 태그로 인라인 2) 나머지 CSS는 preload로 비동기 로드 3) media 속성으로 조건부 로드 (print, screen 크기별).async 속성 — 다운로드 중 파싱 계속, 다운로드 완료 시 즉시 실행 2) defer 속성 — 다운로드 중 파싱 계속, HTML 파싱 완료 후 실행 3) 중요하지 않은 JS는 <body> 끝에 배치.preload: 현재 페이지에서 곧 필요한 리소스를 높은 우선순위로 즉시 다운로드합니다. 폰트, Critical CSS, 히어로 이미지 등에 사용합니다.prefetch: 다음 탐색(네비게이션)에서 필요할 리소스를 낮은 우선순위로 유휴 시간에 미리 다운로드합니다. 다음 페이지의 JS 번들, 사용자가 클릭할 가능성이 높은 페이지 등에 사용합니다.preconnect: 외부 도메인에 대해 DNS 조회 + TCP 연결 + TLS 핸드셰이크를 미리 수행합니다. CDN, 폰트 서버, API 서버 등 외부 출처에 사용합니다.