[IT/웹 아키텍처] Core Web Vitals 최적화 실무 : 렌더링 차단 리소스 비동기 처리와 CDN

 구글은 사용자 경험 지표인 Core Web Vitals(CWV)를 검색 랭킹에 반영하고 있다. 다만 CWV가 양질의 콘텐츠를 대체하는 절대적 기준은 아니며, 콘텐츠 품질이 유사한 페이지들이 경쟁할 때 순위를 가르는 타이브레이커(Tie-breaker) 역할을 한다고 보는 것이 정설이다. LCP, CLS 같은 지표를 방어하기 위해 프론트엔드 환경에서 렌더링 차단 리소스를 제어하는 실무적인 접근법을 정리했다.

브라우저 렌더링 병목의 주범

 웹 브라우저는 서버에서 HTML을 받아 위에서부터 읽어 내려가며 DOM(Document Object Model) 트리를 만든다. 이때 동기식으로 로드되는 자바스크립트(<script>)나 무거운 외부 CSS를 만나면, 해당 파일을 다운로드하고 실행할 때까지 DOM 트리 생성을 멈춘다.

이런 렌더링 차단 리소스가 head 태그 쪽에 몰려 있으면, 브라우저가 첫 화면을 그리는 시간이 길어져 결과적으로 LCP(최대 콘텐츠 렌더링 시간) 점수가 하락하게 된다.

스크립트 비동기 로딩: async와 defer

 렌더링 병목을 피하기 위해 엔지니어들은 자바스크립트에 비동기 속성을 추가하여 HTML 파싱과 파일 다운로드를 병렬로 처리한다. 목적에 따라 async와 defer 중 하나를 선택한다.

<script src="analytics.js" async></script>
<script src="app.js" defer></script>

• async 속성 : 다운로드와 파싱을 동시에 진행하지만, 다운로드가 끝나는 즉시 파싱을 멈추고 스크립트를 실행한다. 실행 순서가 보장되지 않으므로 구글 애널리틱스나 애드센스처럼 돔(DOM) 구조에 의존하지 않는 외부 추적 코드에 주로 쓴다.
• defer 속성 : 파싱과 병렬로 다운로드하는 것은 같으나, 스크립트 실행은 DOM 트리가 완전히 만들어진 직후로 미룬다. 스크립트 간의 순서가 중요하거나 문서 구조를 직접 조작해야 하는 핵심 프론트엔드 로직에 적합하다.

물리적 지연(TTFB) 단축을 위한 CDN 캐싱

 비동기 처리를 아무리 잘 해두어도, 파일 자체가 클라이언트 브라우저에 도달하는 물리적 전송 시간(Latency)이 길면 최적화 효율은 떨어진다. 사용자가 첫 바이트를 받는 데 걸리는 시간인 TTFB(Time to First Byte)를 줄이려면 CDN(콘텐츠 전송 네트워크)을 활용하는 것이 유리하다.

 CDN은 용량이 큰 웹 폰트나 고해상도 이미지를 원본 서버 대신 사용자와 물리적으로 가까운 엣지(Edge) 노드에 캐싱해 둔다. 이를 통해 네트워크 왕복 시간을 단축시켜 LCP 수치를 효과적으로 방어할 수 있다.