기록을 불러오는 중입니다...
unicode-range로 해결?unicode-range였습니다. 옛날에 어느 아티클에서 폰트 최적화 방법 중 하나로 본 적이 있었기 때문입니다. 하지만 그 방식은 직접적인 성능 개선 효과는 없습니다. 정확히는 “폰트를 로드하는 조건을 설정”하는 기능이기 때문입니다.@font-face 구문을 만나면 해당 폰트 파일을 즉시 로드합니다. 허나 unicode-range 속성이 설정되어 있다면, 브라우저는 지정된 글자가 화면에 나타났을 때 폰트 파일을 로드합니다. 즉 느긋한 로드를 하는거죠. 랜딩 페이지에 지정한 글자가 없다면, 브라우저는 폰트 파일을 로드하지 않습니다. 따라서 렌더링 시 불필요한 리소스를 패치하지 않습니다. 간접적으로 성능 향상 효과를 누릴수 있습니다.$ python3 -m fontTools.subset public/fonts/FZuanSu/FZuanSu.ttf --output-file=public/fonts/FZuanSu/FZuanSu-subset.woff2 --flavor=woff2 --text="香格里拉"/* before */
@font-face {
font-family: "FZuanSu";
src: url("/fonts/FZuanSu/FZuanSu.ttf") format("truetype");
font-display: swap;
}
/* after */
@font-face {
font-family: "FZuanSu";
src: url("/fonts/FZuanSu/FZuanSu-subset.woff2") format("woff2");
font-display: swap;
unicode-range: U+9999, U+683C, U+91CC, U+62C9;
}/* 香, 格, 裏, 拉 네 가지 글자만 포함한 서브셋 파일 */
@font-face {
font-family: "FZuanSu";
src: url("/fonts/FZuanSu/FZuanSu-subset.woff2") format("woff2");
font-display: swap;
unicode-range: U+9999, U+683C, U+91CC, U+62C9;
}
/* fallback 폰트 파일 */
@font-face {
font-family: "FZuanSu";
src: url("/fonts/FZuanSu/FZuanSu.ttf") format("truetype");
font-display: swap;
}| 최적화 이전 | 최적화 이후 | |
| 로컬 + 프로덕션 | 2,170kb / 172ms | 2.8kb / 4ms |
| 라이브 + 프로덕션 | 2,146kb / 59ms | 2.8kb / 15ms |
<pre/> 태그에 적용되는 코드용 폰트와 같이 특수한 목적의 폰트는 서브세팅이 좋은 최적화 방법이 될 수 있습니다.woff , woff2)로 변환하여 폰트 파일 용량 줄이기font-display 를 이용해 렌더링 전략 설정하기 ⇒ UX 개선unicode-range 를 이용해 조건부로 로딩하기 ⇒ 불필요한 다운로드 방지local() 을 이용해 로컬 폰트를 우선적으로 사용하기 ⇒ 불필요한 다운로드 방지font-familiy 에 시스템 폰트를 활용하기 ⇒ 불필요한 다운로드 방지