HTML rel=preconnect 올바른 이해와 사용 방법

`<link rel="preconnect">`

<link> 태그의 rel="preconnect"는
브라우저가 링크된 외부 도메인을 미리 연결하도록 설정합니다.

브라우저가 외부 도메인과 연결할 때에는 일정 시간이 소요됩니다.
<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 웹 폰트를 사용하기 위해서 구글에서 제공하는 스타일시트를 연결한 코드입니다.

구글에서 제공하는 스타일시트의 도메인(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 조회의 시간을 절약할 수 있습니다. 그렇기 때문에 <link> 태그의 rel="preconnect"보다 브라우저의 부하에 영향이 작습니다.

HTML rel=dns-prefetch