기존에는 폰트를 사용할 시점에 폰트를 외부로부터 다운을 받아 load가 느려지게 되어 preload 옵션을 사용하여 load의 시점을 앞당겼다.
그러다가 FBConf Korea의 웹폰트의 사용과 최적화 세션을 보게 되면서 단순하게 폰트의 형식을 바꾸는 것만으로도 성능 개선이 가능하다고 하여 사용중인 서비스에 직접 적용해보았다.
woff -> woff2 변경
폰트의 형식은 아래와 같이 다양하게 존재하며 WOFF2 형식을 사용하면 폰트의 용량을 줄일 수 있다고 한다.
기존에 사용했던 woff 사이즈는 455KB 정도였다.
변경 후에는 약 60퍼 정도 절감된 효과를 얻을 수 있었다.
CSS의 font-display 속성 사용
브라우저가 렌더링하는 과정에서 웹 폰트가 로드되지 않았다면 해당 자원을 사용하는 텍스트의 렌더링을 차단한다. 그런데 여기서 브라우저마다 조금씩 차이가 존재한다고 한다.
자주 사용하는 Chorme의 경우에는 FOIT 방식으로 차단하고 IE 계열은 FOUT 방식으로 렌더링을 차단한다.
(사실 브라우저 속도가 좋아서 이런식으로 차단하는지는 몰랐었다...)
Flash of Invisible Text (FOIT): 브라우저가 폰트를 로드 하기전에 폰트가 보이지 않는 현상
Flash of Unstyled Text (FOUT): 브라우저가 폰트를 로드하기전에 폰트가 적용되지 않은 글자가 보이는 현상
그런데 Chrome을 사용하는 입장에서 사용자 경험으로는 FOUT 방식이 더 적절하다고 하며 Chrome에서 적용하기 위해 CSS의 font-display 속성을 사용하면 된다고 한다.
@font-face {
font-family: 'BMHANNAPro';
src: url('https://cdn.jsdelivr.net/gh/webfontworld/woowahan/BMHannaPro.woff2') format('woff2');
font-display: swap;
}여기에서 font-display에 적용할 수 있는 5가지 값이 있다.
auto
auto 옵션은 브라우저의 기본 동작을 의미한다.
block
웹 폰트가 로드되지 않았을 때는 텍스트를 렌더링하지 않으며 만약 3초가 넘어서도 로드되지 않았다면 fallback system font으로 보여주다가 로드가 되고나서야 웹 폰트를 적용시킨다.
swap
우선 fallback system font로 렌더링하고 로드가 되고 나면 웹 폰트를 적용시킨다. (따라서 항상 텍스트가 보이기 된다)
fallback
우선 0.1초 정도 텍스트를 렌더링하지 않으며 이후에는 fallback system font로 렌더링을 한다. 그리고 3초 이내에 폰트가 로드되지 않으면 그 이후에 폰트가 로드되더라도 계속 fallback system font로 렌더링하게 된다.
그래서 사용자가 처음 사이트에 방문했을 때 폰트가 제공되지 않아도 된다면 이 옵션을 사용하는 것이 적절할 것 같다. (이후 방문에는 캐싱으로 인해 웹 폰트가 바로 적용된다는 장점이 존재)
optional
fallback과 유사할수도 있다고 할 수 있는데 처음 0.1초 정도 텍스트를 렌더링하지 않으며 이후에는 fallback system font로 렌더링을 한다. 그리고 웹 폰트가 로드되더라도 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정한다는 점에서 다르게 작동하는 옵션이다.
Reference
