최상의 페이지 로드 성능을 얻기 위해 웹 글꼴을 불러오는 방법

사용자 정의 웹 페이지 글꼴은 인터넷에서 광범위하게 사용되지만, 많은 웹 사이트들이 불러오는 방식을 개선할 수 있다.웹 글꼴을 정확하게 불러오지 않으면 반드시 웹 페이지의 불러오는 성능 문제를 초래하여 사이트의 속도를 크게 낮추고 사이트의 지속성에 영향을 줄 것이다.웹 글꼴을 효율적으로 로드하려면 몇 가지 절차가 필요합니다.

올바른 글꼴 형식 사용

글꼴 파일 미리 로드

정확한 순서에 따라 정확한 글씨체 성명을 사용

및 글꼴 로드

중 보이지 않는 텍스트 방지(FOIT)

올바른 글꼴 형식 사용
인터넷에서 사용할 수 있는 글꼴 형식은 많지만, 전통적인 인터넷 익스플로러 버전을 지원하지 않으면 두 가지만 필요합니다.이러한 형식은 다음과 같습니다.워프와 워프이 두 가지 형식만 사용하면 기본적으로 gzip으로 압축됩니다. (이것은 그들의 파일 크기가 매우 작을 수 있음을 의미합니다.) 웹에 최적화되었고 IE 9+와 모든 현대 브라우저의 지원을 받았습니다.

웹 페이지 글꼴 미리 로드
미리 불러오는 이 단어는 우리에게 있어서 약간 오도된 것이다.본질적으로, 우리는 브라우저에 적당한 rel="" 표시와 속성을 사용하여 글꼴 파일을 빨리 불러오기를 희망합니다.

<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">

<link rel="preload" as="font" href="/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous">

주의: 여기 사용crossorigin이 중요합니다.이 속성이 없으면 브라우저는 실제로 미리 불러온 글꼴을 무시하기 때문에 글꼴 파일을 새로 추출하여 귀여운 작업을 취소합니다.브라우저에서 글꼴을 익명으로 가져오기를 원합니다.이것이 바로 우리가 익명으로 글꼴 파일을 미리 불러올 것을 요청하는 이유입니다.위의 예에서 rel="preload" as="font" 속성은 브라우저가 글꼴 다운로드를 빨리 시작하도록 요구할 것이다.코드는 브라우저에 이 파일이 글꼴이라는 것을 알려주기 때문에 불러오는 대기열에서 파일을 적당한 우선순위로 정렬할 수 있습니다.브라우저support preload and prefetch hints는 HTML 파일의 프롬프트를 보자마자 글꼴 다운로드를 시작합니다.즉, 글꼴이 로드될 때까지 기다릴 CSS가 더 이상 필요하지 않습니다.

만약 여러 개의 웹 fonts가 있다면, 위에 있는 초기 그림을 접는 데 하나가 필요하지 않습니까?
만약 당신의 사이트에 두 가지 웹 페이지 글꼴을 불러와야 한다고 가정하지만, '접기 위' 의 제목 영역에서만 글꼴을 사용합니다.두 번째 웹 글꼴 대신 rel="preload" 을 사용할 수 있습니다. rel="prefetch"이 속성은 브라우저가 자원을 다운로드할 준비를 하고 있지만, 불러오는 대기열에서 낮은 우선 순위를 부여합니다.

컨텐트 제공 네트워크를 통한 사전 로드 사용
CDN을 사용하여 Google Fonts와 같은 네트워크에서 자산을 호스팅하는 경우 미리 로드된 글꼴 파일이 CSS에 사용된 글꼴 파일과 일치하는지 확인해야 합니다.플랫폼의 글꼴이 업데이트될 수 있기 때문에 곤란해질 수 있습니다.예를 들어, 만약 새 버전을 위해 CSS를 사용하는 동시에 구 버전의 글꼴을 미리 설치한다면, 결국은 같은 글꼴의 두 버전을 앞에서 다운로드하여 사용자의 대역폭을 낭비하고 우리의 귀여운 작업을 다시 파괴할 수도 있다.

올바른 글꼴 선언
글꼴 시리즈를 설명하는 것은 매우 간단한 코드이지만, 정확한 순서로 내용의 중요성을 설명하는 것은 과소평가할 수 없다.이 예는 최적의 페이지 로드 성능을 얻기 위해 글꼴 파일을 로드하는 정확한 순서를 보여 줍니다.

@font-face {
 font-family: 'Custom Font';
 font-weight: 400;
 font-style: normal;
 font-display: swap;
 unicode-range: U+000-5FF; /* Downloads only latin glyphs */ 
 src:
  local('Custom Font'),
  url('/fonts/custom-font.woff2') format('woff2'), 
  url('/fonts/custom-font.woff') format('woff');
}

앞에서 말한 바와 같이 코드는 최적화된 웹 글꼴(woff와woff2)만 사용합니다.이 코드는 브라우저에 필요한 라틴 자형만 불러올 수 있음을 알려 주지만, 이 속성은 브라우저가 전체 글꼴을 다운로드하는 것을 막지 않습니다.local() 함수의 사용과 글꼴 설명 순서에 대해 언급하지 않은 몇 줄이 있음을 알 수 있습니다.local() 기능을 통해 사용자가 장치에서 글꼴의 로컬 복사본을 사용할 수 있습니다.예를 들어 구글 글꼴의 네트워크 글꼴인 로보토는 이미 안드로이드 장치에 설치되어 있다.이 설정을 포함하는 로보토를 사용하여 웹 사이트를 볼 경우 장치는 다른 버전을 다운로드하는 대신 설치된 로컬 글꼴 버전을 사용합니다.
브라우저에서 순서대로 글꼴 추출을 시작하므로 글꼴 선언 순서도 중요합니다.woff2 형식을 지원하면 글꼴을 다운로드합니다.형식을 인식할 수 없으면 다음으로 넘어가서 이 형식을 불러오려고 시도합니다.만약 eot와ttf 글꼴을 사용하고 싶다면, src 성명의 끝, woff 파일 다음에 추가하십시오.

글꼴 로드 중 보이지 않는 텍스트나 글꼴 피하기
웹 글꼴은 상당히 큰 파일일 수 있으며, 압축과 압축을 거쳐도 로드하는 데 시간이 걸릴 수 있습니다.일부 브라우저는 텍스트에 적용된 글꼴을 로드할 때까지 텍스트를 숨깁니다.그래서'스텔스 텍스트의 플래시'라는 단어가 생겼다.처음에는 시스템 글꼴을 사용해서 보이지 않는 텍스트를 피하고 웹 글꼴을 불러온 후에 대체할 수 있습니다.앞의 @font-face 예시에서 우리는 font-display 성명을 포함하였다.swap 값은 브라우저에 이 웹 글꼴을 사용하는 텍스트는 시스템 글꼴로 표시해야 한다는 것을 알려 주는 데 사용됩니다.사용자 정의 웹 글꼴이 준비되면 시스템 글꼴이 '교체' 됩니다.모든 브라우저가 있는 것은 아닙니다support for font-display.대다수가 그렇지만.브라우저가 지원하지 않으면 걱정할 필요가 없습니다.지원되지 않으면 브라우저는 기본 동작에 따라 글꼴을 계속 로드합니다.

글꼴이 준비되지 않았을 때 브라우저의 기본 동작
Chrome과 Firefox는 최대 3초간 텍스트를 숨깁니다.텍스트가 준비되지 않으면 사용자 정의 글꼴이 준비될 때까지 시스템 글꼴을 사용합니다.Safari는 사용자 정의 글꼴이 준비될 때까지 텍스트를 숨깁니다.Edge는 사용자 정의 글꼴이 준비될 때까지 시스템 글꼴을 사용하고 글꼴을 교환합니다.

결론왜 이런 웹 글꼴 불러오는 방법을 실현해야 합니까
이러한 기본적인 코드 변경이 당신 사이트의 사용자 체험을 최적화하고 개선할 수 있음을 감안하면, 우리는 이러한 방식으로 글씨체를 불러오는 것은 매우 쉬운 일이라고 생각합니다.모든 사람이 초고속 광대역을 사용하는 것은 아니라는 것을 명심해라.전 세계의 많은 국가들이 비교적 느린 인터넷 속도에 의존한다.따라서, 우리는 반드시 우리가 할 수 있는 대로 이 사용자들을 위해 사이트의 성능을 향상시켜야 한다.이렇게 함으로써 우리는 이러한 사용자의 사용자 체험을 개선할 뿐만 아니라 모든 사용자의 사용자 체험도 개선했다.이것은 전부가 아니다. 이런 방법을 사용하면 글씨체 자원의 불러오는 것을 줄이고 데이터를 절약할 수 있다.한 페이지의 조회량이 매우 많은 사이트에 대해 말하자면, 이런 데이터의 절약은 아마도 상당히 굉장할 것이다.만약에 다른 것이 있다면 우리는 이러한 작은 개선, 특히 대형 프로젝트에 대해 전체적인 사용자 체험을 개선하는 데 강제적이어야 한다고 생각한다.