이전 모듈에서는 HTML, CSS, 자바스크립트, 미디어 리소스를 최적화하는 방법을 알아보았습니다. 이 모듈에서는 웹 글꼴을 최적화하는 몇 가지 방법을 살펴봅니다.
웹 글꼴은 로드 시간과 렌더링 시간에 모두 페이지 성능에 영향을 미칠 수 있습니다.
큰 글꼴 파일은 다운로드하는 데 시간이 걸리고 첫 콘텐츠 페인트 (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>에 렌더링 차단 CSS(@font-face 선언 포함)를 인라인 처리하여 페이지 로드 중에 글꼴이 일찍 검색되도록 할 수 있습니다. 이 경우 브라우저는 외부 스타일 시트가 다운로드될 때까지 기다릴 필요가 없으므로 페이지 로드 초기에 웹 글꼴을 검색합니다.
@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.com에 대한 CORS 연결을 설정하도록 브라우저에 힌트를 표시합니다. Google Fonts와 같은 일부 글꼴 제공업체는 다른 출처의 CSS 및 글꼴 리소스를 제공합니다.
웹 글꼴을 자체 호스팅하면 서드 파티 연결이 필요하지 않습니다. 대부분의 경우 웹 글꼴 자체 호스팅이 교차 출처에서 웹 글꼴을 다운로드하는 것보다 빠릅니다. 웹 글꼴을 자체 호스팅하려면 사이트에서 콘텐츠 전송 네트워크 (CDN), HTTP/2 또는 HTTP/3을 사용하고 있는지 확인하고 웹사이트에 필요한 웹 글꼴에 올바른 캐싱 헤더를 설정하세요.
WOFF2 및 WOFF2만 사용
WOFF2는 와이드 브라우저 지원 및 최상의 압축 기능으로 WOFF보다 최대 30% 더 우수합니다. 파일 크기가 줄어 다운로드 시간이 단축됩니다. WOFF2 형식은 최신 브라우저 간 완전한 호환성을 위해 필요한 유일한 형식인 경우가 많습니다.
웹 글꼴 하위 설정
일반적으로 웹 글꼴은 다양한 언어에서 사용되는 다양한 문자를 나타내는 데 필요한 다양한 글리프를 포함합니다. 페이지에서 한 가지 언어로만 콘텐츠를 제공하거나 단일 알파벳을 사용하는 경우 하위 설정을 통해 웹 글꼴의 크기를 줄일 수 있습니다. 이를 위해 보통 유니코드 코드 포인트의 숫자 또는 범위를 지정합니다.
하위 집합은 원래 웹 글꼴 파일에 포함된 글리프의 축소된 집합입니다. 예를 들어 페이지에서 모든 글리프를 제공하는 대신 라틴 문자의 특정 하위 집합을 제공할 수 있습니다. 필요한 하위 집합에 따라 글리프를 삭제하면 글꼴 파일의 크기가 크게 줄어들 수 있습니다.
Google Fonts와 같은 일부 웹 글꼴 제공업체는 쿼리 문자열 매개변수를 사용하여 자동으로 하위 집합을 제공합니다. 예를 들어 https://fonts.googleapis.com/css?family=Roboto&subset=latin URL은 라틴 알파벳만 사용하는 Roboto 웹 글꼴이 포함된 스타일 시트를 제공합니다.
웹 글꼴을 자체 호스팅하기로 결정했다면 다음 단계는 glyphanger 또는 하위 글꼴과 같은 도구를 사용하여 이러한 하위 집합을 직접 생성하고 호스팅하는 것입니다.
그러나 자체 웹 글꼴을 자체 호스팅할 용량이 없는 경우 웹사이트에 필요한 유니코드 코드 포인트만 포함된 추가 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-display의 fallback 값은 block과 swap이 절충된 값입니다. swap와 달리 브라우저는 글꼴 렌더링을 차단하지만 매우 짧은 기간 동안만 대체 텍스트로 전환합니다. 그러나 block와 달리 차단 기간은 매우 짧습니다.
fallback 값을 사용하면 웹 글꼴이 빠르게 다운로드되면 웹 글꼴이 페이지의 초기 렌더링에서 즉시 사용되는 글꼴이 되는 빠른 네트워크에서 제대로 작동할 수 있습니다. 그러나 네트워크가 느린 경우 대체 텍스트는 차단 기간이 지난 후에 먼저 표시되고 웹 글꼴이 도착하면 교체됩니다.
optional
optional는 가장 엄격한 font-display 값이며 100밀리초 이내에 다운로드되는 경우에만 웹 글꼴 리소스를 사용합니다. 로드하는 데 시간이 이보다 오래 걸리는 웹 글꼴은 페이지에서 사용되지 않으며, 웹 글꼴이 백그라운드에 다운로드되어 브라우저 캐시에 저장되는 동안 브라우저에서 현재 탐색에 대체 글꼴을 사용합니다.
따라서 웹 글꼴은 이미 다운로드되었으므로 후속 페이지 탐색에서 이 글꼴을 즉시 사용할 수 있습니다. font-display: optional는 swap와 함께 표시되는 레이아웃 변경을 피하지만, 일부 사용자는 웹 글꼴이 초기 페이지 탐색에 너무 늦게 도착하면 표시되지 않습니다.
글꼴 데모
학습한 내용 테스트
브라우저는 언제 웹 글꼴 리소스를 다운로드하나요 (preload 지시어로 가져오지 않는다고 가정)?
모든 최신 브라우저에 웹 글꼴을 제공하는 데 필요한 유일한 (가장 효율적인) 형식은 무엇인가요?
다음: 코드 분할 자바스크립트
기본 글꼴 최적화에 관해 배웠으므로 이제 다음 모듈로 넘어갈 수 있습니다. 다음 모듈로 넘어갈 수 있습니다. 다음 모듈에서는 사용자의 초기 페이지 로드 속도를 개선할 가능성이 높고 코드 분할을 통해 자바스크립트 로드를 지연하는 방법을 다룹니다. 이렇게 하면 사용자가 상호작용할 가능성이 높은 페이지 시작 단계 동안 대역폭과 CPU 경합을 가능한 한 낮게 유지할 수 있습니다.