HTML <link rel="preconnect"> – 올바른 이해와 사용 방법

정의 및 사용 방법

<link> 태그의 rel="preconnect"는
href 속성으로 지정한 외부 도메인을 브라우저가 미리 연결하도록 지정해 줍니다.

여기서 말하는 '외부 도메인'이란
현재 웹 페이지인 자신의 도메인이 아닌 다른 도메인을 말합니다.

이렇게 하면, 브라우저가 외부 도메인 연결에 필요한 시간을 절약할 수 있어서, 해당 도메인의 리소스(예: 이미지, 스크립트, 폰트 등) 로드를 더 빠르게 합니다.

리소스(resource): 웹에서 접근할 수 있는 다양한 파일이나 데이터를 의미합니다. HTML 문서, 이미지, 스타일시트(CSS), 자바스크립트 파일은 물론이고, 폰트 파일, 비디오, 오디오 파일 등 웹 페이지의 콘텐츠를 구성하거나 기능을 구현하는 데 사용되는 다양한 유형의 파일들을 말합니다.

브라우저가 외부 도메인과 연결할 때에는 일정 시간이 소요됩니다.
<link> 태그의 rel="preconnect"는 브라우저에게 href 속성으로 지정한 외부 도메인을 미리 연결하도록 지정해 줍니다.

브라우저가 외부 도메인의 리소스를 요청하기 전에 몇 가지 연결 과정을 수행합니다.

도메인 이름을 조회하여 해당 서버의 IP 주소를 찾습니다. 이를 'DNS(Domain Name System) 조회'라고 합니다.
IP 주소를 확인한 후, 해당 서버와 데이터를 주고받기 위한 연결을 설정합니다. 이를 'TCP(Transmission Control Protocol) 연결'이라고 합니다.
HTTPS와 같은 보안 연결이 필요한 경우, 브라우저는 TLS(Transport Layer Security) 핸드셰이크를 통해 보안 연결을 설정합니다.

이러한 연결 과정은 네트워크 상황에 따라 시간이 다를 수 있으며, 브라우저가 외부 도메인의 리소스를 처음 요청할 때 일정한 지연 시간이 발생할 수 있습니다.

외부 도메인을 미리 연결하기

<link> 태그의 rel="preconnect"로 브라우저에게 href 속성으로 지정한 외부 도메인을 미리 연결하도록 할 수 있습니다.
이렇게 하면 브라우저가 외부 도메인 연결에 필요한 시간을 절약할 수 있어서 해당 도메인의 리소스를 더 빠르게 로드할 수 있는 이점이 있습니다.

외부 도메인을 미리 연결하는 가장 간단한 방법은 <link> 태그를 문서의 <head> 태그에 추가하는 것입니다.

HTML

<head>
    ...
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">
    ...
</head>

위의 예제는 Google 웹 폰트를 사용하기 위해서 구글에서 제공하는 스타일시트를 연결한 코드입니다.

구글에서 제공하는 스타일시트의 URL(https://fonts.googleapis.com)은 외부 도메인입니다. 구글에서 제공하는 스타일시트를 빠르게 로드하기 위해서 위 예제에서는 <link> 태그의 rel="preconnect"로 브라우저에게 https://fonts.googleapis.com 도메인을 미리 연결하도록 설정한 것입니다.

연결할 외부 리소스보다 먼저 <link> 태그의 rel="preconnect"로 미리 연결할 외부 도메인을 브라우저가 미리 연결하도록 지정하면, 브라우저는 해당 도메인과의 연결을 미리 준비하여 이후 리소스 로드 시간을 줄일 수 있습니다. 미리 연결하려는 외부 도메인마다 위 코드를 반복할 수 있습니다.

문서에는 <link> 태그의 rel="preconnect"를 여러 개 사용할 수 있습니다.

주의할 점

<link> 태그의 rel="preconnect"를 사용할 때에는 몇 가지 주의해야 할 점이 있습니다.

필요한 외부 도메인에만 적용

<link> 태그의 rel="preconnect"는 꽤나 매력적이지만, 모든 외부 도메인에 설정하는 것은 비생산적일 수 있습니다. 브라우저에게 불필요한 부하를 줄 수 있고 실제 미리 연결되는 효과가 떨어질 수 있기 때문입니다. 너무 많은 외부 도메인에 미리 연결하지 않도록 조심하세요.

<link> 태그의 rel="preconnect"는 꼭 필요한 연결에만 사용하는 것이 좋습니다.

사용해야 할 외부 도메인이 많을 경우에는 <link> 태그의 rel="dns-prefetch"를 사용하는 것이 좋습니다.

<link> 태그의 rel="dns-prefetch"는 브라우저가 외부 도메인에 연결하기 위한 첫 번째 단계인 DNS 조회를 미리 수행하여 DNS 조회 시간을 줄일 수 있습니다. 그렇기 때문에 <link> 태그의 rel="preconnect"보다 브라우저가 수행하는 연결 관련 작업이 적어 여러 외부 도메인을 대상으로 사용할 때 초기 로딩 성능에 미치는 부정적인 영향(예: 성능 저하)을 줄일 수 있습니다.

부연설명
<link> 태그의 rel="dns-prefetch"는
href 속성으로 지정한 외부 도메인을 대상으로 브라우저가 미리 DNS 조회를 수행하고 IP 등 연결에 필요한 정보를 캐시하도록 지정해 줍니다.
이렇게 하면 브라우저가 해당 도메인을 연결할 때의 대기 시간이 줄기 때문에 연결 속도를 향상시킵니다.