리소스 힌트 생성기
preload·preconnect·dns-prefetch 링크 태그를 생성합니다.
리소스 힌트(resource hints)는 브라우저에게 “이 리소스를 미리 준비해 두라”고 알려주는 <link> 태그입니다. preconnect로 연결을 미리 맺고, preload로 핵심 파일을 일찍 받아오면 LCP·FCP 같은 핵심 성능 지표를 의미 있게 끌어올릴 수 있습니다. 이 생성기는 타입과 URL만 입력하면 바로 붙여넣을 수 있는 힌트 태그 묶음을 만들어 줍니다.
행을 추가해 여러 힌트를 한 번에 만들고, preload는 as 값과 폰트·교차출처 요청에 필요한 crossorigin 속성까지 자동으로 챙겨 줍니다. 결과는 <head>에 그대로 넣을 수 있는 정적 마크업이라 어떤 프레임워크에서도 동일하게 동작합니다.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
리소스 힌트 5종 한눈에 보기
각 힌트는 “얼마나 적극적으로” 미리 작업하는지가 다릅니다. 보수적인 것부터 공격적인 순서로 정리하면 다음과 같습니다.
- dns-prefetch: 도메인의 DNS 조회만 미리 해 둡니다. 비용이 거의 없어 여러 외부 도메인에 넓게 깔아도 안전합니다.
- preconnect: DNS + TCP + TLS 핸드셰이크까지 미리 끝냅니다. 곧 확실히 쓸 출처(폰트 CDN, API 서버 등)에만 2~4개 이내로 제한해 사용하세요.
- preload: 현재 페이지에서 반드시 쓰는 특정 파일(LCP 이미지, 핵심 폰트, 위급한 스크립트)을 높은 우선순위로 즉시 받아옵니다.
as지정이 필수입니다. - modulepreload: ES 모듈과 그 의존성 그래프를 미리 받아 파싱까지 준비합니다. 모듈 번들에서
preload as="script"보다 정확합니다. - prefetch: 다음 내비게이션에서 쓸 리소스를 한가할 때 낮은 우선순위로 받아 둡니다. 현재 페이지 속도에는 영향이 없습니다.
preconnect vs dns-prefetch — 무엇을 쓸까
둘 다 “미래의 요청을 빠르게” 만들지만 비용이 다릅니다. dns-prefetch는 이름 해석만 하므로 공짜에 가깝고, preconnect는 소켓과 TLS 세션을 실제로 열어 두므로 자원을 점유합니다. 곧 쓸 것이 확실한 한두 개 출처에는 preconnect를, 쓸지 불확실하거나 수가 많은 출처에는 dns-prefetch를 권장합니다. 호환성을 위해 같은 출처에 둘을 함께 거는 패턴도 흔합니다.
과다 preload 주의
preload는 강력하지만 남용하면 역효과가 납니다. 모든 것을 미리 받으면 정작 중요한 리소스의 대역폭을 빼앗아 LCP가 오히려 느려집니다. 다음을 지키세요.
- 한 페이지당 정말 중요한 몇 개(LCP 이미지·핵심 폰트·블로킹 스크립트)만 preload 합니다.
- 실제로 쓰이지 않으면 콘솔에 “preloaded but not used” 경고가 뜹니다 — 이런 항목은 제거하세요.
- 폰트와 교차출처
fetch는crossorigin이 없으면 캐시 키가 어긋나 두 번 받게 되니 반드시 체크합니다.
어떤 리소스를 우선 받게 할지 정하려면 먼저 페이지가 참조하는 스크립트·스타일·이미지 수를 파악하는 것이 좋습니다. 페이지 용량 분석으로 참조 구조를 확인하세요.