폰트 한 번만 손봐도 체감 속도 달라집니다: preload·서브셋 실험

요약

웹폰트에 서브셋과 preload, font-display 조합을 달리해 첫 화면 지연과 깜빡임을 테스트했습니다. 본문 폰트 1개만 서브셋+preload+swap 조합이 LCP 안정화와 깜빡임 최소화에 가장 효율적이었습니다. 강조 폰트까지 모두 preload하면 모바일 저속 환경에서 오히려 LCP가 악화될 수 있습니다.

문제 정의

웹폰트는 브랜드를 살리지만 초기 로딩과 텍스트 깜빡임(FOUT/FOIT)을 유발합니다. 이미지 못지않게 성능 영향이 큽니다.

테스트 환경

기기/브라우저: 1번과 동일
폰트: 본문 Sans 1종, 강조 Sans/Bold 1종, 아이콘 1종
용량: 원본 300~500KB, 서브셋 80~150KB
네트워크: 4G, 3G
측정: 첫 표시, LCP, 깜빡임 관찰, INP

항목	값
본문 폰트	Sans Regular(한글+라틴)
강조 폰트	Sans Bold
아이콘	아이콘 폰트 또는 SVG sprite
파일 용량	원본 300~500KB, 서브셋 80~150KB

시나리오

A: 서브셋/Preload 없음, display:auto
B: 본문만 서브셋+preload, display:swap
C: 본문+강조 모두 서브셋+preload, display:optional
D: 아이콘을 SVG sprite로 대체

결과 요약

• B: 가장 안정적. LCP 개선, 깜빡임 최소, 구현 난도 중간
• C: 초기 네트워크 혼잡으로 모바일 저속 환경에서 LCP 악화 가능
• D: 용량 절감·가시성 개선. 빌드 파이프라인 정리 필요 (전/후 스크린샷 자리)

권장 설정

• 서브셋: 본문에 필요한 문자셋만(한글+기본 라틴)
• Preload: 첫 화면에 실제 쓰는 본문 Regular 1개만
• font-display: swap(콘텐츠 우선 사이트) 또는 optional
• 폴백: 시스템 폰트 스택 정리
• 아이콘: 가능하면 SVG sprite, 불가 시 아이콘 폰트도 서브셋

체크리스트

• 네비/헤더 텍스트 커버리지 포함 확인
• Preload는 1개만, 나머지는 지연 로딩
• 아이콘은 SVG sprite 검토
• 폰트 캐시 장기화(max-age, immutable)
• 저사양 기기에서 FOUT/FOIT 재현 테스트

결론

가성비 최강 조합은 “본문 1종 서브셋 + preload + swap”. 강조/헤딩은 스크롤 이후 로딩하거나 사용 빈도를 낮추세요.

우선순위	폰트
1	시스템 Sans(예: Apple SD, Noto Sans KR 등)
2	BodyKR(서브셋)
3	Generic sans-serif

독자 액션

현재 폰트 파일 개수·용량을 파악하고, 본문 1종 서브셋+preload만 먼저 적용해 4G에서 첫 화면 깜빡임 변화를 확인하세요.