외부 폰트가 늦게 뜰 때, preconnect와 dns-prefetch로 연결 시간 줄이는 법
구글 폰트나 CDN에서 파일을 불러오는 홈페이지라면 preconnect 한 줄로 첫 화면 표시를 앞당길 수 있습니다.
다른 도메인의 파일은 받기 전에 주소 찾기와 보안 연결부터 거쳐야 하는데, 이 준비를 미리 시작해 두라고 브라우저에 알려 주는 방법입니다.
💡 파일 용량은 작은데 왜 늦게 받아질까요?
새 도메인에 처음 접속할 때 브라우저는 DNS 조회, 서버 연결, HTTPS 암호화 협상을 차례로 끝내야 파일을 요청할 수 있습니다. 모바일 데이터 환경에서는 이 과정만으로 수백 ms가 걸리기도 합니다. 게다가 웹폰트는 CSS를 받고 해석한 뒤에야 요청이 시작되니, 연결 준비까지 그 뒤로 밀리면 글자가 늦게 뜨는 시간이 그만큼 길어집니다.
1. 꼭 필요한 도메인에 preconnect
head 안, CSS를 불러오는 줄보다 위에 넣습니다. 구글 폰트는 CSS(fonts.googleapis.com)와 실제 폰트 파일(fonts.gstatic.com)이 다른 도메인이라 둘 다 적어야 합니다.
<!-- 폰트 CSS가 있는 도메인 -->
<link rel="preconnect"
href="https://fonts.googleapis.com">
<!-- 폰트 파일 도메인: crossorigin 필수 -->
<link rel="preconnect"
href="https://fonts.gstatic.com" crossorigin>
여기서 자주 틀리는 부분이 crossorigin입니다. 폰트 파일은 브라우저가 CORS 방식으로 요청하기 때문에, 이 속성 없이 미리 열어 둔 연결은 폰트를 받을 때 쓰이지 않고 연결을 한 번 더 맺게 됩니다. 반대로 일반 CSS나 이미지 도메인에는 붙이지 않습니다. jsDelivr로 Pretendard를 불러오는 경우처럼 한 도메인에서 CSS와 폰트를 모두 받는다면, crossorigin 있는 줄과 없는 줄을 둘 다 넣어 두면 됩니다.
2. 나머지는 dns-prefetch로 가볍게
preconnect는 실제로 연결을 열어 두기 때문에 비용이 있습니다. 열어 놓고 몇 초 안에 쓰지 않으면 브라우저가 연결을 닫아 버려 헛수고가 되고, 너무 많이 걸면 정작 중요한 요청과 자원을 나눠 쓰게 됩니다. 그래서 첫 화면에 바로 쓰는 두세 곳만 preconnect를 쓰고, 분석 도구나 채팅 위젯처럼 조금 뒤에 쓰는 도메인은 주소 조회만 미리 해 두는 dns-prefetch로 충분합니다.
<!-- 페이지가 뜬 뒤에 불러오는 외부 스크립트 -->
<link rel="dns-prefetch"
href="https://www.googletagmanager.com">| 구분 | 미리 하는 일 | 어디에 쓰나 |
|---|---|---|
| preconnect | DNS 조회, 서버 연결, 암호화 협상 | 폰트, 첫 화면 이미지 CDN |
| dns-prefetch | DNS 조회만 | 분석, 광고, 채팅 위젯 |
3. 효과는 직접 확인하고 남기세요
크롬 개발자 도구의 Network 탭에서 폰트 파일을 클릭하고 Timing을 보면 연결 준비에 걸린 시간이 나옵니다. 적용 후 이 구간이 거의 사라졌다면 제대로 걸린 것입니다. 반대로 해당 도메인 파일을 더 이상 쓰지 않는데 preconnect만 남아 있는 경우가 리뉴얼 현장에서 꽤 많으니, 외부 서비스를 정리할 때 head의 이 줄들도 같이 지워 주세요.
"파일을 줄이는 것만큼, 기다리는 순서를 줄이는 것도 속도입니다."
나눔웹은 홈페이지 속도 점검 때 외부 도메인 연결까지 하나씩 살펴
실제 방문자가 느끼는 첫 화면 시간을 줄여 드립니다.
