LinkLink 헤더는 HTML의 `<link>` 요소와 동일한 링크 관계를 HTTP 응답 헤더로 표현한 것입니다. 본문을 파싱하기 전에도 브라우저·크롤러가 관련 자원(스타일·폰트·다음 페이지·정본 URL 등)을 미리 알 수 있게 합니다.
각 링크는 `<URL>; rel=관계` 형태이며, 쉼표로 여러 개를 나열하고 세미콜론으로 파라미터(`as`, `type`, `crossorigin` 등)를 붙입니다.
성능 관점에서 가장 중요한 용도는 `rel=preload`·`rel=preconnect`입니다. 문서보다 먼저 도착하는 헤더로 임계 자원(CSS·웹폰트·히어로 이미지)을 조기 로드하거나, 서드파티 오리진에 미리 접속(DNS+TCP+TLS)해 렌더링 병목을 줄일 수 있습니다. `preload`에는 `as=`가 필수이며, 폰트처럼 CORS가 필요한 자원은 `crossorigin`을 반드시 붙여야 중복 다운로드를 피합니다.
SEO·구조 측면에서는 `rel=canonical`(정본 URL), `rel=alternate`(다국어·미디어 대체, `hreflang`·`type` 동반), `rel=next`/`rel=prev`(페이지네이션) 등을 헤더로 선언할 수 있습니다. HTML을 파싱할 수 없는 자원(PDF·이미지)에도 정본을 부여할 수 있다는 것이 헤더 방식의 장점입니다.
103 Early Hints 응답과 결합하면 강력합니다. 서버가 최종 응답을 준비하는 동안 103과 함께 `Link: rel=preload`를 먼저 보내면, 브라우저는 본 응답을 기다리는 시간에 자원을 미리 받아 체감 로딩을 앞당깁니다. HTTP/2 서버 푸시가 사실상 폐기된 뒤 이 조합이 그 대안으로 자리잡았습니다.
Link: <uri-ref>; rel=<relation>[; <param>=<value>]*e.g. Link: </style.css>; rel=preload; as=style
rel=<relation> | 링크 관계 타입. `preload`·`preconnect`·`dns-prefetch`·`prefetch`·`canonical`·`next`·`prev`·`alternate` 등. |
rel=preload | 현재 페이지에 필요한 자원을 브라우저가 조기에 고우선순위로 가져오게 함. `as=`로 자원 유형 지정 필수. |
rel=preconnect | 지정 오리진에 DNS·TCP·TLS 핸드셰이크를 미리 수행해 이후 요청 지연을 줄임. |
as=<type> | preload 대상 자원 유형(script·style·font·image 등). 우선순위·CORS·수용 처리를 결정. |
crossorigin | 폰트 등 CORS가 필요한 자원의 preload에 반드시 필요. 누락 시 중복 다운로드 발생. |