Core Web Vitals의 웹 글꼴을 최적화합니다.
이 문서에서는 글꼴의 성능 권장사항을 설명합니다. 웹 글꼴은 다음과 같이 다양한 방식으로 성능에 영향을 미칩니다.
- 지연된 텍스트 렌더링: 웹 글꼴이 로드되지 않으면 일반적으로 브라우저는 텍스트 렌더링을 지연시킵니다. 이로 인해 콘텐츠가 포함된 첫 페인트 (FCP)가 지연되는 경우가 많습니다. 경우에 따라 최대 콘텐츠 페인트 (LCP)가 지연될 수 있습니다.
- 레이아웃 변경: 글꼴 교체는 레이아웃 변경을 야기할 수 있으며 이로 인해 레이아웃 변경 횟수 (CLS)에 영향을 미칠 수 있습니다. 이러한 레이아웃 변경은 웹 글꼴과 대체 글꼴이 페이지에서 다른 크기의 공간을 차지하는 경우에 발생합니다.
이 도움말은 글꼴 로드, 글꼴 전송, 글꼴 렌더링의 세 섹션으로 나뉘어 있습니다. 각 섹션에서는 글꼴 수명 주기의 특정 측면이 작동하는 방식을 설명하고 관련 권장사항을 제공합니다.
글꼴 로드 중
글꼴은 일반적으로 중요한 리소스입니다. 글꼴이 없으면 사용자가 페이지 콘텐츠를 보지 못할 수 있기 때문입니다. 따라서 일반적으로 글꼴 로드의 모범 사례는 글꼴이 최대한 빨리 로드되도록 하는 데 중점을 둡니다. 타사 사이트에서 로드된 글꼴은 특별히 주의해야 합니다. 이러한 글꼴 파일을 다운로드하려면 별도의 연결 설정이 필요하기 때문입니다.
페이지 글꼴이 제때 요청되고 있는지 확실하지 않은 경우 Chrome DevTools의 네트워크 패널 내에 있는 타이밍 탭에서 자세한 내용을 확인하세요.
@font-face 이해하기
글꼴 로드 권장사항을 살펴보기 전에 @font-face의 작동 방식과 글꼴 로드에 미치는 영향을 이해하는 것이 중요합니다.
@font-face 선언은 웹 글꼴 작업의 필수 요소입니다. 최소한 글꼴을 참조하는 데 사용할 이름을 선언하고 글꼴 파일의 위치를 나타냅니다.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
일반적으로 @font-face 선언이 발생할 때 글꼴이 요청된다는 오해가 있습니다. 이는 사실이 아닙니다. @font-face 선언 자체는 글꼴 다운로드를 트리거하지 않습니다. 페이지에서 사용된 스타일 지정을 통해 참조되는 경우에만 글꼴이 다운로드됩니다. 예를 들면 다음과 같습니다.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
즉, 위 예에서 Open Sans는 페이지에 <h1> 요소가 포함된 경우에만 다운로드됩니다.
따라서 글꼴 최적화를 고려할 때, 글꼴 파일 자체만큼이나 스타일시트를 고려하는 것이 중요합니다. 스타일시트의 콘텐츠나 전달 방식을 변경하면 글꼴이 제공되는 시점에 상당한 영향을 미칠 수 있습니다. 마찬가지로 사용하지 않는 CSS를 제거하고 스타일시트를 분할하면 페이지에서 로드하는 글꼴 수를 줄일 수 있습니다.
인라인 글꼴 선언
대부분의 사이트는 글꼴 선언과 기타 중요한 스타일을 외부 스타일시트에 포함하는 대신 기본 문서의 <head>에 인라인으로 추가하는 것이 좋습니다. 이렇게 하면 브라우저가 외부 스타일시트가 다운로드될 때까지 기다릴 필요가 없으므로 더 빨리 글꼴 선언을 검색할 수 있습니다.
<head>
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
body {
font-family: "Open Sans";
}
...etc.
</style>
</head>
중요한 CSS를 인라인 처리하는 것은 모든 사이트에서 달성할 수 없는 고급 기술일 수 있습니다. 성능상의 이점은 분명하지만, 필수 CSS(이상적으로는 중요한 CSS만)가 올바르게 인라인 처리되고 추가 CSS가 렌더링되지 않은 차단 방식으로 전달되도록 하려면 추가적인 프로세스와 빌드 도구가 필요합니다.
중요한 서드 파티 출처 사전 연결
사이트가 서드 파티 사이트에서 글꼴을 로드하는 경우 preconnect 리소스 힌트를 사용하여 서드 파티 원본과의 조기 연결을 설정하는 것이 좋습니다. 리소스 힌트는 문서의 <head>에 배치해야 합니다. 아래의 리소스 힌트는 글꼴 스타일시트를 로드하기 위한 연결을 설정합니다.
<head>
<link rel="preconnect" href="https://fonts.com">
</head>
글꼴 파일을 다운로드하는 데 사용되는 연결을 미리 연결하려면 crossorigin 속성을 사용하는 별도의 preconnect 리소스 힌트를 추가합니다. 스타일시트와 달리 글꼴 파일은 CORS 연결을 통해 전송해야 합니다.
<head>
<link rel="preconnect" href="https://fonts.com">
<link rel="preconnect" href="https://fonts.com" crossorigin>
</head>
preconnect 리소스 힌트를 사용할 때는 글꼴 제공자가 별도의 출처에서 스타일시트와 글꼴을 제공할 수 있다는 점에 유의하세요. 예를 들어 preconnect 리소스 힌트가 Google Fonts에 사용되는 방식입니다.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
preload를 사용하여 글꼴을 로드할 때 주의
preload는 페이지 로드 프로세스 초기에 글꼴이 검색될 수 있도록 하는 데 매우 효과적이지만 이 경우 다른 리소스를 로드할 때 브라우저 리소스가 제거되는 단점이 있습니다.
글꼴 선언을 삽입하고 스타일시트를 조정하는 것이 더 효과적인 방법일 수 있습니다. 이러한 조정은 단지 해결 방법을 제공하기보다 늦게 발견된 글꼴의 근본 원인을 해결하는 데 더 가깝습니다.
또한 preload를 글꼴 로드 전략으로 사용하면 브라우저에 내장된 일부 콘텐츠 협상 전략을 우회하므로 신중하게 사용해야 합니다. 예를 들어 preload는 unicode-range 선언을 무시하며 신중하게 사용할 경우 단일 글꼴 형식을 로드하는 데만 사용해야 합니다.
그러나 외부 스타일시트를 사용할 때는 브라우저에서 글꼴의 필요 여부를 훨씬 나중까지 파악하지 못하므로 가장 중요한 글꼴을 미리 로드하면 매우 효과적일 수 있습니다.
글꼴 제공
글꼴 제공 속도가 빨라지면 텍스트 렌더링이 빨라집니다. 또한 글꼴이 충분히 일찍 제공되면 글꼴 교체로 인한 레이아웃 변경을 제거하는 데 도움이 될 수 있습니다.
자체 호스팅 글꼴 사용
이론적으로 자체 호스팅 글꼴을 사용하면 제3자 연결 설정이 없어지므로 성능이 향상됩니다. 그러나 실제로 이러한 두 옵션의 성능 차이는 덜 명확합니다. 예를 들어 Web Almanac에 따르면 서드 파티 글꼴을 사용하는 사이트가 퍼스트 파티 글꼴을 사용한 글꼴보다 렌더링 속도가 더 빠릅니다.
자체 호스팅 글꼴을 사용하려는 경우 사이트에서 콘텐츠 전송 네트워크 (CDN) 및 HTTP/2를 사용하고 있는지 확인하세요. 이러한 기술을 사용하지 않으면 자체 호스팅 글꼴이 더 나은 성능을 제공할 가능성이 훨씬 줄어듭니다. 자세한 내용은 콘텐츠 전송 네트워크를 참조하세요.
자체 호스팅 글꼴을 사용하는 경우 타사 글꼴 제공업체가 일반적으로 자동으로 제공하는 글꼴 파일 최적화(예: 글꼴 하위 설정 및 WOFF2 압축)도 적용하는 것이 좋습니다. 이러한 최적화를 적용하는 데 필요한 노력은 사이트에서 지원하는 언어에 따라 어느 정도 다릅니다. 특히 CJK 언어에 맞게 글꼴을 최적화하는 작업은 특히 어려울 수 있습니다.
WOFF2 사용
최신 글꼴 글꼴 중에서 WOFF2가 가장 최신 글꼴로 브라우저 지원 폭이 가장 넓고 압축률도 가장 높습니다. WOFF2는 Brotli를 사용하기 때문에 WOFF보다 압축률이 30% 향상되어 다운로드할 데이터가 줄어들어 성능이 더 빠릅니다.
브라우저 지원을 감안할 때 전문가들은 이제 WOFF2만 사용할 것을 권장합니다.
사실, WOFF2만 사용하고 다른 모든 것은 잊어버리세요.
<ph type="x-smartling-placeholder"></ph> 브램 스타인, 2022년 웹 연감
이렇게 하면 CSS와 워크플로가 크게 간소화되고 실수로 이중으로 또는 잘못된 글꼴이 다운로드되는 것을 방지할 수 있습니다. 이제 WOFF2가 모든 곳에서 지원됩니다. 따라서 최신 버전의 브라우저를 지원해야 하는 경우가 아니라면 WOFF2를 사용하세요. 웹 글꼴을 제공할 수 없다면 이전 브라우저에 웹 글꼴을 제공하지 않는 것이 좋습니다. 강력한 대체 전략이 있다면 이는 문제가 되지 않습니다. 이전 브라우저를 사용하는 방문자는 대체 글꼴만 볼 수 있습니다.
하위 집합 글꼴
일반적으로 글꼴 파일에는 지원되는 모든 다양한 문자에 대한 다수의 글리프가 포함됩니다. 그러나 페이지에 모든 문자가 필요하지는 않을 수 있으며 글꼴을 서브세팅하여 글꼴 파일의 크기를 줄일 수 있습니다.
@font-face 선언의 unicode-range 설명자는 글꼴을 사용할 수 있는 문자를 브라우저에 알려줍니다.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}
페이지에 유니코드 범위와 일치하는 문자가 하나 이상 포함된 경우 글꼴 파일이 다운로드됩니다. unicode-range는 일반적으로 페이지 콘텐츠에 사용되는 언어에 따라 다양한 글꼴 파일을 제공하는 데 사용됩니다.
unicode-range는 부분 설정 기법과 함께 사용되는 경우가 많습니다. 하위 집합 글꼴에는 원래 글꼴 파일에 포함되어 있던 글리프의 일부가 포함됩니다. 예를 들어 사이트에서는 모든 문자를 대상으로 하는 대신 라틴 문자와 키릴 문자에 대해 별도의 글꼴 집합을 생성할 수 있습니다. 글꼴당 글리프 수는 매우 다양합니다. 라틴어 글꼴은 일반적으로 글꼴당 100~1000개의 글리프 크기입니다. CJK 글꼴은 10,000자(영문 기준)를 초과할 수 있습니다. 사용하지 않는 글리프를 제거하면 글꼴의 파일 크기가 크게 줄어들 수 있습니다.
일부 글꼴 제공자는 하위 집합이 서로 다른 다양한 버전의 글꼴 파일을 자동으로 제공할 수도 있습니다. 예를 들어 Google Fonts는 이 작업을 기본적으로 실행합니다.
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
자체 호스팅으로 전환하는 경우 이는 쉽게 놓칠 수 있고 로컬에서 더 큰 글꼴 파일이 될 수 있는 최적화 방법입니다.
글꼴 제공업체에서 허용하는 경우 API (Google Fonts에서는 text 매개변수를 제공하여 이를 지원)를 통해 또는 글꼴 파일을 수동으로 수정한 다음 자체 호스팅을 통해 수동으로 글꼴 하위 집합을 지정할 수도 있습니다. 글꼴 하위 집합을 생성하는 도구로는 하위 글꼴과 글리프저가 있습니다. 하지만 하위 설정 허용 및 자체 호스팅을 사용하는 글꼴의 라이선스를 확인하시기 바랍니다.
더 적은 웹 글꼴 사용
가장 빠른 글꼴 제공은 애초에 요청되지 않은 글꼴입니다. 시스템 글꼴과 가변 글꼴은 사이트에 사용되는 웹 글꼴의 수를 줄일 수 있는 두 가지 방법입니다.
시스템 글꼴은 사용자 기기의 사용자 인터페이스에서 사용하는 기본 글꼴입니다. 시스템 글꼴은 일반적으로 운영체제 및 버전에 따라 다릅니다. 글꼴이 이미 설치되어 있으므로 글꼴을 다운로드할 필요가 없습니다. 시스템 글꼴은 본문 텍스트에 특히 효과적입니다.
CSS에서 시스템 글꼴을 사용하려면 system-ui을 글꼴 모음으로 나열합니다.
font-family: system-ui
가변 글꼴의 개념은 단일 가변 글꼴을 여러 글꼴 파일을 대체할 수 있다는 것입니다. 가변 글꼴은 '기본값'을 정의하여 작동합니다. 글꼴을 제공하고 글꼴을 조작할 수 있는 "축"을 제공합니다. 예를 들어 Weight 축이 있는 가변 글꼴을 사용하여 이전에는 밝은 글꼴, 일반 글꼴, 굵게, 아주 굵게를 위한 별도의 글꼴이 필요했던 문자를 구현할 수 있습니다.
모든 사용자가 가변 글꼴로 전환하는 것이 도움이 되는 것은 아닙니다. 가변 글꼴에는 다양한 스타일이 포함되어 있으므로 일반적으로 하나의 스타일만 포함하는 개별 비변수 글꼴보다 파일 크기가 큽니다. 가변 글꼴을 사용하여 가장 크게 개선되는 사이트는 다양한 글꼴 스타일과 두께를 사용하고 이를 사용해야 하는 사이트입니다.
글꼴 렌더링
아직 로드되지 않은 웹 글꼴에 직면했을 때 브라우저는 딜레마에 직면합니다. 웹 글꼴이 도착할 때까지 텍스트 렌더링을 보류해야 합니까? 아니면 웹 글꼴이 도착할 때까지 텍스트를 대체 글꼴로 렌더링해야 하나요?
브라우저마다 이 시나리오를 다르게 처리합니다. 기본적으로 Chromium 기반 및 Firefox 브라우저는 연결된 웹 글꼴이 로드되지 않으면 최대 3초 동안 텍스트 렌더링을 차단합니다. Safari는 텍스트 렌더링을 무기한 차단합니다.
이 동작은 font-display 속성을 사용하여 구성할 수 있습니다. 이 선택은 상당한 영향을 미칠 수 있습니다. font-display는 LCP, FCP, 레이아웃 안정성에 영향을 미칠 수 있습니다.
적절한 font-display 전략 선택
font-display는 연결된 웹 글꼴이 로드되지 않은 경우 텍스트 렌더링을 어떻게 진행할지 브라우저에 알립니다. 글꼴별로 정의됩니다.
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
font-display에 사용할 수 있는 값은 5가지입니다.
| 값 | 차단 기간 | 교체 기간 |
|---|---|---|
| 자동 | 브라우저에 따라 다름 | 브라우저에 따라 다름 |
| 차단 | 2~3초 | 무한 |
| 전환 | 0밀리초 | 무한 |
| 대체 | 100ms | 3초 |
| 선택사항 | 100ms | 없음 |
- 차단 기간: 차단 기간은 브라우저에서 웹 글꼴을 요청할 때 시작됩니다. 차단 기간에 웹 글꼴을 사용할 수 없으면 글꼴이 보이지 않는 대체 글꼴로 렌더링되므로 텍스트가 사용자에게 표시되지 않습니다. 차단 기간이 끝날 때 글꼴을 사용할 수 없는 경우 대체 글꼴로 렌더링됩니다.
- 스왑 기간: 스왑 기간은 차단 기간 이후입니다. 교체 기간 동안 웹 글꼴을 사용할 수 있게 되면 '교체'됩니다. 인치
font-display 전략은 성능과 미학의 균형에 대한 다양한 관점을 반영합니다. 따라서 개별 환경설정, 웹 글꼴이 페이지와 브랜드에 얼마나 중요한지, 늦게 도착하는 글꼴이 전환 시 얼마나 거슬릴 수 있는지에 따라 다르기 때문에 권장되는 접근 방식을 제공하기는 어렵습니다.
대부분의 사이트에 가장 적합한 세 가지 전략은 다음과 같습니다.
성능이 최우선순위인 경우:
font-display: optional을 사용합니다. 가장 '성능이 우수'한데 텍스트 렌더링이 100ms 이상 지연되지 않으며 글꼴 바꾸기와 관련된 레이아웃 변경이 없습니다. 하지만 단점은 웹 글꼴이 늦게 도착하면 사용되지 않는다는 것입니다.텍스트를 빠르게 표시하는 것이 가장 중요하지만 여전히 웹 글꼴이 사용되도록 하려는 경우:
font-display: swap을 사용하되 레이아웃이 바뀌지 않도록 글꼴을 충분히 일찍 제공해야 합니다. 이 옵션의 단점은 글꼴이 늦게 도착할 때 부자연스러운 이동이 발생한다는 것입니다.텍스트가 웹 글꼴로 표시되도록 하는 것이 가장 중요한 경우:
font-display: block를 사용하되 텍스트의 지연을 최소화할 수 있도록 글꼴을 충분히 일찍 제공해야 합니다. 단점은 초기 텍스트 표시가 지연된다는 점입니다. 이러한 디플레이에도 불구하고 텍스트가 실제로 보이지 않게 그려지고 따라서 대체 글꼴 공간이 공간을 예약하는 데 사용되기 때문에 여전히 레이아웃이 변경될 수 있습니다. 웹 글꼴이 로드되면 차이 공간이 필요하고 그에 따라 위치가 달라질 수 있습니다. 그러나 텍스트 자체가 이동하는 것으로 보이지 않으므로font-display: swap보다 덜 거슬리는 변화일 수 있습니다.
이 두 가지 접근 방식을 조합할 수도 있습니다. 예를 들어 브랜딩 및 기타 시각적으로 구분되는 페이지 요소에는 font-display: swap을 사용합니다. 본문 텍스트에 사용되는 글꼴에는 font-display: optional를 사용합니다.
대체 글꼴과 웹 글꼴 간의 전환 줄이기
CLS의 영향을 줄이려면 새 size-adjust 속성을 사용하면 됩니다. 자세한 내용은 CSS size-adjust에 관한 도움말을 참고하세요. 이는 Google 도구 모음에 새로 추가된 것이므로 현재 좀 더 고급스럽고 약간 수동적입니다. 하지만 실험해 보고 앞으로 도구 개선사항을 기대해 주세요.
결론
웹 글꼴은 여전히 성능 병목 현상일 수 있지만 이러한 병목 현상을 최대한 줄이기 위해 웹 글꼴을 최적화할 수 있는 옵션이 계속 증가하고 있습니다.