Google Fonts CDN 사용을 중단했습니다
Google CDN에서 폰트를 불러오면 사이트 속도가 느려집니다.
예전에는 헤더에 링크 하나만 넣어서 사용했습니다. 간편하다고 느꼈죠. 그러다 Lighthouse 점수를 확인해 보았습니다.
보고서에는 문제가 나타났습니다. 브라우저가 Google 서버에 추가 연결을 시도해야 했습니다. DNS 조회와 TLS 핸드셰이크를 수행해야 했고, 이로 인해 지연이 발생했습니다. 느린 모바일 연결 환경에서는 텍스트가 너무 오랫동안 보이지 않는 상태로 유지되었습니다.
저는 셀프 호스팅(self-hosting) 방식으로 전환했습니다. 오후 한나절이면 충분했습니다. 이제는 모든 프로젝트에 이 방식을 적용합니다.
필요한 설정은 다음과 같습니다:
- WOFF2 형식을 사용하세요. WOFF보다 30% 더 작습니다. 이제
.ttf나.eot같은 오래된 형식은 필요하지 않습니다. - 폰트를 변환하세요.
fonttools라이브러리를 사용하여.ttf파일을.woff2로 압축하세요. font-display: swap속성을 사용하세요. 이렇게 하면 대체 텍스트(fallback text)가 즉시 표시됩니다. 폰트가 로드되는 동안 텍스트가 보이지 않는 현상을 방지할 수 있습니다.- 중요한 폰트는 프리로드(preload)하세요. 화면 상단(above the fold)에 사용되는 폰트를 위해
<head>에 preload 링크를 추가하세요. - 항상
crossorigin속성을 사용하세요. 이를 잊으면 브라우저가 폰트를 두 번 다운로드하게 됩니다. - 폰트를 서브셋(subset)화하세요. 사이트에서 영문만 사용한다면 사용하지 않는 글리프(glyph)를 제거하세요. 이를 통해 파일 크기를 70%까지 줄일 수 있습니다.
- 파일을 캐싱하세요. 긴
cache-control헤더를 사용하여 브라우저에 폰트를 유지하세요.
워크플로우는 간단합니다:
WOFF2로 변환하기. swap과 함께 @font-face 사용하기. crossorigin과 함께 메인 폰트 프리로드하기. 파일 캐싱하기.
이 설정을 통해 로딩 속도를 개선하고 크리티컬 패스(critical path)에서 서드 파티를 제거할 수 있습니다.
아직도 운영 환경에서 Google CDN을 사용하시나요? 댓글로 이유를 알려주세요.