웹 글꼴 로드 현황

뻔한 것부터 시작하자. 글꼴 불러오기 (어떤 이유로 27페이지 길이) 와 CSS 속성을 사용하는 우수한 게시물이 많고, 그리고... 알겠습니다.이것들은 모두 글꼴이 CSS처럼 동시 불러올 수 없는 현황을 받아들였고, 이러한 상황을 덮는 방법만 설명했다.
하지만 이것은 제 사이트입니다. 저는 사용자가 어떤 글씨체를 필요로 하는지 정확히 알고 있습니다.그렇다면, 왜 브라우저가 페이지를 표시하기 전에 관건적인 경로에 작은 글꼴을 놓으라고 요구할 수 없습니까?엔지니어로서 나는 선택의 부족이 사람을 낙담하게 한다.😠
나는 완벽한 해결 방안이 하나도 없지만, 이 글은 베이스 64 인코딩 글씨체를 통한 예비 해결 방안, 플랫폼 제안을 열거했다.우선, 이것은 애니메이션을 통해 표시되는 기본적인 문제이다.

이 문제에 대해서는 다른 견해가 있지만 여기서 두 가지 일이 발생했다.

"Emojityper"는 먼저 시스템 글꼴로 표시

에 탑재된 글씨체는 우리가 본 시스템 글씨체layout shift보다 크다. 내 고용주가 돈을 지불해서 이 글씨체가 나쁘다고 알려달라고 했다(좋지 않지만 나도 돈을 지불해서 알려준다)

현재의 해결 방안은 font-display CSS 속성을 사용하는 것이다(몇몇 친구들과).공평하게 말하면 전통적인 CSS는 이 두 문제를 해결할 수 있다.그러나 이러한 문제는 페이지의 나머지 부분이 나타나더라도 글꼴이 도착하기 전에 문제가 있는 텍스트를 표시하지 않는 것으로 해결된다.
여기서 가장 실망스러운 문제는 이 플래시가 50-60밀리초의 모든 프레임을 필요로 한다는 것이다.이것은 내가 원하는 선택이다. 렌더링을 잠시 늦추는 것이다.나는 이 사용자 체험에 대해 사용자가 플래시에 영향을 받는 페이지가 아니라 언제든지 열 수 있는 페이지를 더 좋아할 것이라고 생각한다. 이것은 사용자의 눈을 몇 밀리초 안에 곤혹스럽게 할 뿐이다.👀

사례 연구

developer.chrome.com에서 우리는 실제적으로 모든 스타일시트와 이미지(주로 SVG)를 각 페이지의 HTML에 연결하여 요청 수량을 줄이고 페이지의 불러오는 속도를 높인다.대부분의 사용자에게 네트워크가 믿을 수 없는 속도로 전체 단일 부하를 전달할 것이기 때문에 우리는 이 해결 방안에 대해 매우 만족한다.
모든 HTML 페이지에 완전히 중복된 자산이 있지만, Google 글꼴은 네트워크에 들어가고, 새로운 사용자들은 빛을 볼 수 있습니다.

일반 적재

로드에 대한 배경 정보는 myrecent interactive post를 참조하십시오.TL;그 글에서 알 수 있듯이 페이지의 표시를 막을 수 있는 유일한 것은 외부 CSS를 불러오는 것이다.글꼴에 대해 글꼴의 글꼴이 필요할 때 브라우저는 비동기적으로 글꼴을 불러옵니다. 예를 들어 본 블로그의 제목 글꼴은 즉시 불러오지만 스타일시트가 처음 도착했을 때만 불러옵니다.
여기서 나는 실제로 두 가지 기교를 사용하여 글꼴을 미리 얻었다. (비록 이 두 기교는 플래시와 레이아웃의 변화를 막을 수 없지만)

외부 CSS 파일이 있을 때만 사용할 수 있지만 font-display에 미리 글꼴을 요청합니다 <link rel="preload" ... /> <style>

어떤 HTML도 사용자에게 보내기 전에 HTTP2 Server Push를 통해 글꼴을 보냅니다. 오용

되었음에도 불구하고 브라우저 공급업체가 지원을 취소하고 있는 것 같습니다.
네가 이 문장을 어떻게 보든지 간에 글씨체를 미리 조립하는 것은 좋은 생각이다.현대 HTTP는 한 번에 대량의 파일을 보내는 데 뛰어나기 때문에 사용자의 글꼴이 이 서열에 일찍 들어갈수록 좋습니다.🚂🚋🚋
글꼴 파일도 나중에 불러올 수 있도록 저장fingerprinted하고 영구적으로 캐시해야 합니다.나는 주제에서 벗어났지만, 이 마운트 문제는 많은 문제와 마찬가지로, 단지 사용자의 첫 번째 마운트에 관한 것이다.서비스 인원이 등장함에 따라 우리는 웹 개발자로서 사용자의 두 번째 불러오는 것을 거의 완전히 제어할 수 있다.

오늘날의 솔루션

이것은 까다로운 문제다.실제로 베이스64 인코딩을 통해 블록 CSS 파일에 글꼴을 연결할 수 있습니다. 이 글꼴은 약 33%의 공간 비용이 듭니다.여기에는 추가 네트워크 요청이 없습니다. 디코딩은 차단된 방식으로 이루어집니다.

@font-face {
  font-family: 'Carter One';
  src: url('data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAG74ABI...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

많은 사람들이 base64 is a bad idea.그러나 그 사례 연구에서 그림의 크기는 220k 정도에 속하지 않았고 작가는 글씨체가 관건적인 자원이라는 나의 주장에 전혀 동의하지 않았다.
이것은 공간과 디코딩 시간을 포함하여 원가가 있다.만약 base64 글꼴을 사용하여 플래시를 피하려고 한다면, 어떻게 원가를 최저로 낮출 수 있습니까?

나는 대부분의 라틴어 사용자 정의 글씨체가 약 20k 정도인 것을 발견했다. 나는 이보다 훨씬 큰 글씨체를 사용하지 않고 최대 한 가지 글씨체만 사용할 수 있다.system font를 본문으로 사용하고 제목이나 영웅 텍스트에 사용자 정의 글꼴을 보존합니다.)

글꼴 선언을 영구 캐시된 고유 CSS 파일에 배치합니다.CSS의 다른 부분(변경될 수 있음)과 달리 글꼴은 시간에 따라 변경되지 않습니다.

<!-- These will be downloaded in parallel -->
<link rel="stylesheet" href="./base64-encoded-font-eeb16h.css" />
<link rel="stylesheet" href="./styles-cakl1f.css" />

배woff2-95%+ of users만 브래킷

이것은 고급이지만 사용자가 두 번째 불러올 때 얻는 내용(예를 들어 서비스 직원을 통해)을 제어할 수 있다면 사용자에게 진정한 캐시 woff2를 제공하고 중복 불러오는 데만 사용할 수 있습니다.

역모드

사용자가 글꼴을 불러오기 전에 페이지의 어떤 부분도 볼 수 없도록 하는 다른 방법도 있습니다.그러나 자바스크립트와 관련이 있을 것이다. 이것은 토끼구멍일 뿐 사이트의 복잡성을 빠르게 증가시킬 것이다.📈
CSS 클래스를 사용하여 페이지의 각 부분을 숨김으로 표시하고 글꼴이 도착하는 경우에만 삭제할 수 있습니다.변경될 때까지 Font Loading API 또는 직접 테스트<div>의 렌더링 크기를 측정할 수 있습니다.이것들은 모두 좋은 해결 방안이 아니다.
(이것은 내가 기꺼이 Santa Tracker에서 한 일이지만 우리는 실제로 로드 스크린이 하나 있는데 느린 로드로 기울어져 전체 사이트에 JS가 필요하다.이 작업은 현장에서 사용할 수 없습니다.)

표준 항변

지난해에는 증가Priority Hints가 제안됐다.
현재 이 제안은 단지 인터넷 데이터의 중요성을 암시하기 위한 것이다.
단, 미리 불러오는 것이 곧 도착하면 페이지의 표시를 막을 수 있다는 옵션 critical 의 알림을 포함할 수 있습니다.

<!-- Preload this font and block until used, with limited budget -->
<link rel="preload"
    importance="critical"
    href="/carter-one.woff2?v11"
    as="font"
    type="font/woff2"
    crossorigin />

<!-- This could work for as="style", as="fetch" or others -->
<link rel="preload"
    importance="critical"
    href="/important-data.json"
    as="fetch"
    crossorigin />

이것은 표준 기반의 개발자의 선택을 허용하고 순수한 추가 속성이기 때문에 지원되지 않는 브라우저에 대해 합리적인 리셋을 할 수 있다. 즉 페이지를 막지 않는다는 것이다.아직도 많은 자원you can preload이 있기 때문에 이것은 다기능의 도구일 수 있다.⚒️

요약

글꼴 불러오는 것에 대한 제어가 부족하다는 것을 발견했습니다. 이 문제도 당신을 낙담하게 한다면 베이스64를 작은 글꼴로 사용하면 도움이 될 것입니다.비슷한 크기의 그림을 미리 불러오려고 하는 것을 발견하면🖼️ 당신의 페이지가 정상적으로 작동하도록 하기 위해서, 이것은 사실상 가장 큰 표지이다. 이런 방법은 당신이 나를 찾을 수 있도록 도와줄 수 있다. 글씨체는 사이트 표지나 네비게이션 버튼만큼 중요하다.🍔
명확하게 말하자면, 이것은 footgun일 수 있습니다. - 100k 글꼴이 도착하지 않았기 때문에 몇 분 안에 페이지의 불러오는 것을 막지 마십시오. 깜빡임이나 layout shift을 피하기 위해base64를 사용하십시오.나는 이것이 모든 사이트에 의미가 있다고 생각하지 않는다.나는 심지어 내가 이 블로그에서 이 전략을 실시할지 안 할지조차 확실하지 않다.
그러나 이전developer.chrome.com 사례 연구를 돌이켜 보면 우리는 이미지와 스타일시트를 연결하기를 기꺼이 바란다.나는 우리가 페이지에 직접 글꼴을 연결해서는 안 된다고 생각한다. 글꼴은 약 20k개의 파일로 영원히 바뀌지 않지만, 동기화된 지문 (영구 캐시) 스타일시트로 이동할 것이다. 그 중에서base64 글꼴만 포함될 수도 있다.
➡️ 니 생각을 알려줘.