개념

• rel: 현재 문서와 링크된 리소스의 “관계(relationship)”를 나타내는 속성으로, 값에 따라 브라우저의 로딩 전략과 의미가 달라진다.
• as: 리소스의 종류를 지정해 프리로드의 우선순위, 보안 체크(CSP), 캐시 키 등을 정확히 설정하게 한다. 주로 rel="preload" 또는 rel="modulepreload"와 함께 사용한다.

속성 값

rel

• preload: 현재 네비게이션에서 바로 필요한 리소스를 사전 로드(우선순위 높음). as 필수.
• prefetch: 이후 페이지 전환 등 “향후” 필요 가능성이 높은 리소스를 미리 가져와 캐시에 저장(우선순위 낮음).
• preconnect: 외부 오리진에 DNS/TCP/TLS 연결만 먼저 맺어 네트워크 지연을 줄임(리소스 자체는 로드 안 함).
• modulepreload: ES 모듈 스크립트를 사전 가져와 모듈 맵에 저장(의존성까지 프리패치 가능).
• dns-prefetch, stylesheet, icon 등도 사용 컨텍스트에 따라 지원됨.

as

• 허용 값 예: audio, document, embed, fetch, font, image, object, script, style, track, video, worker 등.
• preload엔 반드시 필요하며, modulepreload에선 생략 시 기본값 script로 처리된다.
• prefetch에는 설정하지 않는다.

주의사항

• as 속성을 쓰면 rel은 preload 또는 modulepreload 여야 한다. 그렇지 않으면 검증 에러가 난다.

예시

<link rel="preload" href="/assets/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">