이전 모듈에서는 HTML, CSS, JavaScript 및 JavaScript API를 확인할 수 있습니다 이 모듈에서는 웹을 최적화하는 방법 있습니다.
웹 글꼴은 로드 시간과 렌더링 시간 모두에서 페이지 성능에 영향을 줄 수 있습니다.
글꼴 파일이 크면 다운로드하는 데 시간이 오래 걸리고 첫째
콘텐츠가 포함된 페인트 (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 스니펫에서 브라우저는 "Open Sans" 글꼴 파일을 다운로드합니다.
페이지의 HTML에서 <h1> 요소를 파싱할 때 발생합니다.
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 선언
인라인 처리를 통해 페이지 로드 중 더 일찍 글꼴을 검색할 수 있습니다.
렌더링 차단 CSS(@font-face 선언 포함)의 <head>
<style> 요소를 사용하여 HTML을 만듭니다. 이 경우 브라우저는
웹 글꼴이 로드되기 전에 로드 속도가 느려지는 경우
다운로드할 수 있습니다.
@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 및 글꼴 리소스를
있습니다.
Google Kubernetes Engine을 사용하면 자체 호스팅 있습니다. 대부분의 경우 웹 글꼴 자체 호스팅이 다운로드하는 것보다 빠릅니다. 교차 출처에서 가져옵니다. 웹 글꼴을 자체 호스팅하려는 경우 사이트에서 콘텐츠 전송 네트워크 (CDN), HTTP/2 또는 HTTP/3를 사용 중이며 올바른 캐싱 헤더를 사용해야 합니다.
WOFF2 및 WOFF2만 사용
WOFF2는 와이드 브라우저 지원 및 최대 30% 더 우수한 압축 성능을 자랑합니다. 더 높습니다. 파일 크기가 작아져 다운로드 시간이 빨라집니다. WOFF2 최신 플랫폼 전반에서 완전한 호환성을 위해 필요한 유일한 형식인 경우가 많음 있습니다.
<ph type="x-smartling-placeholder">웹 글꼴 서브세팅
일반적으로 웹 글꼴에는 다양한 글리프가 포함되며, 을 사용하여 여러 언어에서 사용되는 다양한 문자를 나타냅니다. 만약 한 가지 언어로만 콘텐츠를 제공하거나 하나의 문자를 사용하는 페이지의 경우 하위 설정을 통해 웹 글꼴의 크기를 줄일 수 있습니다. 이 작업은 보통 유니코드 코드 포인트의 숫자 또는 범위를 지정합니다.
하위 집합은 원래 웹에 포함된 축소된 글리프 집합입니다. 글꼴 파일에 추가합니다. 예를 들어 페이지에 모든 글리프를 제공하는 대신 하위 집합일 수 있습니다. 필요한 하위 집합에 따라 글리프를 사용하면 글꼴 파일의 크기를 크게 줄일 수 있습니다.
Google Fonts와 같은 일부 웹 글꼴 제공업체는
쿼리 문자열 매개변수 사용 예를 들어
https://fonts.googleapis.com/css?family=Roboto&subset=latin URL은
Roboto 웹 글꼴로 바꾸어 보겠습니다.
웹 글꼴을 자체 호스팅하기로 결정했다면 다음 단계는 글리프거 또는 하위 글꼴과 같은 도구를 사용하여 이러한 하위 집합을 직접 호스팅할 수 있습니다.
하지만 자체 웹 글꼴을 자체 호스팅할 수 있는 용량이 없는 경우
추가 text 속성을 지정하여 Google Fonts에서 제공하는 웹 글꼴의 하위 집합
쿼리에 필요한 유니코드 코드 포인트만 포함하는 쿼리 문자열
확인할 수 있습니다 예를 들어, 사이트에 포함된 웹 글꼴의 크기가
은(는) '환영합니다'라는 문구에 적은 수의 문자가 필요합니다.
Google Fonts를 통해 하위 집합을 요청할 수 있습니다.
https://fonts.googleapis.com/css?family=Monoton&text=Welcome 이렇게 하면
단일 서체에 필요한 웹 글꼴 데이터의 양을 상당히 줄입니다.
극단적인 하위 설정이 웹사이트에서 유용할 수 있는 경우).
글꼴 렌더링
브라우저가 웹 글꼴을 검색하고 다운로드한 후에는
있습니다. 기본적으로 브라우저는
다운로드될 때까지 계속 반복해야 합니다. 브라우저의 텍스트 렌더링을 조정하거나
웹 UI에 표시될 때까지 표시하거나 표시하지 않을 텍스트를
font-display CSS 속성을 사용하여 글꼴이 완전히 로드되었습니다.
block
font-display의 기본값은 block입니다. block를 사용하면 브라우저
는 지정된 웹 글꼴을 사용하는 텍스트의 렌더링을 차단합니다. 다름
브라우저가 약간 다르게 동작합니다. Chromium 및 Firefox 차단 렌더링
최대 3초 후에 대체를 사용할 수 있습니다. Safari에서 무기한 차단
웹 글꼴이 로드될 때까지 기다립니다.
swap
swap는 가장 널리 사용되는 font-display 값입니다. swap님이 차단하지 않음
텍스트를 교체하기 직전에 대체에 즉시 표시합니다.
웹 글꼴입니다. 이렇게 하면 기다리지 않고 즉시 콘텐츠를 표시할 수 있습니다.
다운로드할 웹 글꼴입니다.
그러나 swap의 단점은 대체
CSS에 지정된 웹 글꼴과 웹 글꼴이
높이, 커닝 및 기타 글꼴 측정항목을 포함할 수 있습니다. 다음과 같은 경우 웹사이트의 CLS에 영향을 미칠 수 있습니다.
preload 힌트를 사용하여 웹 글꼴 리소스를
또는 다른 font-display 값을 고려하지 않는 경우입니다.
fallback
font-display의 fallback 값은
block 및 swap. swap와 달리 브라우저는 글꼴 렌더링을 차단하지만
대체 텍스트에서 매우 짧은 시간 동안만 교체할 수 있습니다. block와 달리,
하지만 차단 기간은 매우 짧습니다.
fallback 값은 웹 글꼴이
웹 글꼴은 다운로드되는 페이지의 글꼴에
초기 렌더링에 사용할 수 있습니다. 그러나 네트워크가 느린 경우 대체 텍스트가
웹 글꼴이 차단될 때
있습니다.
optional
optional는 가장 엄격한 font-display 값이며 웹만 사용합니다.
100밀리초 이내에 다운로드되면 글꼴 리소스에 대한 액세스 권한을 반환합니다. 웹 글꼴이
로드 시간이 더 길면 페이지에서 사용되지 않으며 브라우저는
웹 글꼴이 다운로드되는 동안 현재 탐색을 위한 대체 서체
브라우저 캐시에 저장됩니다.
결과적으로 후속 페이지 탐색에서 웹 글꼴을 즉시 사용할 수 있습니다.
이미 다운로드되었습니다 font-display: optional이(가) 표시된 레이아웃 변경을 회피합니다.
하지만 웹 글꼴이 swap에 너무 늦게 도착하면 일부 사용자는
초기 페이지 탐색입니다.
글꼴 데모
학습한 내용 테스트
브라우저는 언제 웹 글꼴 리소스를
preload 지시어로 가져옴)?
웹에 게재하는 데 필요한 유일한 (가장 효율적인) 형식은 무엇인가요? 어떻게 해야 할까요?
다음: 코드 분할 자바스크립트
글꼴 최적화에 대한 이해를 바탕으로 다음 모듈에서는 개선 가능성이 높은 주제를 다루겠습니다. 초기 페이지 로드 속도이며, 이는 콘텐츠의 로드를 지연하기 위한 코드 분할을 통한 자바스크립트 이렇게 하면 페이지의 시작 단계인 사용자가 광고와 상호작용할 가능성이 높은 시간.