link 요소
: 외부 리소스와의 연결을 돕는 요소, rel 속성 값인 preconnect , preload, prefetch는 리소스 로드의 우선순위를 설정하여 로드 성능을 최적화하기 위해 사용된다.
1. preconnect
: 브라우저가 특정 origin에 대한 네트워크 연결을 미리 설정하도록 지시한다.
→ DNS 조회, TLS 핸드셰이크, TCP 연결을 미리 완료하여 리소스 로드 지연을 줄일 수 있다.
→ 외부 API나 CDN의 리소스를 사용할 경우에 사용하면 첫 번째 요청의 대기 시간을 줄일 수 있다.
<link rel="preconnect" href="https://external-resource.com" crossorigin="anonymous">2. preload
:특정 리소스를 미리 가져오도록 브라우저에 지시한다.
ex) 웹 폰트 preload → 리소스가 실제로 사용되기 전에 다운로드가 완료 된다.
<link rel="preload" href="/fonts/my-font.woff2" as="font" crossorigin="anonymous">3. prefetch
: 브라우저가 향후 필요할 가능성이 있는 리소스를 미리 가져오도록 지시한다.
→ preload와 다른점: 현재 화면에 즉시 필요하지 않지만 다음에 필요할 가능성이 있는 리소스를 미리 로드하는 역할을 한다.
→ 다른 속성 값에 비해 우선 순위가 낮다.
<link rel="prefetch" href="/next-page.css" as="style">
밍구르기