프론트엔드 성능을 향상시키 위해서 가장 먼저 고려해야 할 것은
코드 스플리팅이나 서버 컴포넌트 같은 어려운 기술이 아니라 CDN이다.
CDN은 기본적이면서도 가장 강력한 성능 개선 도구다.
이 글에서는 CDN의 개념, 동작 방식, 그리고 어떤 장점이 있는지를 간단하게 살펴본다.
CDN이란?
CDN은 Content Delivery Network, 즉 콘텐츠 전송 네트워크를 의미한다.
전 세계에 분산된 서버를 통해 지연(latency)을 줄이고,
웹 콘텐츠(예: JS, CSS, 이미지, 폰트 등)를 사용자에게 더 빠르게 전달하는 것이 핵심 목적이다.
CDN의 핵심 전략
분산 서버
CDN 제공 업체는 전 세계 여러 지역에 엣지 서버(Edge Server)를 보유하고 있다.
이 서버들은 원본 서버로부터 정적 리소스를 전달받아 복사본을 저장한다.
사용자가 웹 페이지를 요청하면, CDN은 자동으로 사용자와 가장 가까운 서버를 선택해 해당 리소스를 전달한다.
예를 들어, 서버가 노르웨이에 있고 사용자가 호주에 있다면:
CDN이 없는 경우 → 사용자는 노르웨이까지 직접 요청해야 한다.
CDN이 있는 경우 → CDN이 호주 근처의 서버에서 빠르게 응답한다.
호주와 가까운 곳에 있는 모든 사용자는 노르웨이 서버가 아닌 CDN 엣지 서버의 복사본을 받게 된다.
캐싱 (Caching)
CDN은 원본 서버에서 가져온 리소스를 CDN 서버에 자체적으로 저장(캐싱) 해두고,
동일한 요청에 대해 원본 서버를 거치지 않고 바로 응답한다.
CDN의 장점
- 원본 서버 부하 감소: 사용자가 더 이상 원본 서버에 직접 접근할 필요가 없으므로, 서버에 가해지는 트래픽이 줄어든다.
- 응답 속도 향상: 지리적으로 가까운 서버에서 응답을 받으므로, 리소스를 더 빠르게 불러올 수 있다.
- 사용자 경험 개선: 지연 시간이 줄어들면서 페이지 로딩 속도도 빨라진다.
CDN을 제공하는 대표적인 솔루션으로는 Cloudflare, AWS CloudFront, Fastly, Vercel, Netlify 등이 있다.
이제 성능 최적화의 첫 걸음을 CDN으로 시작해 보자!
Reference
Initial load performance for React developers: investigative deep dive