구글 폰트나 CDN에서 파일을 불러오는 홈페이지라면 preconnect 한 줄로 첫 화면 표시를 앞당길 수 있습니다.
다른 도메인의 파일은 받기 전에 주소 찾기와 보안 연결부터 거쳐야 하는데, 이 준비를 미리 시작해 두라고 브라우저에 알려 주는 방법입니다.

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">

3. 효과는 직접 확인하고 남기세요

크롬 개발자 도구의 Network 탭에서 폰트 파일을 클릭하고 Timing을 보면 연결 준비에 걸린 시간이 나옵니다. 적용 후 이 구간이 거의 사라졌다면 제대로 걸린 것입니다. 반대로 해당 도메인 파일을 더 이상 쓰지 않는데 preconnect만 남아 있는 경우가 리뉴얼 현장에서 꽤 많으니, 외부 서비스를 정리할 때 head의 이 줄들도 같이 지워 주세요.