모바일과 데스크톱에서 반복되는 DNS 지연이 SEO에 미치는 영향을 설명하고, 핵심 리소스 중심의 DNS 최적화로 체감 속도와 페이지 경험 점수를 개선하는 방법을 안내합니다.
인터넷 세상에서 웹사이트 주소는 도메인 이름으로 표기되지만, 컴퓨터는 도메인이 아닌 숫자로 된 IP 주소로 소통합니다. 이때, 사람이 이해하기 쉬운 도메인 이름을 IP 주소로 변환하는 중요한 역할을 하는 것이 바로 DNS (Domain Name System, 도메인 시스템)입니다. 모바일 페이지 속도 최적화 전략에서도 이 DNS 조회 단계의 지연을 줄이는 것이 매우 중요합니다.
DNS 최적화로 페이지 로딩 속도 향상시키는 방법
DNS (도메인시스템, Domain Name System)은 인터넷에서 사용되는 주소체계입니다. 컴퓨터는 사람이 이해할 수 있는 도메인 이름(예: example.com)을 컴퓨터가 이해할 수 있는 IP 주소(예: 192.0.2.1)로 변환해 주는 역할을 합니다. DNS 최적화는 검색 엔진 속도를 최적화하는 방법 중 하나입니다.
검색 엔진 최적화에서 속도는 외부 참조 사이트를 연결할 때 많은 부하를 받게 됩니다. 특히 제3자 도메인 지연 해소는 현대적인 웹사이트 성능 관리의 필수 요소입니다.
브라우저가 페이지에 접속할 때 참조해야 하는 외부 사이트의 정보는 접속 시간과 해당 요소를 불러오는 시간을 포함합니다. 따라서 접속 지연이 발생하면 브라우저 렌더링 차단 현상이 나타나 검색 엔진 최적화와 로딩 속도에 부정적인 영향을 미칠 수 있습니다.
DNS 기술 비교: Prefetch vs Preconnect
웹 성능을 높이기 위해 사용하는 두 가지 주요 기술의 차이점을 표를 통해 확인해 보세요.
| 기술 명칭 | 주요 기능 | 최적화 단계 | 권장 사용 사례 |
|---|---|---|---|
| DNS Prefetch | 도메인 이름을 IP로 미리 변환 | DNS Lookup | 많은 수의 외부 도메인 참조 시 |
| Preconnect | DNS + TCP + TLS 연결 설정 | Full Connection | 가장 중요한 핵심 리소스 서버 |
DNS Prefetch와 Preconnect로 사이트 로딩 시간 단축하기
웹페이지가 외부 리소스를 참조할 때, DNS 조회 및 서버 연결 과정이 병목이 되지 않도록 미리 준비하는 방법이 있습니다. 바로 DNS Prefetch와 Preconnect입니다. 이는 구글 핵심 웹 지표 중 하나인 LCP를 개선하는 데 직접적인 도움을 줍니다.
로딩 속도 Prefetch
Prefetch는 브라우저가 사용자가 앞으로 요청할 리소스를 사전에 불러오는 방법입니다. 사용자가 실제로 해당 리소스를 요청하기 전에 브라우저가 미리 다운로드하도록 유도합니다. DNS-prefetch는 브라우저가 외부 사이트의 도메인 이름과 IP 주소를 미리 확인하여 DNS 캐싱을 하도록 유도합니다.
이러한 캐싱 방법은 페이지의 로딩 속도를 향상시킬 수 있으며, 특히 외부 페이지의 의존도가 높은 블로그와 같은 페이지에서는 로딩 속도에 중요한 영향을 미칠 수 있습니다.
HTML에서 사용할 때는 아래와 같은 코드 형식으로 지정하여 사용하면 됩니다. 제3자 도메인 리소스를 사용하는 주소를 적어 주시면 됩니다.
link rel="dns-prefetch" href="https://tistory1.daumcdn.net/"
link rel="dns-prefetch" href="https://t1.daumcdn.net/"
link rel="dns-prefetch" href="https://blog.kakaocdn.net/"
link rel="dns-prefetch" href="https://developers.kakao.com/"
link rel="dns-prefetch" href="https://fonts.googleapis.com/" /
로딩 속도 Preconnect
Preconnect은 브라우저가 서버와의 연결을 사전에 설정하여 로딩 시간을 최적화하는 방법입니다. 주로 다음과 같은 작업을 사전에 처리합니다:
- 서버의 도메인 이름을 IP 주소로 변환하는 과정을 사전에 처리하여 시간을 단축합니다.
- 실제 데이터 전송을 위한 TCP 연결 설정을 미리 수행합니다.
- HTTPS 프로토콜을 사용하는 경우, TLS(SSL) 연결 설정을 사전에 처리합니다.
아래는 preconnect를 사용한 예시입니다:
link rel="preconnect" href="https://fonts.googleapis.com" crossorigin
link rel="preconnect" href="https://cdn.example.com" crossorigin
DNS 최적화 시 주의할 점
- 너무 많은 Prefetch, Preconnect 사용 금지: 모든 외부 도메인에 무차별적으로 이 기능을 적용하면, 오히려 브라우저가 한꺼번에 너무 많은 연결을 시도해 네트워크 병목 현상이 발생할 수 있습니다.
- 중요한 리소스에만 집중: 자주 사용하는 외부 도메인이나 웹페이지 로딩에 꼭 필요한 리소스에 대해서만 지정하는 것이 가장 효율적입니다.
- 실제 효과 측정 필요: 웹사이트 속도 측정 도구(예: Google PageSpeed Insights, Lighthouse)를 활용해 LCP 개선 수치를 체크하는 것이 좋습니다.
Q1. DNS 최적화가 SEO에 정말 도움이 되나요?
네, 구글은 페이지 로딩 속도를 주요 랭킹 요소로 삼고 있습니다. DNS 최적화를 통해 첫 번째 바이트까지의 시간(TTFB)을 단축하면 검색 엔진 노출 상태 점검 시 긍정적인 점수를 받을 수 있습니다.
Q2. Prefetch와 Preconnect 중 무엇을 먼저 써야 하나요?
가장 중요한 폰트나 API 서버에는 Preconnect를 사용하고, 그 외의 덜 중요한 다수의 외부 링크에는 DNS Prefetch를 사용하는 것이 네트워크 자원 관리 측면에서 효율적입니다.
Q3. 모든 브라우저에서 이 태그를 지원하나요?
대부분의 현대적인 브라우저(크롬, 엣지, 사파리 등)는 이를 지원합니다. 만약 지원하지 않는 구형 브라우저라도 해당 태그를 무시할 뿐 웹사이트 작동에 오류를 일으키지는 않습니다.
빠른 웹사이트는 사용자 만족도를 높일 뿐만 아니라, 검색 엔진에서도 좋은 평가를 받습니다. 특히 외부 리소스를 많이 사용하는 현대의 복잡한 웹사이트에서는 웹 성능 최적화의 일환으로 DNS 최적화가 더욱 중요해지고 있습니다.
- DNS Prefetch로 외부 도메인의 IP를 미리 확인하세요.
- Preconnect로 서버와의 연결을 사전에 준비하세요.
- 꼭 필요한 리소스에만 적절히 적용해 네트워크 부하를 관리하세요.
이렇게 하면 검색 엔진 최적화(SEO)와 웹사이트 로딩 속도 모두에서 큰 효과를 볼 수 있습니다. 웹사이트의 속도를 높이고 방문자 경험을 개선하고 싶다면, 지금 바로 DNS 최적화를 적용해 보세요!