중요 렌더링 경로 (Critical Rendering Path) 최적화: 중요 자원 로드 순서 최적화하기

개요

파일 개별의 크기를 줄이는 것도 중요하지만, 파일을 주고받는 과정이 비효율적이라면 로딩 속도는 개선되지 않는다. 요청 최적화는 불필요한 네트워크 요청 횟수를 줄이고, 최신 프로토콜과 캐싱을 활용해 전송 효율을 극대화하는 것을 목표로 한다.

코드 분할

모든 자바스크립트 코드를 하나의 거대한 번들 파일로 만들면, 당장 필요 없는 기능 때문에 초기 렌더링이 늦어진다. 코드 분할은 애플리케이션을 여러 개의 작은 조각(Chunk)으로 나누는 전략이다.

• 지연 로딩(Lazy Loading): 특정 페이지나 컴포넌트에 진입할 때만 해당 코드를 불러와 초기 로드 시의 요청 부담을 줄인다.

HTTP/2 및 HTTP/3 활용

과거 HTTP/1.1 방식에서는 한 번에 하나의 리소스만 요청할 수 있어, 파일이 많을수록 대기 시간이 길어졌다. 최신 프로토콜을 적용하는 것만으로도 통신 효율이 급격히 향상된다.

• 멀티플렉싱(Multiplexing): 하나의 연결에서 여러 개의 요청과 응답을 동시에 주고받을 수 있어 병목 현상을 해결한다.
• HTTP/3 (QUIC): UDP 기반의 프로토콜로, 네트워크 환경이 불안정할 때 발생하는 패킷 손실 문제를 개선하여 연결 속도를 더욱 높입니다.

캐싱 전략(Cache-Control)

가장 빠른 요청은 아예 요청하지 않는 것이다. Cache-Control 헤더를 통해 브라우저가 리소스를 로컬 저장소에 저장하도록 설정한다.

• 강력한 캐싱: 자주 변경되지 않는 정적 자원(이미지, 라이브러리 등)에 긴 유효 기간을 부여한다.
• 재사용: 사용자가 페이지를 재방문할 때 서버에 다시 묻지 않고 로컬에서 즉시 리소스를 가져오므로 네트워크 비용이 0이 된다.

인라인 리소스의 적절한 활용

너무 작은 크기의 CSS나 아이콘(SVG)은 별도의 파일로 만드는 것보다 HTML 문서 안에 직접 포함하는 것이 효율적일 수 있다.

• 요청 수 감소: "파일을 달라"고 서버에 요청하고 응답받는 한 번의 왕복 시간(Round Trip)을 아예 제거한다. 인라인화된 리소스는 브라우저 캐싱이 불가능하고 HTML 파일 자체가 무거워질 수 있으므로, 아주 작은 리소스에 한해 제한적으로 사용해야 한다.