preload, prefetch, preconnect 같은 리소스 힌트란 무엇인가요?

각각이 하는 일

• preload — "이것이 현재 페이지에 필요하니 지금 높은 우선순위로 가져와라." 파서가 늦게 발견하는 핵심 리소스(폰트, 히어로 이미지, CSS가 참조하는 자산)에 사용합니다. 브라우저가 올바른 우선순위/헤더를 설정하도록 as가 필요합니다.

• preconnect — "곧 이 origin에 연결할 테니 DNS 조회 + TCP + TLS 핸드셰이크를 지금 해라." 서드파티(API, 폰트 호스트, CDN)로의 첫 요청 전 왕복을 절약합니다. 몇 개의 핵심 origin에 사용하십시오.

• dns-prefetch — preconnect의 가벼운 버전으로, DNS 해석만 합니다. 좋은 대체 수단이거나 많은 origin에 적합합니다.

• prefetch — "다음 내비게이션에 아마 필요할 테니, 한가할 때 낮은 우선순위로 가져와라." 다음에 올 가능성이 큰 페이지/자산용입니다. 현재 페이지가 아니라 미래를 위해 캐시됩니다.

흔한 실제 예: 폰트

폰트는 늦게 발견되므로(브라우저가 먼저 CSS를 파싱해야 함), 미리 로드하면 보이지 않는 텍스트 지연을 피할 수 있습니다.

주의: 힌트를 남발하지 마라

모든 것을 preload하면 목적이 무색해집니다. 정말로 핵심적인 리소스와 대역폭을 두고 경쟁합니다. 가장 중요한 몇 개만 힌트하십시오.

왜 중요한가

리소스 힌트는 critical path에서 지연을 깎아냅니다. preconnect는 서드파티에 대한 핸드셰이크 지연을 제거하고, preload는 늦게 발견되는 핵심 자산(폰트, LCP 이미지)에 우선순위를 부여하며, prefetch는 다음 내비게이션을 즉각적으로 느껴지게 합니다.

외과적으로 사용하면 Core Web Vitals를 의미 있게 개선합니다.