Safari 폰트 Preload 문제, Edge Function으로 해결!
by DD
3년 전
조회수 2
Safari 브라우저에서 Preload된 폰트가 캐싱되지 않는 문제 발생
CORS 설정과 Vary Header 문제로 인해 캐시 미스 발생
CloudFront Function을 사용하여 Safari의 폰트 로딩 문제 해결
Safari Preload 동작 원리 분석
Safari는 CORS 요청에 대한 Preload 동작 방식에 차이가 있다. 구체적으로, @font-face에서 교차 도메인 폰트 요청 시 CORS를 사용하지 않는다. 따라서, preload link를 통해 캐싱된 폰트를 재사용하지 못하는 문제가 발생한다. 결과적으로, 폰트 로딩 속도가 저하되는 원인이 된다.
CORS와 Vary Header의 함정
브라우저 캐싱은 Vary Header를 기반으로 동작하며, CORS 설정에 따라 캐시 동작이 달라진다. Origin Header가 다르면 캐시 미스가 발생하며, Safari는 preload 요청에 Origin을 포함하지 않는다. 따라서, CloudFront Function을 통해 Origin Header를 추가하여 문제를 해결한다.
Edge Function을 활용한 해결 전략
Edge Function을 사용하여 Safari의 폰트 로딩 문제를 해결한다. 구체적으로, CloudFront Function에서 Origin Header를 추가하여 CORS 문제를 해결한다. 또한, Vary Header에서 Origin을 제거하여 캐싱 효율을 높인다. 결과적으로, 웹 폰트 로딩 속도 개선 및 사용자 경험 향상을 달성한다.
