Google 글꼴 성능 최적화

Google Fonts가 인기가 있다고 말할 수 있습니다. 글을 쓰는 시점에서 웹에서 29조 번 이상 조회되었으며 그 이유를 쉽게 이해할 수 있습니다. 컬렉션을 통해 웹사이트에서 무료로 사용할 수 있는 900개 이상의 아름다운 글꼴에 액세스할 수 있습니다. Google 글꼴이 없으면 사용자 장치에 설치된 소수의 "시스템 글꼴"로 제한됩니다.

시스템 글꼴 또는 '웹 안전 글꼴'은 운영 체제 전반에 걸쳐 가장 일반적으로 사전 설치되는 글꼴입니다. 예를 들어 Arial 및 Georgia는 Windows, macOS 및 Linux 배포판과 함께 패키지로 제공됩니다.

모든 좋은 것과 마찬가지로 Google 글꼴에는 비용이 따릅니다. 각 글꼴에는 웹 브라우저가 표시되기 전에 다운로드해야 하는 가중치가 있습니다. 올바른 설정을 사용하면 추가 로드 시간이 눈에 띄지 않습니다. 그러나 잘못 이해하면 사용자가 텍스트가 표시되기 전에 몇 초까지 기다릴 수 있습니다.

Google 글꼴은 이미 최적화되어 있습니다

Google Fonts API는 단순히 글꼴 파일을 브라우저에 제공하는 것 이상을 수행할 뿐만 아니라 가장 최적화된 형식으로 파일을 전달할 수 있는 방법을 알아보기 위해 스마트 검사도 수행합니다.

Roboto를 살펴보겠습니다. GitHub는 일반 변형의 무게가 168kb라고 알려줍니다.

그러나 API에서 동일한 글꼴 변형을 요청하면 이 파일이 제공됩니다. 11kb에 불과합니다. 어떻게 그렇게 될수 있니?

브라우저가 API에 요청하면 Google은 먼저 브라우저가 지원하는 파일 형식을 확인합니다. 저는 대부분의 브라우저와 마찬가지로 WOFF2를 지원하는 최신 버전의 Chrome을 사용하고 있으므로 글꼴이 고도로 압축된 형식으로 제공됩니다.

내 사용자 에이전트를 Internet Explorer 11로 변경하면 대신 WOFF 형식의 글꼴이 제공됩니다.

마지막으로 사용자 에이전트를 IE8로 변경하면 EOT(Embedded OpenType) 형식의 글꼴이 표시됩니다.

Google Fonts는 각 글꼴에 대해 30개 이상의 최적화된 변형을 유지 관리하고 각 플랫폼 및 브라우저에 대한 최적의 변형을 자동으로 감지하여 제공합니다.

— Ilya Grigorik, 웹 글꼴 최적화

이것은 사용자 에이전트를 확인하여 해당 형식을 지원하는 브라우저에 가장 성능이 좋은 형식을 제공하는 동시에 이전 브라우저에서 글꼴을 일관되게 표시할 수 있는 Google 글꼴의 훌륭한 기능입니다.

브라우저 캐싱

Google Fonts의 또 다른 기본 제공 최적화는 브라우저 캐싱입니다.

Google 글꼴의 유비쿼터스 특성으로 인해 브라우저에서 항상 전체 글꼴 파일을 다운로드할 필요는 없습니다. 예를 들어 SmashingMagazine은 'Mija'라는 글꼴을 사용합니다. 브라우저에서 해당 글꼴을 처음 본 경우 텍스트가 표시되기 전에 완전히 다운로드해야 하지만 다음에 해당 글꼴을 사용하여 웹사이트를 방문할 때 , 브라우저는 캐시된 버전을 사용합니다.

Google Fonts API가 더 널리 사용됨에 따라 귀하의 사이트 또는 페이지 방문자는 브라우저 캐시에 귀하의 디자인에 사용된 Google 글꼴이 이미 있을 것입니다.

— FAQ, Google 글꼴

Google 글꼴 브라우저 캐시는 캐시가 더 빨리 지워지지 않는 한 1년 후에 만료되도록 설정됩니다.

참고: Mija는 Google 글꼴이 아니지만 캐싱 원칙은 공급업체별로 다릅니다.

추가 최적화 가능

Google은 글꼴 파일 전달을 최적화하기 위해 많은 노력을 기울이고 있지만 페이지 로드 시간에 미치는 영향을 줄이기 위해 구현에서 수행할 수 있는 최적화가 여전히 있습니다.

1. 글꼴 모음 제한

가장 쉬운 최적화는 더 적은 수의 글꼴 모음을 사용하는 것입니다. 각 글꼴은 페이지 무게에 최대 400kb를 추가할 수 있으며 여기에 몇 가지 다른 글꼴 패밀리를 곱하면 갑자기 글꼴의 무게가 전체 페이지보다 더 커집니다.

두 개 이하의 글꼴을 사용하는 것이 좋습니다. 하나는 제목용이고 다른 하나는 콘텐츠용으로 일반적으로 충분합니다. 글꼴 크기, 두께 및 색상을 올바르게 사용하면 하나의 글꼴로도 멋진 모양을 얻을 수 있습니다.

2. 변형 제외

Google 글꼴의 고품질 표준으로 인해 많은 글꼴 모음에는 사용 가능한 글꼴 두께의 전체 스펙트럼이 포함되어 있습니다.

• 얇은 (100)
• 얇은 기울임꼴(100i)
• 빛 (300)
• 밝은 기울임꼴(300i)
• 레귤러 (400)
• 일반 기울임꼴(400i)
• 미디엄 (600)
• 중간 기울임꼴(600i)
• 볼드(700)
• 굵은 기울임꼴(700i)
• 블랙(800)
• 검정 기울임꼴(800i)

이는 12개의 변형이 모두 필요할 수 있는 고급 사용 사례에 적합하지만 일반 웹사이트의 경우 3 또는 4개만 필요할 때 12개의 변형을 모두 다운로드해야 함을 의미합니다.

예를 들어 Roboto 글꼴 패밀리의 무게는 ~144kb입니다. 그러나 Regular, Regular Italic 및 Bold 변형만 사용하는 경우 해당 숫자는 ~36kb로 줄어듭니다. 75% 절약!

Google 글꼴을 구현하기 위한 기본 코드는 다음과 같습니다.

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

그렇게 하면 '일반 400' 변형만 로드됩니다. 즉, 모든 밝은 글씨체, 굵게 및 기울임꼴 텍스트가 올바르게 표시되지 않습니다.

대신 모든 글꼴 변형을 로드하려면 다음과 같이 URL에 가중치를 지정해야 합니다.

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

웹사이트에서 Thin(100)에서 Black(900)까지 글꼴의 모든 변형을 사용하는 경우는 드뭅니다. 최적의 전략은 사용하려는 두께만 지정하는 것입니다.

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

이것은 여러 글꼴 모음을 사용할 때 특히 중요합니다. 예를 들어, 제목에 Lato를 사용하는 경우 굵은 이탤릭체(굵은 기울임꼴)만 요청하는 것이 좋습니다.

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. 요청 결합

위에서 작업한 코드 스니펫은 HTTP 요청이라고 하는 Google 서버( fonts.googleapis.com )를 호출합니다. 일반적으로 웹 페이지에 필요한 HTTP 요청이 많을수록 로드하는 데 더 오래 걸립니다.

두 개의 글꼴을 로드하려면 다음과 같이 하면 됩니다.

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

그것은 작동하지만 브라우저가 두 가지 요청을 하게 됩니다. 다음과 같이 단일 요청으로 결합하여 최적화할 수 있습니다.

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

단일 요청이 보유할 수 있는 글꼴 및 변형 수에는 제한이 없습니다.

4. 리소스 힌트

리소스 힌트는 웹사이트 성능을 향상시킬 수 있는 최신 브라우저에서 지원하는 기능입니다. 'DNS Prefetching'과 'Preconnect'의 두 가지 리소스 힌트 유형을 살펴보겠습니다.

참고: 브라우저가 최신 기능을 지원하지 않으면 무시합니다. 따라서 웹 페이지는 여전히 정상적으로 로드됩니다.

DNS 프리페칭

DNS 미리 가져오기를 사용하면 페이지가 로드되기 시작하는 즉시 브라우저에서 Google의 글꼴 API( fonts.googleapis.com )에 대한 연결을 시작할 수 있습니다. 이것은 브라우저가 요청할 준비가 되었을 때 일부 작업이 이미 완료되었음을 의미합니다.

Google 글꼴에 대한 DNS 프리페치를 구현하려면 다음 한 줄짜리 웹페이지를 <head> 에 추가하기만 하면 됩니다.

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

사전 연결

Google Fonts 내장 코드를 보면 단일 HTTP 요청으로 보입니다.

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

그러나 해당 URL을 방문하면 다른 URL(https://fonts.gstatic.com)에 대한 요청이 세 번 더 있음을 알 수 있습니다. 각 글꼴 변형에 대해 하나의 추가 요청.

이러한 추가 요청의 문제는 https://fonts.googleapis.com/css 에 대한 첫 번째 요청이 완료될 때까지 브라우저가 이러한 추가 요청을 만드는 프로세스를 시작하지 않는다는 것입니다. 여기에서 Preconnect가 필요합니다.

사전 연결은 사전 가져오기의 향상된 버전으로 설명할 수 있습니다. 브라우저가 로드할 특정 URL에 설정됩니다. DNS 조회를 수행하는 대신 TLS 협상 및 TCP 핸드셰이크도 완료합니다.

DNS 프리페칭과 마찬가지로 한 줄의 코드로 구현할 수 있습니다.

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

이 코드 줄을 추가하기만 하면 페이지 로드 시간을 100ms까지 줄일 수 있습니다. 이것은 먼저 완료될 때까지 기다리지 않고 초기 요청과 함께 연결을 시작함으로써 가능합니다.

5. 로컬에서 글꼴 호스팅

Google 글꼴은 허가를 요청하지 않고 글꼴을 사용, 변경 및 배포할 수 있는 자유를 제공하는 'Libre' 또는 '무료 소프트웨어' 라이선스에 따라 사용이 허가됩니다. 즉, 원하지 않는 경우 Google 호스팅을 사용할 필요가 없습니다. 글꼴을 자체 호스팅할 수 있습니다!

모든 글꼴 파일은 Github에서 사용할 수 있습니다. 모든 글꼴이 포함된 zip 파일도 사용할 수 있습니다(387MB).

마지막으로 사용하려는 글꼴을 선택한 다음 필요한 파일과 CSS를 제공하는 도우미 서비스가 있습니다.

글꼴을 로컬로 호스팅하는 데에는 단점이 있습니다. 글꼴을 다운로드하면 그 순간 그대로 저장됩니다. 개선되거나 업데이트된 경우 해당 변경 사항을 받지 못합니다. 이에 비해 Google Fonts API에서 글꼴을 요청하면 항상 최신 버전이 제공됩니다.

API의 lastModified 매개변수에 유의하십시오. 글꼴은 정기적으로 수정 및 개선됩니다.

6. 글꼴 표시

브라우저가 Google 글꼴을 다운로드하는 데 시간이 걸린다는 것을 알고 있지만 준비되기 전에 텍스트는 어떻게 됩니까? 오랫동안 브라우저는 "FOIT"(Flash of Invisible Text)라고도 하는 텍스트가 있어야 하는 곳에 공백을 표시합니다.

추천 자료: Chris Coyier의 "FOUT, FOIT, FOFT"

아무것도 표시하지 않는 것은 최종 사용자에게 불편한 경험이 될 수 있습니다. 더 나은 경험은 처음에 시스템 글꼴을 대체로 표시한 다음 준비가 되면 글꼴을 "교체"하는 것입니다. 이것은 CSS font-display 속성을 사용하여 가능합니다.

font-display: swap; @font-face 선언에 Google 글꼴을 사용할 수 있을 때까지 대체 글꼴을 표시하도록 브라우저에 지시합니다.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

2019년 Google은 font-display: swap 지원을 추가할 것이라고 발표했습니다. 글꼴 URL에 추가 매개변수를 추가하여 즉시 구현을 시작할 수 있습니다.

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Text 매개변수 사용

Google Fonts API의 약간 알려진 기능은 text 매개변수입니다. 이 거의 사용되지 않는 매개변수를 사용하면 필요한 문자만 로드할 수 있습니다.

예를 들어 고유한 글꼴이 필요한 텍스트 로고가 있는 경우 text 매개변수를 사용하여 로고에 사용된 문자만 로드할 수 있습니다.

다음과 같이 작동합니다.

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

분명히, 이 기술은 매우 구체적이며 몇 가지 현실적인 응용 프로그램만 있습니다. 하지만 사용할 수 있다면 글꼴 두께를 최대 90%까지 줄일 수 있습니다.

참고: text 매개변수를 사용할 때 기본적으로 "일반" 글꼴 두께만 로드됩니다. 다른 가중치를 사용하려면 URL에 명시적으로 지정해야 합니다.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

마무리

Google Fonts를 사용하는 상위 100만 웹사이트의 약 53%에서 이러한 최적화를 구현하면 엄청난 영향을 미칠 수 있습니다.

위의 항목 중 몇 개를 시도했습니까? 의견 섹션에서 알려주십시오.