<link rel="dns-prefetch">
<link> 태그의 rel="dns-prefetch"는
브라우저에게 href 속성으로 지정한 외부 도메인의 DNS 조회를 미리 수행하고 IP 주소를 캐싱하도록 설정합니다.
이렇게 하면 브라우저가 해당 도메인을 연결할 때의 대기 시간이 줄기 때문에 연결 속도를 향상시킵니다.
이렇게 하면, 페이지에서 사용할 외부 도메인을 연결해야 하는 경우 연결 속도를 향상시킵니다.
여기서 말하는 '외부 도메인'이란
현재 웹페이지인 자신의 도메인이 아닌 다른 출처의 도메인을 말합니다.
페이지에서 외부 도메인을 연결해야 하는 경우가 많습니다.
- Google에서 제공하는 웹 폰트를 사용하기 위해 해당하는 Google의 서비스 도메인을 연결할 때
- 웹 페이지에 외부 라이브러리나 스크립트를 추가하기 위해 해당 도메인을 연결할 때
- 웹 페이지에 외부에서 호스팅되는 이미지나 미디어를 사용할 때
이런 경우 <link rel="dns-prefetch">를 사용하면
페이지에서 해당하는 외부 도메인 연결을 좀 더 빠르게 연결할 수 있기 때문에 페이지 로딩 속도를 향상시킬 수 있습니다.
사용법 참고 사항
도메인의 DNS 조회
사용자는 도메인 이름으로 사이트를 기억하지만 서버는 IP 주소로 기억합니다.
이것이 DNS(도메인 이름 시스템, Domain Name System)가 있는 이유입니다.
IP 주소는 웹사이트 서버를 식별하는 데 사용되는 고유한 숫자입니다.
브라우저는 DNS을 사용해서 사이트 이름을 해당 IP 주소로 변환합니다. 도메인을 연결할 때 이 절차를 먼저 수행합니다. 예를 들어 페이지에 Google에서 제공하는 웹 폰트를 사용하기 위해 Google에서 제공하는 CSS 파일을 연결한다고 가정해 보겠습니다. 이 파일은 https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap이라는 외부 도메인 경로에 있습니다.
다음의 예시 코드로 살펴 보겠습니다.
예시 코드를 보면 Google에서 제공하는 CSS 파일의 경로는 외부 도메인(https://fonts.googleapis.com)입니다.
브라우저에서 이 페이지가 로드되면 DNS를 사용해서 링크로 연결할 https://fonts.googleapis.com를 검색하고 해당 숫자 IP 주소로 확인합니다. 이렇게 DNS로 조회하는 시간은 대략 20~120밀리초정도 걸립니다. 외부 도메인을 DNS로 조회하는데에는 시간이 걸린다는 의미입니다.
<link rel="dns-prefetch">를 사용하면
링크된 도메인의 DNS 조회를 미리 수행하고 IP 주소를 캐싱하기 때문에 도메인의 DNS 조회 시간을 절약할 수 있습니다.
구현 방법
<link> 태그의 rel="dns-prefetch"를 구현하는 가장 간단한 방법은 <link> 태그를 문서의 <head> 태그에 추가하는 것입니다.
외부 도메인은 href 속성의 값으로 지정합니다.
이렇게 하면 Google 웹 폰트를 로드하는 데 필요한 DNS 조회를 미리 수행하여 페이지 로딩 속도를 향상시킬 수 있습니다.
연결하려는 외부 도메인마다 위 코드를 반복할 수 있습니다.
문서에는 <link> 태그의 rel="dns-prefetch"를 여러 개 사용할 수 있습니다.
주의할 점
<link> 태그의 rel="dns-prefetch"를 사용할 때에는 몇 가지 주의해야 할 점이 있습니다.
모든 브라우저에서 지원되는 것은 아님
<link> 태그의 rel="dns-prefetch"는 많은 최신 브라우저에서 지원하지만, 오래된 브라우저나 일부 브라우저에서 지원하지 않을 수 있습니다.
브라우저 호환성을 참조하세요.
남용하지 않기
모든 외부 도메인에 대해 <link> 태그의 rel="dns-prefetch"를 사용하는 것은 좋지 않습니다. 필요한 경우에만 사용해야 합니다. 과도한 DNS 조회는 불필요한 리소스 소모를 초래할 수 있습니다. 불필요한 리소스 소모는 브라우저가 비효율적으로 작동하는 원인이 될 수 있습니다. 일반적으로 10회 이상의 DNS 조회는 만들지 않도록 노력해야 합니다.
사용되지 않는 외부 도메인에 적용하지 않기
현재 페이지에서 사용되지도 않는 외부 도메인에 대해 사용하지 마세요.
이는 낭비일 뿐이며, 실제로 필요한 도메인에 대한 DNS 조회를 수행하는 브라우저 기능에 불필요한 리소스 소모를 초래할 뿐입니다. 이렇게 되면 브라우저가 비효율적으로 작동할 수 있습니다.
성능 향상 효과가 미미할 수 있음
<link> 태그의 rel="dns-prefetch"는 웹 페이지 로딩 속도를 향상시키는 데 도움이 될 수 있지만, 실제로 느껴지는 속도 향상은 미미할 수 있습니다. 특히, 사용자의 인터넷 연결 속도가 느린 경우 또는 웹 페이지 크기가 큰 경우에는 효과가 크지 않을 수 있습니다.
활용 예제
<link> 태그의 rel="dns-prefetch"를 언제 사용해야 할까요?
일반적으로 다음을 포함하는 외부 도메인에 사용하면 도움이 됩니다.
- 요청이 많거나 많은 양의 콘텐츠를 다운로드하는 외부 도메인
- 로드가 지연되는 외부 이미지 또는 비디오 파일의 도메인
다음은 웹 페이지에서 <link> 태그의 rel="dns-prefetch"를 활용하는 몇 가지 예제입니다.
Google 웹 폰트 사용
Google 웹 폰트를 사용하는 경우 다음과 같이 코드를 작성할 수 있습니다.
위 코드는 Google 웹 폰트 서비스에 대한 DNS 조회를 미리 수행하여 페이지 로딩 속도를 향상시킵니다.
외부 라이브러리 또는 스크립트 추가
웹 페이지에 외부 라이브러리 또는 스크립트를 추가하는 경우 다음과 같이 코드를 작성할 수 있습니다.
위 코드는 jQuery 라이브러리가 호스팅되는 도메인에 대한 DNS 조회를 미리 수행하여 jQuery 스크립트 로드 속도를 향상시킵니다.
CDN(Content Delivery Network) 사용
CDN(Contents Delivery Network)은 전 세계에 분산된 서버 네트워크를 이용하여 콘텐츠를 효율적으로 제공하는 서비스입니다. CDN으로 제공되는 이미지, CSS, 자바스크립트 파일 등에 적용할 수 있습니다.
위 코드는 Bootstrap CDN에 대한 DNS 조회를 미리 수행하여 Bootstrap CSS 및 자바스크립트 파일 로드 속도를 향상시킵니다.
브라우저 호환성
| 데스크탑 | ||||
|---|---|---|---|---|
| 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
<link rel="dns-prefetch">
|
46 | 97 | 3 | 17.5 |
마지막 업데이트 정보: 2024-05-09
| 모바일 | |||
|---|---|---|---|
| 속성 |
모바일 Chrome
|
모바일 Firefox
|
Safari
|
<link rel="dns-prefetch">
|
예 | 4 | ? |
명세서
| 명세서 사양 | |
|---|---|
<link rel="dns-prefetch">
|
HTML Standard #link-type-dns-prefetch |