지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions

간단 소개

웹폰트 최적화 기법(Subset Font, Preload)과 Safari 브라우저의 Preload 문제 해결을 위한 CloudFront Function 활용법을 소개합니다.

AI Summary

웹폰트 최적화 및 지연 시간 해결
- @font-face를 사용하여 웹폰트 적용 시 폰트 로딩 지연 문제 발생 가능.
- Subset Font를 통해 불필요한 Glyph를 제거하여 폰트 용량 감소 (70% 이상 절감).
- Preload link를 사용하여 폰트 로드 우선순위 높여 Critical Request Depth (CRD) 감소.
Safari 브라우저의 Preload 문제 해결
- Safari는 Font preload request에 CORS 요청을 하지 않아 Cache 활용 불가.
- **CloudFront Function (CFF)**을 사용하여 Safari에서도 Preload가 정상적으로 동작하도록 함.
- CFF를 통해 요청 헤더에 Origin 추가 및 응답 헤더에서 Origin 제거.
추가적인 성능 개선 팁
- 최대한 빨리 가져와야 하는 리소스에 preload link 사용.
- 자주 사용하는 CDN에 preconnect link 사용.
- 브라우저 이슈 발생 시 Edge function 활용.