이전 모듈에서는 HTML, CSS, JavaScript, 미디어 리소스를 최적화하는 방법을 알아봤습니다. 이 모듈에서는 웹 글꼴을 최적화하는 몇 가지 방법을 알아봅니다.
웹 글꼴은 로드 시간과 렌더링 시간 모두에서 페이지 성능에 영향을 미칠 수 있습니다.
큰 글꼴 파일은 다운로드하는 데 시간이 걸리고 콘텐츠가 포함된 첫 페인트 (FCP)에 부정적인 영향을 미칠 수 있으며, 잘못된 font-display 값은 바람직하지 않은 시각적 렌더링 이동을 일으킬 수 있습니다.
웹 글꼴 최적화에 관해 논의하기 전에 브라우저에서 웹 글꼴을 검색하는 방법을 알면 특정 상황에서 CSS가 불필요한 웹 글꼴의 검색을 방지하는 방법을 이해하는 데 도움이 됩니다.
디스커버리
페이지의 웹 글꼴은 @font-face 선언을 사용하여 스타일시트에 정의됩니다.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
위의 코드 스니펫은 font-family라는 "Open Sans"를 정의하고
브라우저에 해당 웹 글꼴 리소스를 찾을 위치를 알려줍니다. 대역폭을 절약하기 위해 브라우저는 현재 페이지의 레이아웃에 웹 글꼴이 필요한 것으로 확인될 때까지 웹 글꼴을 다운로드하지 않습니다.
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<head><style> 이 경우 브라우저는 외부 스타일시트가 다운로드될 때까지 기다릴 필요가 없으므로 페이지 로드 중에 웹 글꼴을 더 일찍 검색합니다.
@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에 연결하고 CORS 연결을 fonts.gstatic.com에 설정하도록 힌트를 제공합니다. 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에서 제공하는 웹 글꼴을 하위 집합으로 만들 수 있습니다. 예를 들어 사이트에 'Welcome'이라는 문구에 필요한 소수의 문자만 필요한 디스플레이 웹 글꼴이 있는 경우 다음 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에 지정된 웹 글꼴이 줄 높이, 커닝, 기타 글꼴 측정항목 측면에서 크게 다른 경우 콘텐츠에 눈에 띄는 이동이 발생한다는 것입니다.
일반적으로 누적 레이아웃 이동 (CLS)이
block보다 더 나빠지지는 않지만 (block은 텍스트 자체가 표시되지 않더라도 대체 글꼴을 가정하여 페이지를 배치해야 하므로 둘 다 콘텐츠
이동의 영향을 받음) 시각적으로 더 거슬릴 수 있습니다.
fallback
font-display의 fallback 값은 block과 swap 간의 절충안입니다. swap과 달리 브라우저는 글꼴 렌더링을 차단하지만 대체 텍스트로 전환하는 것은 매우 짧은 기간 동안만 가능합니다. 그러나 block과 달리 차단 기간은 매우 짧습니다.
fallback 값을 사용하면 웹 글꼴이 빠르게 다운로드되는 빠른 네트워크에서 잘 작동할 수 있습니다. 이 경우 웹 글꼴은 페이지의 초기 렌더링에 즉시 사용되는 서체입니다. 그러나 네트워크가 느린 경우 차단 기간이 경과한 후 대체 텍스트가 먼저 표시되고 웹 글꼴이 도착하면 대체 텍스트가 전환됩니다.
optional
optional 은 가장 엄격한 font-display 값이며 100밀리초 이내에 다운로드되는 경우에만 웹 글꼴 리소스를 사용합니다. 웹 글꼴을 로드하는 데 시간이 더 오래 걸리면 페이지에서 사용되지 않으며 웹 글꼴이 백그라운드에서 다운로드되어 브라우저 캐시에 배치되는 동안 브라우저는 현재 탐색에 대체 서체를 사용합니다.
따라서 후속 페이지 탐색은 이미 다운로드되어 있으므로 웹 글꼴을 즉시 사용할 수 있습니다. font-display: optional 은 swap에서 볼 수 있는 시각적 이동을 방지하지만 일부 사용자는 초기 페이지 탐색에서 웹 글꼴이 너무 늦게 도착하면 웹 글꼴을 볼 수 없습니다.
글꼴 데모
학습한 내용 테스트
브라우저는 언제 웹 글꼴 리소스를 다운로드하나요 (가져오지 않는다고 가정
preload 지시어)?
모든 최신 브라우저에 웹 글꼴을 제공하는 데 필요한 유일한 (가장 효율적인) 형식은 무엇인가요?
다음 동영상: JavaScript 코드 분할
글꼴 최적화에 대한 이해를 바탕으로 이제 다음 모듈로 이동할 수 있습니다. 이 모듈에서는 사용자의 초기 페이지 로드 속도를 개선할 가능성이 높은 주제인 코드 분할을 통해 JavaScript 로드를 지연하는 방법을 다룹니다. 이렇게 하면 사용자가 페이지와 상호작용할 가능성이 높은 기간인 페이지의 시작 단계에서 대역폭 및 CPU 경합을 최대한 낮게 유지할 수 있습니다.