웹 성능
속도와 Core Web Vitals를 위한 폰트 로딩 최적화 — 서브셋팅, 프리로딩, FOUT/FOIT 방지, CLS 해결 방법을 다룹니다.
폰트 프리로딩: 가장 중요한 폰트에 우선순위 주기
<link rel=preload>를 사용해 브라우저에 가장 중요한 폰트를 알려줍니다. FOUT를 줄이고, LCP를 개선하며, 프리로딩이 언제 도움이 되고 언제 해가 되는지 이해합니다.
폰트 로딩으로 인한 레이아웃 시프트(CLS) 방지하기
폰트 로딩은 누적 레이아웃 시프트(CLS)의 숨겨진 원인입니다. size-adjust, 폰트 지표 오버라이드, 폰트 관련 CLS를 없애는 전략을 배웁니다.
폰트 서브셋팅: 파일 크기 90% 줄이기
대부분의 웹 폰트에는 수천 개의 사용하지 않는 문자가 포함되어 있습니다. 필요한 것만 로드하도록 폰트를 서브셋팅해 파일 크기를 크게 줄이는 방법을 배웁니다.
font-display: swap, fallback, optional — 무엇을 선택할까
CSS의 font-display 디스크립터는 폰트 로딩 중 사용자가 무엇을 보는지 제어합니다. 각 값마다 트레이드오프가 있으며, 올바른 값을 선택하는 방법을 다룹니다.
웹 폰트 성능: 완전한 최적화 가이드
폰트 성능에 관해 알아야 할 모든 것 — 파일 크기, 로딩 전략, 렌더링 차단, 폰트가 Core Web Vitals에 미치는 영향까지 다룹니다.
Google Fonts 성능: 속도 팁과 모범 사례
Google Fonts는 편리하지만 사이트 속도를 늦출 수 있습니다. display=swap, preconnect 힌트, 셀프 호스팅, 서브셋 로딩으로 로딩을 최적화합니다.
성능을 위한 가변 폰트: 하나의 파일로 모든 것을 지배하다
가변 폰트는 6개 이상의 정적 폰트 파일을 하나로 대체할 수 있습니다. 파일 크기, HTTP 요청, 실제 벤치마크까지 성능 측면을 다룹니다.
FOUT 대 FOIT: 스타일 없는/보이지 않는 텍스트 깜빡임 이해하기
FOUT는 폴백 텍스트를 보여주고, FOIT는 아무것도 보여주지 않습니다. 둘 다 폰트 로딩의 부작용이며, 원인과 해결 방법을 다룹니다.