preload

preload는 link요소의 rel 속성의 값 중 하나로,
다른 리소스보다 먼저 가져와야 하는 리소스가 있을 때 사용합니다.

주로 폰트, 이미지 등의 렌더링에 중요한 리소스를 먼저 가져와야 할 때 쓰이며, 주요 리소스를 아직 가져오지 못 했을 때 발생하는 렌더링 차단이 발생할 가능성이 낮아져 렌더링 성능이 높아질 수 있습니다.

preload를 사용해 가져오는 리소스가 많아질수록 렌더링이 늦어지기 떄문에
사용자 경험이 안 좋아지니 중요도가 높은 리소스만 preload를 사용해야 합니다.

다양한 리소스를 preload로 가져올 수 있는데 그 중 폰트를 preload로 가져오는 것을 알아보겠습니다.

웹 폰트 로딩 지연 현상

어떤 사이트에 접근 시 글자가 안 보였다가 얼마 후에 표시되거나 글자는 보이는데 폰트가 나중에 적용되는 경험을 해 본 적이 있을 것입니다.

이런 현상을 FOIT 또는 FOUT라고 하는데,
FOIT(Flash of Invisible Text)는 웹 폰트를 가져오기 전, 텍스트가 보이지 않는 현상을 말하고,
FOUT(Flash of Unstyled Text)는 웹 폰트를 가져오기 전, 대체 폰트가 적용되어 먼저 렌더링되는 현상을 말합니다.

웹 폰트가 적용된 텍스트 렌더링 시,
해당 웹 폰트가 가져와지기 전까지
FOIT과 FOUT 중 어떤 것으로 렌더링할 지는 font-display 속성을 통해 설정할 수 있습니다.

• swap
  웹 폰트 다운로드 완료 전까지 fallback font가 적용됩니다.
• block
  웹 폰트 다운로드 완료 전까지 텍스트를 숨기고, 3초 내에 다운로드가 완료되지 않을 시 fallback font가 적용됩니다.
• fallback
  0.1초 정도 텍스트가 보이지 않다가 fallback font가 적용됩니다. 이후 3초 이내로 다운로드가 완료되지 않았다면 계속 fallback font를 적용합니다.
• Optional
  0.1초 정도 텍스트가 보이지 않다가 fallback font가 적용됩니다.
  

웹 폰트 preload

웹 폰트를 preload하면 실제 웹 폰트가 사용되는(필요한) 시점에 이미 백그라운드 작업 으로 웹 폰트를 다운로드 완료한 상태가 됩니다.
사용자는 더 이상 텍스트 렌더링 지연을 겪지 않아도 되니 사용자 경험이 높아집니다.

<link
  rel="preload"
  href="웹 폰트 URL"
  as="font"
  type="폰트 형식" //ex. font/woff2
  cross-origin
/>

cross-origin 속성은 다른 도메인에서 폰트 파일을 다운로드할 때 사용됩니다.
예를 들어 폰트 파일이 CDN에 저장되어 있는 경우 사용할 수 있습니다.

브라우저 호환성

현재 사파리, 모바일 오페라에서는 지원이 안 되고, 다른 브라우저에서는 지원하고 있습니다.
지원되는 브라우저에서도 preload는 지원하더라도 as의 값으로 audio나 document 등이 지원되지 않는 경우도 있다고 하니 preload 브라우저 호환성 MDN 사용 전 확인해 보시기 바랍니다.

마지막으로

1. preload를 사용하더라도 폰트를 가져오지 못하는 경우가 있으니 대체 폰트 지정은 필수입니다!

2. 용량이 큰 폰트를 여러 개 preload 가져오려 하면 오히려 렌더링 성능이 나빠지니 일관된 폰트를 사용해 사용되는 폰트 수를 줄이는 것이 좋습니다.

3. WOFF2 폰트 형식은 폰트 파일 크기를 줄여 로딩 시간을 단축하는 압축 형식입니다.
   로딩 속도와 함께 렌더링 성능을 향상 시킬 수 있으니 WOFF2 폰트 형식을 사용하시는 것을 추천드립니다.