검색 최적화 로딩 속도 향상 방법 [ DNS-prefetch ]를 사용 방법

로딩 속도 최적화중 DNS 최적화와 검색 엔진 속도 향상 방법

인터넷 세상에서 웹사이트 주소는 도메인 이름으로 표기되지만, 컴퓨터는 도메인이 아닌 숫자로 된 IP 주소로 소통합니다. 이때, 사람이 이해하기 쉬운 도메인 이름을 IP 주소로 변환하는 중요한 역할을 하는 것이 바로 DNS (Domain Name System, 도메인 시스템)입니다.

DNS 최적화로 페이지 로딩 속도 향상시키는 방법

DNS (도메인시스템, Domain Name System)은 인터넷에서 사용되는 주소체계입니다. 컴퓨터는 사람이 이해할 수 있는 도메인 이름(예: example.com)을 컴퓨터가 이해할 수 있는 IP 주소(예: 192.0.2.1)로 변환해 주는 역할을 합니다. DNS 최적화는 검색 엔진 속도를 최적화하는 방법 중 하나입니다.

검색 엔진 최적화에서 속도는 외부 참조 사이트를 연결할 때 많은 부하를 받게 됩니다.

브라우저가 페이지에 접속할 때 참조해야 하는 외부 사이트의 정보는 접속 시간과 해당 요소를 불러오는 시간을 포함합니다. 따라서 접속 지연이 발생하면 검색 엔진 최적화와 로딩 속도에 부정적인 영향을 미칠 수 있습니다.

DNS Prefetch와 Preconnect로 사이트 로딩 시간 단축하기

"3D 프린터" 상품 정보를 불러오는 중...

데이터를 가져오는 중 오류 발생: Failed to fetch

※ 이 광고는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

웹페이지가 외부 리소스를 참조할 때, DNS 조회 및 서버 연결 과정이 병목이 되지 않도록 미리 준비하는 방법이 있습니다. 바로 DNS Prefetch와 Preconnect입니다.

로딩 속도 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최적화

DNS 최적화 시 주의할 점

• 너무 많은 Prefetch, Preconnect 사용 금지
  모든 외부 도메인에 무차별적으로 이 기능을 적용하면, 오히려 브라우저가 한꺼번에 너무 많은 연결을 시도해 네트워크 병목 현상이 발생할 수 있습니다.
• 중요한 리소스에만 집중
  자주 사용하는 외부 도메인이나 웹페이지 로딩에 꼭 필요한 리소스에 대해서만 Prefetch 및 Preconnect를 지정하는 것이 가장 효율적입니다.
• 실제 효과 측정 필요
  웹사이트 속도 측정 도구(예: Google PageSpeed Insights, Lighthouse)를 활용해 적용 전후 성능 변화를 체크하는 것이 좋습니다.

---

빠른 웹사이트는 사용자 만족도를 높일 뿐만 아니라, 검색 엔진에서도 좋은 평가를 받습니다. 특히 외부 리소스를 많이 사용하는 현대의 복잡한 웹사이트에서는 DNS 최적화가 더욱 중요해지고 있습니다.

• DNS Prefetch로 외부 도메인의 IP를 미리 확인하고,
• Preconnect로 서버와의 연결을 사전에 준비하며,
• 꼭 필요한 리소스에만 적절히 적용해 네트워크 부하를 관리하세요.

이렇게 하면 검색 엔진 최적화(SEO)와 웹사이트 로딩 속도 모두에서 큰 효과를 볼 수 있습니다.

웹사이트의 속도를 높이고 방문자 경험을 개선하고 싶다면, DNS 최적화를 적용해 보세요!