React 프로젝트의 성능개선을 위해 리팩토링을 하던 중 다음과 같은 코드를 index.html에 추가되었다.
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2"
as="font"
type="font/woff2"
crossorigin />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />프리텐다드 폰트를 불러오는 코드인데, 도대체 이 코드가 성능개선과 어떤 연관이 있는걸까?
지금부터 자세히 알아보자
1. preload란?
<link> 태그의 rel 속성에 사용되는 특성이다.
특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 역할을 한다.
2. 언제 preload를 사용할까
일반적으로 브라우저에서, html 문서를 읽고 스타일시트와 자바스크립트, json 등을 해석하고 기타 리소스들을 파싱한다. 하지만 필요에 의해서 일부 리소를 preload를 통해 예외적으로 리소스들의 파싱(parsing) 순서를 땡겨온다고 생각하면 된다.
주로 preload를 사용하는 대상들은 link태그의 as속성 값들을 확인해보면 알 수 있다.
as 속성 목록
audio
document
embed
fetch
font
image
object
script
style
track
worker
video
3. 그렇다면 다 preload 하면 안되는 건가?
preload를 하게되면 실제로 해당 리소스를 사용하는 것과 상관없이 서버에 우선적으로 요청하여 해당 리소스를 다운로드를 하게 된다. preload를 남용하게 되면 초기 로드 시에 성능을 되려 저하시키는 현상이 발생하게 된다. 그래서 해당 제품의 비즈니스적 관점에서 preload가 꼭 필요하다고 여겨지는 리소스에만 할당해야한다.
4. 예시 코드 뜯어보기
다시 맨 처음 적용했던 예시 코드를 살펴보자.
link 태그에서 rel 속성에 preload를 지정해줬고, as 속성에 font 라고 명시해주었다.
또한, crossorigin 속성 항목도 추가해주었다. 폰트를 preload 하는 경우, 일반적으로 요청하는 곳과 응답하는 곳이 다른 익명모드로 작동하기 때문에 CORS 정책에 따라 crossorigin 속성 명기가 필수이다. (CORS에 대해서는 추후 별도로 다뤄보자.)
