웹 글꼴을 미리 로드하여 로드 속도 개선

Garima Mimani
Garima Mimani

이 Codelab에서는 rel="preload"를 사용하여 웹 글꼴을 미리 로드하여 스타일이 지정되지 않은 텍스트 (FOUT)의 플래시를 삭제하는 방법을 보여줍니다.

측정

최적화를 추가하기 전에 먼저 웹사이트의 실적을 측정하세요.

  1. 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면전체 화면을 누릅니다.
  2. `Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. Lighthouse 탭을 클릭합니다.
  4. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
  5. 보고서 생성 버튼을 클릭합니다.

생성된 Lighthouse 보고서의 최대 중요 경로 지연 시간 아래에 리소스 가져오기 시퀀스가 표시됩니다.

웹 글꼴이 중요 요청 체인에 있습니다.

위 감사에서 웹 글꼴은 중요한 요청 체인의 일부이며 마지막으로 가져옵니다. 주요 요청 체인은 브라우저에서 우선순위를 지정하고 가져오는 리소스의 순서를 나타냅니다. 이 애플리케이션에서 웹 글꼴(Pacfico 및 Pacifico-Bold)은 @font-face 규칙을 사용하여 정의되며 중요한 요청 체인에서 브라우저가 가져온 마지막 리소스입니다. 일반적으로 웹폰트는 지연 로드됩니다. 즉, 중요한 리소스(CSS, JS)가 다운로드될 때까지 로드되지 않습니다.

다음은 애플리케이션에서 가져온 리소스의 시퀀스입니다.

웹폰트는 지연 로드됩니다.

웹 글꼴 미리 로드

FOUT을 방지하려면 즉시 필요한 웹 글꼴을 미리 로드하면 됩니다. 문서 헤드에 이 애플리케이션의 Link 요소를 추가합니다.

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

as="font" type="font/woff2" 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하며 리소스 대기열의 우선순위를 지정하는 데 도움이 됩니다.

crossorigin 속성은 글꼴이 다른 도메인에서 가져올 수 있으므로 리소스를 CORS 요청으로 가져와야 하는지 나타냅니다. 이 속성이 없으면 브라우저에서 미리 로드된 글꼴을 무시합니다.

페이지 헤더에 Pacifico-Bold가 사용되므로 미리 로드 태그를 추가하여 더 빨리 가져올 수 있습니다. Pacifico.woff2 글꼴은 접힌 아래의 텍스트에 스타일을 지정하므로 미리 로드할 필요가 없습니다.

애플리케이션을 새로고침하고 Lighthouse를 다시 실행합니다. 최대 중요 경로 지연 시간 섹션을 확인합니다.

Pacifico-Bold 웹폰트가 미리 로드되고 중요한 요청 체인에서 삭제됨

Pacifico-Bold.woff2가 중요 요청 체인에서 삭제되는 방식을 확인합니다. 애플리케이션에서 더 일찍 가져옵니다.

Pacifico-Bold 웹폰트가 미리 로드됨

미리 로드하면 브라우저는 이 파일을 더 일찍 다운로드해야 한다는 것을 알 수 있습니다. 올바르게 사용하지 않으면 미리 로드가 사용되지 않는 리소스에 대한 불필요한 요청을 실행하여 성능에 해를 미칠 수 있다는 점에 유의해야 합니다.