Making Google Fonts Faster
해당 포스트는 다음 페이지의 번역, 정리본입니다. 원문을 읽고 싶으면 다음 페이지를 방문해주세요.
This article is translation of this article. If it's a problem, I will delete this article. Please comment to let me know. Thank you.
개요
해당 포스트는 다음 4가지 개념에 대해 다룹니다.
- Google Fonts를 import하는 최선의 방법
- font를 download하는데에 latency time skip 방법
- Fix flash-of-invisible text (FOIT) - font가 완전히 불러와질 때까지 hide되는 문제
- (뒷부분의 self-host 부분은 제게는 필요없던 부분이라 생략하였습니다. 원문을 체크해주세요.)
Google Fonts request 분석
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet"/>위 코드는 font file을 불러오는 것이 아니라 @font-face가 선언된 stylesheet를 불러오는 것이다.
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}위의 코드에서 확인할 수 있듯이, @font-face는 브라우저에게 우선은 local에 존재하는 font file을 사용하라고 명시한다.
<link> or @import
결론적으로 @import를 사용하면 site load 속도는 느려진다. 이는 critical-request-depth (연속적인 네트워크 요청을 의미함)가 쓸데없이 길어지기 때문이라고 한다.
HTML의 <head> 태그에 옮김으로써 이 chain의 수를 줄일 수 있다.
warmup with preconnect
preconnect를 사용함으로써 fonts.gstatic.com에 DNS lookup, TCP handshake, TLS negotiation를 warm up해서 성능 향상을 불러올 수 있다.
<link rel="preconnect" href="https://fonts.gstatic.com/" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet"/>crossorigin은 anonymous mode로 불러올 때를 위해 필요하다고 한다.
최근의 google fonts에서 link 방식으로 체크하면 이미 preconnect를 더해서 준다.
FOIT and font-display property
중요한 용어 정리를 먼저하고 넘어가겠다.
- FOIT : flash of invisible text (font가 적용되기 까지 font를 hide)
- FOUT : flash of unstyled text (font 적용 전, browser 기본 font를 적용해서 보여줌)
만약, FOUT에 대해 신경쓰지 않고 최대한 빠르게 font가 적용된 글자를 보여주고 싶다면, @font-face 선언에다가 font-display : swap을 적용시켜주면 된다.
<!-- Default HTML embed snippet from Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Redressed" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">참조
