이 Codelab에서는 rel="preload"를 사용하여 웹 글꼴을 미리 로드하여 스타일이 지정되지 않은 텍스트 (FOUT)의 플래시를 삭제하는 방법을 보여줍니다.
측정
최적화를 추가하기 전에 먼저 웹사이트 실적을 측정하세요.
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다. - `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
생성되는 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.woff2가 중요한 요청 체인에서 어떻게 삭제되는지 확인하세요. 애플리케이션에서 먼저 가져옵니다.
미리 로드를 사용하면 브라우저가 이 파일을 더 일찍 다운로드해야 한다는 것을 인지하게 됩니다. 제대로 사용하지 않을 경우 미리 로드가 사용되지 않는 리소스를 불필요하게 요청하여 성능을 저하시킬 수 있다는 점에 유의해야 합니다.