<link> 는 외부 리소스와의 연결을 돕는 요소이며, rel 속성 값인 preconnect, preload, prefetch는 리소스 로드의 우선수위를 설정하여 로드 성능을 최적화하기 위해 사용됩니다.

Preconnect

목적 : 브라우저가 외부 도메인과의 연결을 미리 설정하여 네트워크 지연을 줄임.

작동 방식 : DNS 조회, TLS 핸드 셰이크, TCP 연결을 미리 완료하여 리소스 로드 지연을 줄임

사용 예시 : 외부 API나 CDN의 리소스를 사용할 경우 preconnect를 사용하면 첫 번째 요청의 대기 시간을 줄일 수 있음.

<link rel="preconnect" href="https://external-resource.com" crossorigin="anonymous">

→ 사용하지 않을 리소스에 적용하면 오히려 네트워크 자원을 낭비할 수 있음.

Preload

목적 : 현재 페이지에서 곧 사용할 특정 리소스를 미리 가져오도록 브라우저에 지시하여 렌더링 속도 향상

작동 방식 : 브라우저가 리소스를 백그라운드에서 미리 다운로드하지만, 즉시 적용하지는 않음

사용 예시 : 폰트, 이미지, 비디오, CSS, JS 등 특정 리소스를 빠르게 로드 해야할 때 사용

→ 웹 폰트가 늦게 로드되면 텍스트가 기본 폰트로 잠시 표시되는 FOUT 현상이 발생하는 것은 preload가 방지할 수 있습니다.

<link rel="preload" href="/fonts/my-font.woff2" as="font" crossorigin="anonymous">

→ as 속성을 사용해 리소스의 유형을 정확하게 지정하여 브라우저에 알려줘야함

prefetch

목적 : 브라우저가 향후 필요할 가능성이 있는 리소스를 미리 가져오도록 지시합니다.

작동 방식 : preload와는 다르게, 현재 화면에 즉시 필요하지 않지만 다음에 필요할 가능성이 있는 리소스를 미리 로드

사용 예시 : 다음 페이지에서 필요한 가능성이 높은 리소스를 미리 로드할 때 사용

<link rel="prefetch" href="/next-page.css" as="style">

→ prefetch는 다른 속성 값에 비해 우선순위가 상대적으로 낮습니다.

→ 사용자가 페이지에서 버튼을 클릭해 다음 화면으로 이동할 가능성이 높을 경우, 다음 화면에 필요한 css 리소스를 미리 준비하는 방식으로 사용할 수 있습니다.

---

속성	목적	작동 방식	사용
preconnect	외부 서버와의 연결을 미리 설정	DNS, TCP, TLS 핸드셰이크 미리 수행	외부 리소스 요청이 많은 경우
preload	현재 페이지에서 곧 사용할 리소스 미리 다운로드	브라우저가 즉시 다운로드, as 속성 필요	중요 리소스를 빠르게 로드해야 할 때
prefetch	미래에 사용할 가능성이 있는 리소스를 미리 다운로드	브라우저가 여유 리소스를 활용하여 미리 로드	다음 페이지 또는 다음 인터랙션을 대비할 때