HTML rel=preload 올바른 이해와 사용 방법

`<link rel="preload">`

<link> 태그의 rel="preload"는
브라우저에게 href 속성으로 지정한 리소스를 로드 순서대로 기다리지 않고 우선순위로 즉시 다운로드 및 캐싱하도록 설정합니다.
<head> 태그 내에 사용되며, 주로 우선적으로 다운로드해야 할 웹폰트, 이미지, CSS 파일 등의 리소스에 활용됩니다.

웹 페이지가 렌더링되었지만, 화면에 표시되는 글꼴이나 이미지와 같은 리소스가 아직 로드되지 않아 로드가 완료되는 시간을 기다려야 하는 경우가 있습니다.

아래는 <link> 태그의 rel="preload"를 사용해서 화면에 표시되는 웹폰트를 미리 다운로드함으로써, 웹 페이지가 렌더링되는 시점에 적용할 텍스트에 미리 로드된 웹폰트를 바로 적용하도록 설정하는 코드 예제입니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>rel=preload 예제 소스</title>
        <!-- 웹폰트 파일을 사전 로드하여 페이지 로딩 성능을 최적화 -->
        <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
        <!-- 웹폰트 스타일이 포함된 스타일시트 연결 -->
        <link rel="stylesheet" href="webfont.css">
    </head>
    <body>
        <!-- 미리 로드된 웹폰트를 텍스트에 바로 적용 -->
        <h1>rel=preload 예제 소스</h1>
        <!-- 추가 콘텐츠 -->
    </body>
</html>

이렇게 하면, 웹 페이지가 렌더링되는 시점 이전에
해당 리소스를 다른 리소스보다 우선적으로 즉시 다운로드하기 때문에,
리소스가 필요할 때 즉시 사용할 수 있도록 로드되는 시간을 최대한 절약할 수 있습니다.
이를 통해 페이지 로딩 성능을 최적화할 수 있습니다.

<link> 태그의 rel="preload"는 다음의 경우처럼 크기가 크거나 늦게 발견되는 리소스에 유용합니다.

웹폰트나 배경이미지 등 스타일시트에 명시되어 사용할 리소스
웹 페이지가 로드될 때 표시되는 크기가 큰 이미지
웹 페이지가 로드될 때 플레이되는 크기가 큰 비디오 파일(주의: 대부분의 브라우저에서 지원하지 않음)
자바스크립트가 요청할 수 있는 JSON, 웹 워커, import된 스크립트 등의 리소스

구문

<link> 태그의 rel="preload"의 구문은 다음과 같습니다.
<head> 태그 내에서 사용되며 href, as, 그리고 필요에 따라 type, crossorigin, media 속성을 추가해서 사용합니다.

속성 설명

`href="리소스 경로"` (필수)

미리 로드할 리소스의 URL을 지정합니다.

`as="리소스 타입"` (필수)

로드할 리소스의 타입을 지정합니다.
다양한 리소스 타입을 지정할 수 있으며, 지정 가능한 값은 다음과 같습니다.

link 태그의 rel="preload"에 사용되는 as 속성으로 지정 가능한 값
`font`	폰트 파일
`image`	이미지 파일
`video`	비디오 파일. 명세서에서는 명시되어 있으나 대부분의 브라우저에서 지원하지 않음
`style`	CSS 파일
`script`	자바스크립트 파일
`fetch`	Fetch 요청이나 XHR 요청 리소스
`track`	WebVTT 파일 명세서에서는 명시되어 있으나 일부 브라우저에서 지원하지 않음

HTML as="리소스 타입" 예시

<!-- as="font" -->
<link 
    rel="preload"
    href="font.woff2"
    as="font">

<!-- as="image" -->
<link 
    rel="preload"
    href="sample-image.png"
    as="image">

<!-- as="style" -->
<link 
    rel="preload"
    href="sample-style.css"
    as="style">

<!-- as="script" -->
<link 
    rel="preload"
    href="sample-script.js"
    as="script">

<!-- as="fetch" -->
<link 
    rel="preload"
    href="sample-fetch.json"
    as="fetch">

`type="MIME 타입"` (옵션)

리소스의 MIME 타입을 지정합니다. 예를 들어, 폰트 파일의 경우 type="font/woff2"와 같이 설정할 수 있습니다.

type 속성을 사용해서 리소스의 MIME 타입을 명시적 지정하면 브라우저는 해당 리소스를 지원할 때에만 작업을 수행합니다. 이는 브라우저가 리소스를 올바르게 해석하고 적절히 처리할 수 있도록 도와줍니다.

명시적으로 MIME 타입을 지정하는 것이 리소스를 더 잘 처리하고 향상된 호환성을 제공할 수 있습니다.

하지만, 명시적인 MIME 타입을 지정하지 않아도 됩니다.
대부분의 경우 브라우저는 자동으로 리소스의 MIME 타입을 감지하고 처리합니다. 특히 최신 브라우저들은 이를 매우 잘 처리하므로 명시적으로 type 속성을 생략해도 됩니다.

`crossorigin` (옵션)

CORS 요청을 위한 설정입니다. 외부 출처의 리소스를 로드할 때 사용합니다.

프로토콜과 도메인이 일치해야 '동일 출처'라고 합니다. 포트가 명시된 경우에는 포트도 일치해야 합니다. '외부 출처'란 '동일 출처'가 아닌 것을 말합니다.

crossorigin 속성은
해당 요소에 링크된 외부 출처의 리소스와 현재 웹 페이와의 상호작용을 할 수 있도록
교차 출처 리소소 공유(CORS, Cross-Origin Resource Sharing) 체계에서 처리하는 설정 방법을 지정하는 속성입니다.

리소스가 폰트 파일을 경우에는 동일 출처라 하더라도 다양한 이유로 인해 익명 모드 CORS를 사용하여 가져와야 합니다.

일반적인 리소스와 달리, 웹 폰트는 CSS의 @font-face 규칙을 사용하여 웹 페이지에 로드됩니다. 이 삽입 과정에서 브라우저는 백그라운드에서 일부 CORS 요청을 트리거할 수 있습니다. 따라서 동일 출처의 웹 폰트 리소스를 <link> 태그의 rel="preload"로 설정하더라도 crossorigin 속성을 anonymous으로 사용하여 실제 폰트 로딩 간의 CORS 모드 일치를 보장하는 것이 좋습니다.

HTML 동일 출처의 폰트파일이지만 crossorigin 속성을 anonymous으로 사용한 예시 코드

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

`media` (옵션)

<link> 태그에는 media 속성으로 미디어 조건을 지정하여 특정 미디어 유형에 따라 리소스를 가져올 수 있습니다.

rel="preload"을 설정한 리소소를 media 속성으로 미디어 조건을 지정할 수 있습니다. 다음은 media 속성을 사용한 예제 코드입니다.

HTML

<link
    rel="preload"
    as="image"
    href="mobile.png"
    media="(max-width: 600px)">
<link
    rel="preload"
    as="image"
    href="desktop.png"
    media="(min-width: 601px)">

위 코드 예제에서는 사용자가 좁은 폭의 뷰포트를 가지고 있는 경우 작은 이미지를 미리 로드하고, 넓은 폭의 뷰포트를 가지고 있는 경우 더 큰 이미지를 미리 로드하기 위해 <link>에 media 속성을 포함했습니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

`rel="preload"`와 `rel="prefetch"`

<link rel="prefetch">는
현재 웹 페이지에서 사용자가 다음으로 이동할 가능성이 높은 페이지 또는 페이지 로딩 후에 로드되는 리소스를 미리 로딩하여 캐시에 저장할 때 사용합니다.

rel="preload"와 <link rel="prefetch">를 비교해 보겠습니다.

rel preload와 prefetch 비교
비교	`rel="preload"`	`rel="prefetch"`
사용 목적	현재 웹 페이지에서 우선순위로 즉시 다운로드 및 캐싱하기 위해서(현재 사용할 리소스의 로딩 속도를 높이기 위해서)	현재 웹 페이지에서 사용자가 다음으로 이동할 가능성이 높은 페이지 또는 페이지 로딩 후에 로드되는 리소스를 미리 로딩하여 캐시에 저장하기 위해서(다음에 사용할 리소스의 로딩 속도를 높이기 위해서)
리소스 출처	동일 출처의 리소스와 외부 출처의 리소스 사용이 모두 가능	동일 출처의 리소스에만 사용이 가능
리소스 로딩 우선순위	로드 순서대로 기다리지 않고 우선순위로 즉시	`rel="preload"`보다 더 낮은 우선순위 부여

주의할 점

<link> 태그의 rel="preload"는 현재 페이지에서 반드시 사용되는 리소스에만 사용되어야 합니다.
그렇지 않으면 브라우저에게 불필요한 부하를 줄 수 있습니다. 또한, 대부분의 브라우저에서는 리소스를 가져왔지만 일정 시간동안 사용하지 않으면 브라우저 콘솔에 경고 문구가 출력됩니다. 필요하지 않는 리소스에 설정하지 않도록 주의해야 합니다.

브라우저 호환성

link 태그의 rel=preload 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<link rel="preload">`	50	79	85	11.1

명세서

link 태그의 rel=preload 명세서 사양
명세서 사양
`<link rel="preload">`	HTML Standard #link-type-preload

HTML rel=preload 올바른 이해와 사용 방법

`<link rel="preload">`

구문

속성 설명

`href="리소스 경로"` (필수)

`as="리소스 타입"` (필수)

`type="MIME 타입"` (옵션)

`crossorigin` (옵션)

`media` (옵션)

`rel="preload"`와 `rel="prefetch"`

주의할 점

브라우저 호환성

명세서

참고문헌

같이 보기

<link rel="preload">

구문

속성 설명

href="리소스 경로" (필수)

as="리소스 타입" (필수)

type="MIME 타입" (옵션)

crossorigin (옵션)

media (옵션)

rel="preload"와 rel="prefetch"

주의할 점

브라우저 호환성

명세서

참고문헌

같이 보기

`<link rel="preload">`

`href="리소스 경로"` (필수)

`as="리소스 타입"` (필수)

`type="MIME 타입"` (옵션)

`crossorigin` (옵션)

`media` (옵션)

`rel="preload"`와 `rel="prefetch"`