이전에는 웹 페이지를 최적화 하는 한 방법으로 lazy loading 방식을 알아보았다. 크롬 개발자 도구 탭에 있는 lighthouse를 통하면, 어떤 부분을 최적화를 추가로 할 수 있고, google에서 어떤 부분을 중요시 여기는지 추가로 확인할 수 있다. 폰트 최적화, 캐시최적화, CSS 최적화를 더 알아보겠으며 이번에는 폰트 최적화를 알아보자
⭐️ 폰트 최적화
✔️ typeface와 font
- typeface: 서체를 뜻하는 말로 공통 디자인을 공유하는 글꼴 전체를 의미한다.
- font: 글꼴을 뜻하는 말로, 서체의 세분화된 종류로 특정 크기, 굵기, 스타일들을 포한하여 제공된다.
웹 폰트는 다음과 같은 규칙을 통해 적용 된다.
✔️ 웹 폰트의 장, 단점
- 장점: 해당폰트가 로컬에 다운받아져 있지 않더라도 디자이너가 의도한 대로 원하는 디자인을 동일하게 제공 할 수 있다.
- 단점: 웹 폰트 용량이 무거워 적용시키는 동안 웹 전반에 속도 저하를 가져와 웹 폰트가 적용되는 과정이 눈에 보일 수도 있으며, 글자가 안보이는 경우가 발생할 수 있다.
FOUT(Flash of Unsytled Text) : 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링 되는 현상
FOIT(Flash of Invisible Text): 브라우저가 웹글꼴을 다운르도하기 전에 텍스트가 보이지 않는 현상
아래 예시는 2016년 미국 상원의원 Mitt Romney의 기사에서 웹 폰트 적용의 로딩이 늦어져, 정반대의 내용이 사용자에게 전달된 예시 이다.
이 처럼 웹 폰트 적용의 설정을 어떻게 하는지에 따라 사용자에게 전달하는 것이 아예 달라질 수 있다.
👉🏻 폰트 적용 시점 컨트롤
폰트 적용 시점은 font-display 를 통해 컨트롤 할 수 있다.
options
- auto: 브라우저 기본동작
- block: FOIT (timeout=3s), 타임아웃까지 텍스트를 보여주지 않는다.
- swap: FOUT, 응답이 올때까지 무한정 기다리고, 그 전까진 기본 폰트를 보여준다.
- fallback: FOIT 단 timeout 시간 내에 불러오지 못했을 시, 기본 폰트로 유지, 이후 캐시
- optional: FOIT 이후 네트워크 상태에 따라 기본폰트로 유지할지 웹폰트를 적용할지 결정
fallback을 통해 FOIT를 방지하고, FOUT을 최소화 할 수 있어 제일 기본 설정으로 사용된다.
javascript를 통한 UX 개선
아래와 같이 폰트가 로드 되는 시점에서 opacity를 조정함을 통해 사용자에게 더욱더 자연스럽게 보이게 할 수 있다.
👉🏻 폰트 사이즈 줄이기
preload 이용
<link rel="preload" href="/static_fonts/NanumGothic-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">- preload를 이용해서 폰트를 받으면 다른 어떤 것보다 먼저 리소스를 요청
_Dom이 로드되기 전에 로드가 되어 FOIT, FOUT이 없어지지만 렌더링이 늦어진다. - 사용 여부와 관계없이 무조건 리소스를 받음
- 화면에 꼭 필수적인 폰트를 로딩해야 할 때 사용.
- as와 crossorigin이 있어야 두 번 다운로드하지 않음
local 폰트 사용
기본적으로 local에 폰트가 있다면 그 폰트를 사용한다. 하지만 로컬에 저장된 폰트 이름을 기반으로 사용하기 때문에, 사용자의 local에 이름이 다르다면 소용이 없게 된다.
사용하는 문자열 만 로드
- subset 사용
[transfonter 페이지]https://transfonter.org/
특정 변환기를 이용해서, 사용하는 format만 로드
- unicode range 사용
unicode-range에 사용하는 unicode만 작성하여, 사용하는 문자만 로드
data-uri로 변환
font를 data uri를 사용해서 받아오는 방법이다. FOIT와 FOUT가 방지되지만 css parsing이 block되어 렌더링이 지연된다. 특히 한글 폰트는 크기가 커서 속도가 더 느려질 수 있다.
⭐️ 참고
