1. 🌐 DNS란 무엇인가요? (핵심 개념)
DNS (Domain Name System)는 우리가 주소를 쉽게 기억할 수 있도록 도메인 이름(google.com)을 컴퓨터가 인식하는 실제 주소인 IP 주소(142.250.xxx.xxx)로 변환해주는 시스템입니다.
🏠 사용자가 웹사이트를 요청하면, 브라우저는 콘텐츠를 다운로드하기 전에 반드시 이 ‘주소 조회(DNS Lookup)’ 과정을 거쳐야 합니다. 이 조회에 걸리는 시간이 바로 **지연 시간(Latency)**을 유발하는 요소 중 하나입니다.
Getty Images
2. ⚡️ DNS 프리페치 기능과 원리
DNS 프리페치(DNS Prefetch)는 브라우저가 특정 도메인에 접속할 가능성이 높다고 판단될 때, 사용자가 실제로 그 도메인의 자원을 요청하기 이전에 미리 DNS 조회를 수행하여 주소를 확보해 두는 기능입니다.
- 원리: 브라우저가 유휴 상태(Idle Time)일 때 백그라운드에서 조용히 주소 변환 작업을 처리합니다.
- 목표: 실제 연결이 필요할 때 DNS 조회 대기 시간을 0에 가깝게 만들어 즉각적인 연결을 가능하게 합니다.
3. ✅ 속도 향상 효과
DNS 프리페치는 웹 성능 최적화(WPO)의 기본적인 기법이며, 특히 서드파티(Third-Party) 자원을 많이 사용하는 웹사이트에서 체감 속도 향상 효과가 큽니다.
| 항목 | 상세 효과 |
| 지연 시간 감소 | DNS 조회에 소요되는 평균 50ms ~ 200ms의 대기 시간을 절약합니다. |
| 외부 자원 로딩 | 구글 폰트, 통계 스크립트, CDN, 소셜 미디어 위젯 등 외부 도메인을 불러올 때 속도 향상에 기여합니다. |
| 사용자 경험(UX) | 로딩 시간이 단축되어 웹사이트의 반응성이 높아지고 이탈률이 줄어듭니다. |
4. 🛠 적용 방법 및 구문
HTML 문서의 <head> 태그 안에 <link> 요소를 사용하여 적용합니다.
구문:
HTML
<link rel="dns-prefetch" href="//도메인 주소">
| 적용 예시 | 목적 |
<link rel="dns-prefetch" href="//fonts.googleapis.com"> | 구글 폰트 주소 미리 조회 |
<link rel="dns-prefetch" href="//www.google-analytics.com"> | 구글 애널리틱스 스크립트 주소 미리 조회 |
<link rel="dns-prefetch" href="//cdn.mysite.com"> | 콘텐츠 전송 네트워크(CDN) 주소 미리 조회 |
5. ❌ 사용 시 주의사항
과도한 사용은 오히려 성능 저하를 일으킬 수 있습니다.
- 제한적인 사용: 페이지당 3~5개의 외부 도메인에만 전략적으로 적용하는 것이 좋습니다.
- 자원 낭비: 불필요한 도메인에 프리페치를 적용하면, 사용하지 않을 주소를 조회하느라 CPU와 네트워크 자원을 소모하게 됩니다.
- 동일 도메인 불필요: 현재 웹페이지와 동일한 도메인에는 적용할 필요가 없습니다.