정의 및 사용 방법
- 리소스(resource)
- 웹에서 접근할 수 있는 다양한 파일이나 데이터를 의미합니다. HTML 문서, 이미지, 스타일시트(CSS), 자바스크립트 파일은 물론이고, 폰트 파일, 비디오, 오디오 파일 등 웹 페이지의 콘텐츠를 구성하거나 기능을 구현하는 데 사용되는 다양한 유형의 파일들을 말합니다.
웹 페이지를 렌더링하는 과정에서 화면에 표시되는 글꼴이나 이미지와 같은 리소스가 완전히 로드되지 않아 해당 리소스의 로드 완료를 기다려야 하는 경우가 있습니다. 이때, 사전 로드된 리소스를 활용하면 페이지 로딩 시간을 단축해 로딩 성능을 향상시킬 수 있습니다.
기본 예제
아래는 <link> 태그의 rel="preload"를 사용해서 화면에 표시되는 웹폰트를 미리 다운로드함으로써, 웹 페이지가 렌더링되는 시점에 적용할 텍스트에 미리 로드된 웹폰트를 바로 적용하도록 설정하는 코드 예제입니다.
<link> 태그의 rel="preload"는 다음의 경우처럼 로드 시간이 오래 걸리거나 현재 페이지에서 필요한 시점에 바로 사용할 수 있도록 준비해야 하는 리소스에 유용합니다.
- 웹 페이지가 로드될 때 사용자에게 바로 표시되는 웹폰트나 큰 이미지
- 웹 페이지가 로드될 때 바로 재생해야 하는 용량이 큰 비디오 파일(주의: 대부분의 브라우저에서 지원하지 않음)
- 웹 페이지의 동작을 위해 자바스크립트에서 빠르게 사용해야 하는 JSON, 웹 워커, import된 스크립트 등의 리소스
구문
<link> 태그의 rel="preload"의 구문은 다음과 같습니다.
<head> 태그 내에서 사용되며 href, as, 그리고 필요에 따라 type, crossorigin, media 속성을 추가해서 사용합니다.
속성 설명
href="리소스 경로" (필수)
미리 로드할 리소스의 URL을 지정합니다.
as="리소스 타입" (필수)
로드할 리소스의 타입을 지정합니다.
다양한 리소스 타입을 지정할 수 있으며, 지정 가능한 값은 다음과 같습니다.
font |
폰트 파일 |
|---|---|
image |
이미지 파일 |
video |
비디오 파일
명세서에서는 명시되어 있으나 대부분의 브라우저에서 지원하지 않음 |
style |
CSS 파일 |
script |
자바스크립트 파일 |
fetch |
Fetch 요청이나 XHR 요청 리소스 |
track |
WebVTT 파일
명세서에서는 명시되어 있으나 일부 브라우저에서 지원하지 않음 |
type="MIME 타입" (옵션)
리소스의 MIME 타입을 지정합니다. 예를 들어, 폰트 파일의 경우 type="font/woff2"와 같이 설정할 수 있습니다.
type 속성을 사용해서 리소스의 MIME 타입을 명시적 지정하면 브라우저는 해당 리소스를 지원할 때에만 작업을 수행합니다. 이는 브라우저가 리소스를 올바르게 해석하고 적절히 처리할 수 있도록 도와줍니다.
명시적으로 MIME 타입을 지정하는 것이 리소스를 더 잘 처리하고 향상된 호환성을 제공할 수 있습니다.
하지만, 명시적인 MIME 타입을 지정하지 않아도 됩니다.
대부분의 경우 브라우저는 자동으로 리소스의 MIME 타입을 감지하고 처리합니다. 특히 최신 브라우저들은 이를 매우 잘 처리하므로 명시적으로 type 속성을 생략해도 됩니다.
crossorigin (옵션)
CORS 요청을 위한 설정입니다. 외부 출처의 리소스를 로드할 때 사용합니다.
crossorigin 속성은
해당 요소에 링크된 '외부 출처'의 리소스를 가져올 때 CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing) 요청 방식을 지정하는 속성입니다.
- 외부 출처
- 외부 출처란 현재 웹 페이지의 프로토콜(예:
http://또는https://), 도메인(예:example.com) 중 하나라도 다른 주소를 말합니다. 만약 도메인 다음에 포트(예:example.com:8080)가 있다면 포트도 출처를 구분하는 기준에 포함됩니다.
- CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)
- CORS는 웹 브라우저가 보안상의 이유로 차단될 수 있는 '외부 출처'의 리소스에 접근할 수 있도록 요청하고 허용하는 웹 표준 메커니즘입니다.
리소스가 폰트 파일인 경우에는 동일 출처라 하더라도 다양한 이유로 인해 익명 모드 CORS를 사용하여 가져와야 합니다.
일반적인 리소스와 달리, 웹 폰트는 CSS의 @font-face 규칙을 사용하여 웹 페이지에 로드됩니다. 이 삽입 과정에서 브라우저는 백그라운드에서 일부 CORS 요청을 트리거할 수 있습니다. 따라서 동일 출처의 웹 폰트 리소스를 <link> 태그의 rel="preload"로 설정하더라도 crossorigin 속성을 anonymous으로 사용하여 실제 폰트 로딩 간의 CORS 모드 일치를 보장하는 것이 좋습니다.
media (옵션)
<link> 태그에는 media 속성으로 미디어 조건을 지정하여 특정 미디어 유형에 따라 리소스를 가져올 수 있습니다.
rel="preload"을 설정한 리소스를 media 속성으로 미디어 조건을 지정할 수 있습니다. 다음은 media 속성을 사용한 예제 코드입니다.
위 코드 예제에서는 사용자가 좁은 폭의 '뷰포트'를 가지고 있는 경우 작은 이미지를 미리 로드하고, 넓은 폭의 '뷰포트'를 가지고 있는 경우 더 큰 이미지를 미리 로드하기 위해 <link> 태그에 media 속성을 포함했습니다.
뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.
rel="preload"와 rel="prefetch"
<link> 태그의 rel="prefetch"는
href 속성으로 지정한 리소스를 브라우저가 미리 로딩하여 캐시에 저장하도록 지정해 줍니다.
현재 웹 페이지에서 사용자가 다음으로 이동할 가능성이 높은 페이지 또는 페이지 로딩 후에 로드되는 리소스(예: 스크립트, 이미지, CSS 파일)를 미리 로딩하여 캐시에 저장할 때 사용합니다.
rel="preload"와 rel="prefetch"를 비교해 보겠습니다.
| 비교 | rel="preload" |
rel="prefetch" |
|---|---|---|
| 시점 | 현재 | 미래 |
| 사용 목적 | 현재 사용할 리소스의 로딩 속도를 높이기 위해서 | 다음에 사용할 리소스의 로딩 속도를 높이기 위해서 |
| 구현 | 현재 페이지에서 필요한 리소스를 사전에 로드하여 준비 | 다음으로 이동할 가능성이 높은 페이지 또는 페이지 로딩 후에 로드되는 리소스를 미리 로딩하여 캐시에 저장 |
주의할 점
<link> 태그의 rel="preload"는 현재 페이지에서 반드시 사용되는 리소스에만 사용되어야 합니다.
그렇지 않으면 브라우저에게 불필요한 부하를 줄 수 있습니다. 또한, 대부분의 브라우저에서는 리소스를 가져왔지만 일정 시간동안 사용하지 않으면 브라우저 콘솔에 경고 문구가 출력됩니다. 필요하지 않는 리소스에 설정하지 않도록 주의해야 합니다.
브라우저 호환성
| 속성 |
데스크탑 Chrome
|
데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<link rel="preload">
|
50 | 79 | 85 | 11.1 |
명세서
| 명세서 사양 | |
|---|---|
<link rel="preload">
|
HTML Standard #link-type-preload |