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