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

로딩 속도 향상 방법

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

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

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

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

위에 방법을사용할 때 주의할 점은 브라우저가 모든 리소스를 동시에 로드하려 하지 않도록 관리하는 것입니다. 너무 많은 리소스를 지정하면 오히려 성능에 부정적인 영향을 미칠 수 있습니다. 따라서 필요한 경우에만 preload와 preconnect를 사용하고, 특히 중요한 리소스에만 적용하는 것이 좋습니다.