rel=preconnect 및 rel=dns-prefetch 리소스 힌트와 사용 방법을 알아보세요.
브라우저가 서버에서 리소스를 요청하려면 먼저 연결을 설정해야 합니다. 보안 연결을 설정하려면 다음 세 단계를 수행해야 합니다.
도메인 이름을 조회하고 이를 IP 주소로 확인합니다.
서버에 대한 연결을 설정합니다.
보안을 위해 연결을 암호화합니다.
이러한 각 단계에서 브라우저는 서버에 데이터 조각을 보내고 서버는 응답을 반환합니다. 이러한 여정을 출발지에서 목적지까지 왕복이라고 합니다.
네트워크 상태에 따라 단일 왕복으로 상당한 시간이 걸릴 수 있습니다. 연결 설정 프로세스에는 최대 3회의 왕복이 포함될 수 있으며 최적화되지 않은 경우 더 많은 왕복이 포함될 수 있습니다.
이 모든 것을 미리 처리하면 애플리케이션 속도가 훨씬 빨라집니다. 이 게시물에서는 <link rel=preconnect>와 <link rel=dns-prefetch>라는 두 가지 리소스 힌트로 이 목표를 달성하는 방법을 설명합니다.
rel=preconnect과(와)의 초기 연결 설정
최신 브라우저는 페이지에 필요한 연결을 최대한 예측하려고 하지만 모든 연결을 안정적으로 예측할 수는 없습니다. 다행히 팬들에게 (리소스 😉) 힌트를 줄 수 있다는 것입니다.
<link>에 rel=preconnect를 추가하면 페이지가 다른 도메인에 연결하려고 하며 가능한 한 빨리 프로세스를 시작하고 싶다고 브라우저에 알립니다. 브라우저에서 리소스를 요청할 때는 이미 설정 프로세스가 완료되었기 때문에 리소스가 더 빨리 로드됩니다.
리소스 힌트는 필수 안내가 아니므로 이름을 가져옵니다. 쿠키는 원하는 작업에 대한 정보를 제공하지만 실행 여부를 결정하는 것은 궁극적으로 브라우저에서 결정합니다. 연결을 설정하고 열린 상태로 유지하는 작업은 많은 작업이므로, 브라우저는 상황에 따라 리소스 힌트를 무시하거나 부분적으로 실행할 수 있습니다.
페이지에 <link> 태그를 추가하기만 하면 브라우저에 의도를 알릴 수 있습니다.
<link rel="preconnect" href="https://example.com">
중요한 서드 파티 원본에 대한 조기 연결을 설정하면 로드 시간을 100~500ms 단축할 수 있습니다. 이 수치는 사소해 보일 수 있지만 사용자가 웹페이지 성능을 인식하는 방식에 차이를 만듭니다.
rel=preconnect 사용 사례
가져오는 콘텐츠가 아닌 어디에서인지 파악
버전이 지정된 종속 항목으로 인해 특정 CDN에서 리소스를 요청한다는 것은 알지만 이에 대한 정확한 경로는 모르는 상황에 처하는 경우가 있습니다.
또 다른 일반적인 경우는 이미지 CDN에서 이미지를 로드하는 것입니다. 이미지의 정확한 경로는 사용자 브라우저의 미디어 쿼리 또는 런타임 기능 확인에 따라 달라집니다.
이러한 상황에서 가져올 리소스가 중요하다면 서버에 미리 연결하여 가능한 한 많은 시간을 절약할 수 있습니다. 브라우저는 페이지에서 요청할 때까지 파일을 다운로드하지 않지만 연결 측면을 미리 처리할 수 있으므로 사용자가 여러 번 왕복하는 것을 기다릴 필요가 없습니다.
스트리밍 미디어
연결 단계에서 시간을 절약하고 싶지만 콘텐츠를 즉시 가져오기 시작할 필요는 없는 또 다른 예는 다른 출처에서 미디어를 스트리밍하는 경우입니다.
페이지에서 스트리밍된 콘텐츠를 처리하는 방법에 따라 스크립트가 로드되고 스트림을 처리할 준비가 될 때까지 기다리는 것이 좋습니다. 미리 연결하면 가져오기를 시작할 준비가 되었을 때 한 번의 왕복으로 발생하는 대기 시간을 줄일 수 있습니다.
rel=preconnect 구현 방법
preconnect를 시작하는 한 가지 방법은 <link> 태그를 문서의 <head>에 추가하는 것입니다.
<head>
<link rel="preconnect" href="https://example.com">
</head>
사전 연결은 원본 도메인 이외의 도메인에만 효과적이므로 사이트에 사용하면 안 됩니다.
Link HTTP 헤더를 통해 사전 연결을 시작할 수도 있습니다.
Link: <https://example.com/>; rel=preconnect
글꼴과 같은 일부 리소스 유형은 익명 모드로 로드됩니다. 이러한 경우 preconnect 힌트를 사용하여 crossorigin 속성을 설정해야 합니다.
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
crossorigin 속성을 생략하면 브라우저에서 DNS 조회만 수행합니다.
rel=dns-prefetch로 도메인 이름 조기 확인
사이트는 이름으로 기억하지만 서버는 IP 주소로 기억합니다. 이것이 도메인 이름 시스템 (DNS)이 존재하는 이유입니다. 브라우저는 DNS를 사용하여 사이트 이름을 IP 주소로 변환합니다. 이 프로세스(도메인 이름 확인)가 연결을 설정하는 첫 번째 단계입니다.
페이지가 여러 서드 파티 도메인에 연결되어야 하는 경우 모든 서드 파티 도메인을 미리 연결하면 역효과입니다. preconnect 힌트는 가장 중요한 연결에만 사용하는 것이 가장 좋습니다. 나머지는 <link rel=dns-prefetch>를 사용하여 첫 번째 단계인 DNS 조회에서 시간을 절약하세요. 이 작업은 일반적으로 약 20~120ms가 걸립니다.
DNS 확인은 preconnect와 유사하게 <link> 태그를 문서의 <head>에 추가하여 시작됩니다.
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch에 관한 브라우저 지원은 preconnect 지원과 약간 다르므로 dns-prefetch는 preconnect를 지원하지 않는 브라우저의 대체 옵션으로 기능할 수 있습니다.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">대체 기법을 안전하게 구현하려면 별도의 링크 태그를 사용하세요.
<link rel="preconnect dns-prefetch" href="http://example.com">동일한
<link> 태그에 dns-prefetch 대체를 구현하면 Safari에서 preconnect가 취소되는 버그가 발생합니다.
최대 콘텐츠 페인트 (LCP)에 미치는 영향
dns-prefetch 및 preconnect를 사용하면 사이트에서 다른 출처에 연결하는 데 걸리는 시간을 줄일 수 있습니다. 궁극적인 목표는 다른 출처에서 리소스를 로드하는 데 걸리는 시간을 최대한 최소화하는 것입니다.
최대 콘텐츠 페인트 (LCP)의 경우 리소스를 즉시 검색할 수 있는 것이 좋습니다. LCP 후보는 사용자 경험에서 중요한 부분을 차지하기 때문입니다. LCP 리소스에서 "high"의 fetchpriority 값은 이 애셋의 중요도를 브라우저에 알려 브라우저에서 조기에 가져올 수 있도록 하여 이를 더욱 개선할 수 있습니다.
LCP 애셋을 즉시 검색 가능하게 만들 수 없는 경우에도 preload 링크(fetchpriority 값 "high" 포함)를 사용하면 브라우저에서 최대한 빨리 리소스를 로드할 수 있습니다.
정확한 리소스를 나중에 페이지 로드까지 알 수 없기 때문에 이러한 옵션을 사용할 수 없는 경우 교차 출처 리소스에서 preconnect를 사용하여 리소스의 지연 탐색에 따른 영향을 최대한 줄일 수 있습니다.
또한 preconnect는 대역폭 사용량 측면에서 preload보다 저렴하지만 위험성이 전혀 없습니다. 과도한 preload 힌트가 있는 경우와 마찬가지로 과도한 preconnect 힌트는 TLS 인증서와 관련하여 여전히 대역폭을 소비합니다. 너무 많은 출처에 미리 연결하지 않도록 주의하세요. 대역폭 경합이 발생할 수 있습니다.
결론
이 두 가지 리소스 힌트는 타사 도메인에서 곧 다운로드할 것이지만 리소스의 정확한 URL은 모를 때 페이지 속도를 높이는 데 도움이 됩니다. 이러한 예로는 JavaScript 라이브러리, 이미지 또는 글꼴을 배포하는 CDN이 있습니다. 제약 조건에 유의하세요. 가장 중요한 리소스에만 preconnect를 사용하고, 나머지에는 dns-prefetch를 사용하고, 항상 실제 환경에 미치는 영향을 측정하세요.