웹 글꼴 최적화

이전 모듈에서는 HTML, CSS, JavaScript, 미디어 리소스를 최적화하는 방법을 알아봤습니다. 이 모듈에서는 웹 글꼴을 최적화하는 몇 가지 방법을 알아봅니다.

웹 글꼴은 로드 시간과 렌더링 시간 모두에서 페이지 성능에 영향을 줄 수 있습니다. 글꼴 파일이 크면 다운로드하는 데 시간이 오래 걸리고 최대 콘텐츠 렌더링 시간 (FCP)에 부정적인 영향을 미칠 수 있으며, 잘못된 font-display은 페이지의 누적 레이아웃 변경(CLS)에 영향을 미치는 바람직하지 않은 레이아웃 변경을 유발할 수 있습니다.

웹 글꼴 최적화에 대해 논의하기 전에 브라우저에서 웹 글꼴을 검색하는 방법을 알면 특정 상황에서 CSS가 불필요한 웹 글꼴의 검색을 방지하는 방법을 이해하는 데 도움이 됩니다.

디스커버리

페이지의 웹 글꼴은 @font-face 선언을 사용하여 스타일 시트에 정의됩니다.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

위 코드 스니펫은 "Open Sans"이라는 font-family를 정의하고 브라우저에 해당 웹 글꼴 리소스를 찾을 위치를 알려줍니다. 대역폭을 절약하기 위해 브라우저는 현재 페이지의 레이아웃에 웹 글꼴이 필요한 것으로 확인될 때까지 웹 글꼴을 다운로드하지 않습니다.

h1 {
  font-family: "Open Sans";
}

위 CSS 스니펫에서 브라우저는 페이지의 HTML에서 <h1> 요소를 파싱할 때 "Open Sans" 글꼴 파일을 다운로드합니다.

preload

@font-face 선언이 외부 스타일 시트에 정의된 경우 브라우저는 스타일 시트를 다운로드한 후에만 다운로드를 시작할 수 있습니다. 이렇게 하면 웹 글꼴이 나중에 발견되는 리소스가 되지만 브라우저가 웹 글꼴을 더 빨리 발견하도록 도울 수 있습니다.

preload 지시어를 사용하여 웹 글꼴 리소스에 대한 사전 요청을 시작할 수 있습니다. preload 지시어를 사용하면 페이지 로드 중에 웹 글꼴을 일찍 검색할 수 있으며, 브라우저는 스타일 시트의 다운로드 및 파싱이 완료될 때까지 기다리지 않고 즉시 다운로드를 시작합니다. preload 지시어는 페이지에 글꼴이 필요할 때까지 기다리지 않습니다.

<!-- The `crossorigin` attribute is required for fonts—even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

인라인 @font-face 선언

<style> 요소를 사용하여 HTML의 <head>@font-face 선언을 포함한 렌더링 차단 CSS를 인라인으로 처리하면 페이지 로드 중에 글꼴을 더 일찍 검색할 수 있습니다. 이 경우 브라우저는 외부 스타일 시트가 다운로드될 때까지 기다릴 필요가 없으므로 페이지 로드 시 웹 글꼴을 더 일찍 검색합니다.

@font-face 선언을 인라인으로 처리하면 브라우저가 현재 페이지를 렌더링하는 데 필요한 글꼴만 다운로드하므로 preload 힌트를 사용하는 것보다 이점이 있습니다. 이렇게 하면 사용하지 않는 글꼴을 다운로드할 위험이 없어집니다.

다운로드

웹 글꼴을 발견하고 현재 페이지의 레이아웃에 필요한지 확인한 후 브라우저가 이를 다운로드할 수 있습니다. 웹 글꼴 수, 인코딩, 파일 크기는 브라우저에서 웹 글꼴을 다운로드하고 렌더링하는 속도에 큰 영향을 미칠 수 있습니다.

웹 글꼴 자체 호스팅

웹 글꼴은 Google Fonts와 같은 서드 파티 서비스를 통해 제공되거나 출처에서 자체 호스팅될 수 있습니다. 서드 파티 서비스를 사용하는 경우 필요한 웹 글꼴을 다운로드하기 전에 웹페이지에서 제공업체의 도메인에 대한 연결을 열어야 합니다. 이로 인해 웹 글꼴의 검색 및 후속 다운로드가 지연될 수 있습니다.

이 오버헤드는 preconnect 리소스 힌트를 사용하여 줄일 수 있습니다. preconnect를 사용하면 브라우저가 일반적으로 연결하는 것보다 더 빨리 교차 출처에 대한 연결을 열도록 브라우저에 지시할 수 있습니다.

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

위의 HTML 스니펫은 브라우저가 fonts.googleapis.com에 연결하고 fonts.gstatic.comCORS 연결을 설정하도록 힌트를 제공합니다. Google Fonts와 같은 일부 글꼴 제공업체는 서로 다른 출처에서 CSS 및 글꼴 리소스를 제공합니다.

웹 글꼴을 자체 호스팅하면 서드 파티 연결이 필요하지 않습니다. 대부분의 경우 자체 호스팅 웹 글꼴이 교차 출처에서 다운로드하는 것보다 빠릅니다. 웹 글꼴을 자체 호스팅할 계획이라면 사이트에서 콘텐츠 전송 네트워크 (CDN), HTTP/2 또는 HTTP/3를 사용하고 웹사이트에 필요한 웹 글꼴에 올바른 캐싱 헤더를 설정하는지 확인하세요.

WOFF2만 사용

WOFF2광범위한 브라우저 지원과 최고의 압축률을 자랑합니다. WOFF보다 최대 30% 더 나은 압축률을 제공합니다. 파일 크기가 줄어들면 다운로드 시간이 단축됩니다. WOFF2 형식은 최신 브라우저 간의 완전한 호환성에 필요한 유일한 형식인 경우가 많습니다.

웹 글꼴의 하위 집합 만들기

웹 글꼴에는 일반적으로 다양한 언어에서 사용되는 다양한 문자를 나타내는 데 필요한 광범위한 글리프가 포함됩니다. 페이지에서 하나의 언어로만 콘텐츠를 제공하거나 하나의 알파벳을 사용하는 경우 서브셋을 통해 웹 글꼴의 크기를 줄일 수 있습니다. 이는 유니코드 코드 포인트의 숫자 또는 범위를 지정하여 수행하는 경우가 많습니다.

하위 집합은 원래 웹 글꼴 파일에 포함된 글리프의 축소된 집합입니다. 예를 들어 모든 글리프를 제공하는 대신 라틴 문자의 특정 하위 집합을 제공할 수 있습니다. 필요한 하위 집합에 따라 글리프를 삭제하면 글꼴 파일의 크기를 크게 줄일 수 있습니다.

일부 웹 글꼴 제공업체(예: Google Fonts)는 쿼리 문자열 매개변수를 사용하여 자동으로 하위 집합을 제공합니다. 예를 들어 https://fonts.googleapis.com/css?family=Roboto&subset=latin URL은 라틴 알파벳만 사용하는 Roboto 웹 글꼴이 포함된 스타일 시트를 제공합니다.

웹 글꼴을 자체 호스팅하기로 결정했다면 다음 단계는 glyphanger 또는 subfont와 같은 도구를 사용하여 이러한 하위 집합을 직접 생성하고 호스팅하는 것입니다.

하지만 자체 웹 글꼴을 호스팅할 수 없는 경우 웹사이트에 필요한 유니코드 코드 포인트만 포함하는 추가 text 쿼리 문자열 매개변수를 지정하여 Google Fonts에서 제공하는 웹 글꼴을 하위 집합으로 만들 수 있습니다. 예를 들어 사이트에 '환영합니다'라는 문구에 필요한 소수의 문자만 필요한 디스플레이 웹 글꼴이 있는 경우 다음 URL을 통해 Google Fonts에서 해당 하위 집합을 요청할 수 있습니다. https://fonts.googleapis.com/css?family=Monoton&text=Welcome 이러한 극단적인 하위 집합이 웹사이트에서 유용한 경우 웹사이트의 단일 서체에 필요한 웹 글꼴 데이터의 양을 크게 줄일 수 있습니다.

글꼴 렌더링

브라우저가 웹 글꼴을 검색하고 다운로드한 후에는 렌더링할 수 있습니다. 기본적으로 브라우저는 웹 글꼴을 사용하는 텍스트가 다운로드될 때까지 렌더링을 차단합니다. font-display CSS 속성을 사용하여 브라우저의 텍스트 렌더링 동작을 조정하고 웹 폰트가 완전히 로드될 때까지 표시하거나 표시하지 않을 텍스트를 구성할 수 있습니다.

block

font-display의 기본값은 block입니다. block를 사용하면 브라우저가 지정된 웹 글꼴을 사용하는 텍스트의 렌더링을 차단합니다. 브라우저마다 약간 다르게 작동합니다. Chromium과 Firefox는 대체 항목을 사용하기 전에 최대 3초 동안 렌더링을 차단합니다. 웹 글꼴이 로드될 때까지 Safari가 무기한 차단됩니다.

swap

swap은 가장 널리 사용되는 font-display 값입니다. swap는 렌더링을 차단하지 않으며 지정된 웹 글꼴로 전환되기 전에 대체 글꼴로 텍스트를 즉시 표시합니다. 이렇게 하면 웹 글꼴이 다운로드될 때까지 기다리지 않고 콘텐츠를 즉시 표시할 수 있습니다.

하지만 swap의 단점은 대체 웹 글꼴과 CSS에 지정된 웹 글꼴의 줄 높이, 커닝, 기타 글꼴 측정항목이 크게 다른 경우 레이아웃 이동이 발생한다는 것입니다. 가능한 한 빨리 웹 글꼴 리소스를 로드하기 위해 preload 힌트를 사용하지 않거나 다른 font-display 값을 고려하지 않으면 웹사이트의 CLS에 영향을 줄 수 있습니다.

fallback

font-displayfallback 값은 blockswap 사이의 절충안입니다. swap와 달리 브라우저는 글꼴 렌더링을 차단하지만 매우 짧은 시간 동안만 대체 텍스트로 전환합니다. 하지만 block와 달리 차단 기간이 매우 짧습니다.

fallback 값을 사용하면 웹 글꼴이 빠르게 다운로드되는 빠른 네트워크에서 잘 작동합니다. 이 경우 웹 글꼴이 페이지의 초기 렌더링에 즉시 사용되는 서체입니다. 하지만 네트워크가 느린 경우 차단 기간이 지난 후 대체 텍스트가 먼저 표시되고 웹 글꼴이 도착하면 대체됩니다.

optional

optional는 가장 엄격한 font-display 값이며, 100밀리초 이내에 다운로드되는 경우에만 웹 글꼴 리소스를 사용합니다. 웹 글꼴이 이보다 오래 걸려 로드되면 페이지에서 사용되지 않으며, 웹 글꼴이 백그라운드에서 다운로드되어 브라우저 캐시에 배치되는 동안 브라우저는 현재 탐색에 대체 서체를 사용합니다.

따라서 이미 다운로드된 웹 글꼴을 후속 페이지 탐색에서 즉시 사용할 수 있습니다. font-display: optionalswap에서 발생하는 레이아웃 이동을 방지하지만, 초기 페이지 탐색에서 너무 늦게 도착하면 일부 사용자에게 웹 글꼴이 표시되지 않습니다.

글꼴 데모

학습한 내용 테스트

브라우저는 언제 웹 글꼴 리소스를 다운로드하나요 (preload 지시어로 가져오지 않는다고 가정)?

페이지의 CSSOM이 빌드되고 현재 레이아웃에 웹 글꼴이 필요한 것으로 확인된 경우
스타일 시트에서 참조가 발견되는 즉시

모든 최신 브라우저에 웹 글꼴을 제공하는 데 필요한 유일한 (가장 효율적인) 형식은 무엇인가요?

WOFF
TTF
EOT
WOFF2

다음: JavaScript 코드 분할

이제 글꼴 최적화에 대해 이해했으므로 다음 모듈로 이동하여 사용자의 초기 페이지 로드 속도를 개선할 가능성이 높은 주제인 코드 분할을 통한 JavaScript 로드 지연을 살펴보겠습니다. 이렇게 하면 사용자가 상호작용할 가능성이 높은 페이지의 시작 단계에서 대역폭과 CPU 경합을 최대한 낮게 유지할 수 있습니다.