07. DNS Prefetch
같은 외부 origin을 불러오지만,
⚠️ http(3000번 포트)로 접속한 상태에서 테스트하세요.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.
<link rel="dns-prefetch">(+ preconnect)를
head에서 최대한 일찍 추가했습니다. 로컬/저지연 환경에서는 효과가 작을 수 있지만,
실제 모바일 네트워크에서는 DNS 조회 시간을 통째로 절약할 수 있습니다.⚠️ http(3000번 포트)로 접속한 상태에서 테스트하세요.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.
⏳ 외부 asset 로드 대기 중... (origin: )
🔧 실제 구현 코드
<link rel="dns-prefetch" href="//assets.<ip>.nip.io" />
<link rel="preconnect" href="//assets.<ip>.nip.io:4001" />두 힌트를 head 파싱 시점에 최대한 일찍 추가했습니다. dns-prefetch는 DNS 조회만
미리 해두고, preconnect는 DNS + TCP 연결까지 미리 맺어둬서, 실제 스크립트 요청
시점에는 연결 설정 비용 없이 바로 데이터 전송을 시작할 수 있습니다.