<link> 는 외부 리소스와의 연결을 돕는 요소이며, rel 속성 값인 preconnect, preload, prefetch는 리소스 로드의 우선순위를 설정하여 로드 성능을 최적화하기 위해 사용된다.
1. preconnect
preconnect 는 브라우저가 특정 origin에 대한 네트워크 연결을 미리 설정하도록 지시한다. 이를 통해 DNS 조회, TLS 핸드셰이크, TCP 연결을 미리 완료하여 리소스 로드 지연을 줄일 수 있다. 외부 API나 CDN의 리소스를 사용할 경우 preconnect 를 사용하면 첫 번째 요청의 대기 시간을 줄일 수 있다.
<link rel="preconnect" href="https://external-resource.com" crossorigin="anonymous">preconnect 는 리소스 자체를 로드하지 않고, 요청할 origin과의 연결만 미리 준비한다. 자주 사용하는 외부 리소스의 도메인에 대해 적용하는 것이 효과적이다.
preconnect 의 일반적인 사용 사례는 Google Fonts 이다. Google Fonts에서는 @font-face 선언을 제공하는 https://fonts.googleapis.com 도메인과 글꼴 파일을 제공하는 https://fonts.gstatic.com 도메인에 preconnect할 것을 권장한다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>HTTP/2, HTTP/3(QUIC)
결국 preconnect 는 연결 최적화를 위한 리소스 힌트인데 이는 HTTP의 진화와 관련이 있다.
HTTP/2는 하나의 TCP 연결 내에서 여러 요청을 동시에 처리하는 멀티플렉싱 기능을 제공하여 이전 HTTP/1.1에 비해 연결 오버헤드를 줄여준다. preconnect 는 여전히 유효하지만 HTTP/2 환경에서는 다중 도메인 연결 설정의 필요성이 일부 줄어들 수 있다.
HTTP/3 (QUIC)는 TCP 대신 UDP 기반의 QUIC 프로토콜을 사용하여, 연결 설정 시간을 더욱 단축하고 패킷 손실 시 재전송 성능을 개선한다. 이는 preconnect 의 필요성을 더욱 줄일 수 있지만, 아직 광범위하게 적용되지 않았으므로 현재로서는 preconnect 가 여전히 중요하다.
DNS-prefetch
cross origin 서버에 대한 연결을 미리 열면 초기 페이지 로드 시간을 크게 개선할 수 있지만 한 번에 여러 cross origin 서버에 연결하는 것은 불가능할 수 있다. preconnect 를 과도하게 사용할까 우려된다면 비용이 훨씬 저렴한 리소스 힌트인 dns-prefetch 를 사용하자.
dns-prefetch 는 교차 출처 서버에 연결을 설정하지 않고 미리 DNS 조회만 실행한다. 도메인 이름이 기본 IP 주소로 확인되면 DNS 조회가 발생한다. 기기 및 네트워크 수준의 DNS 캐시 레이어를 통해 일반적으로 빠른 프로세스가 가능하지만 여전히 대기 시간이 있다.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">DNS 조회는 비용이 비교적 저렴하며 비용이 상대적으로 적기 때문에 경우에 따라 preconnect 보다 더 적합한 도구일 수 있다. 특히 사용자가 따라갈 가능성이 높은 다른 웹사이트로 이동하는 링크의 경우에 사용하는 것이 바람직한 리소스 힌트일 수 있다.
2. preload
preload 는 특정 리소스를 미리 가져오도록 브라우저에 지시한다. 예를 들어, 웹 폰트를 preload하면 해당 리소스가 실제로 사용되기 전에 다운로드가 완료된다.
preconnect 와 마찬가지로 글꼴과 같은 CORS 리소스를 미리 로드하는 경우 preload 지시어에는 crossorigin 속성이 필요하다.
<link rel="preload" href="/fonts/my-font.woff2" as="font" crossorigin="anonymous">웹 폰트가 늦게 로드되면 텍스트가 기본 폰트로 잠시 표시되는 FOUT 현상이 발생할 수 있는데, 이를 preload로 방지할 수 있다.
3. prefetch
prefetch 는 브라우저가 향후 필요할 가능성이 있는 리소스를 미리 가져오도록 지시한다. preload 와 다르게, 현재 화면에서 즉시 필요하지 않지만 다음에 필요할 가능성이 있는 리소스를 미리 로드하는 역할을 한다. prefetch 는 다른 속성 값에 비해 우선순위가 상대적으로 낮다.
<link rel="prefetch" href="/next-page.css" as="style">사용자가 페이지에서 버튼을 클릭해 다음 화면으로 이동할 가능성이 높을 경우, 다음 화면에 필요한 css 리소스를 미리 준비하는 방식으로 사용할 수 있다.
정리
preconnect, preload, prefetch의 우선순위를 정하자면
preload > preconnect > prefetch 이다.
이 리소스 힌트를 사용하는 이유는 웹 페이지의 로딩 성능을 최적화하고 사용자 경험을 개선하기 위함이다.
래퍼런스(Reference)
주제 - https://www.maeil-mail.kr/question/159
리소스 - https://web.dev/learn/performance/resource-hints?hl=ko
