Lighthouse 보고서의 '기회' 섹션에는 아직 <link rel=preconnect>로 가져오기 요청에 우선순위를 두지 않는 모든 키 요청이 나열됩니다.
브라우저 호환성
<link rel=preconnect>는 대부분의 브라우저에서 지원됩니다. 브라우저 호환성을 참고하세요.
사전 연결을 사용하여 페이지 로드 속도 개선
preconnect 또는 dns-prefetch 리소스 힌트를 추가하여 중요한 서드 파티 기점에 대한 조기 연결을 수립하는 것이 좋습니다.
<link rel="preconnect">는 브라우저에 페이지가 다른 출처에 연결하려고 하며 이 프로세스를 최대한 빨리 시작하고 싶다고 알립니다.
느린 네트워크에서는 연결을 하려면 시간이 많이 걸리는 경우가 많습니다. 특히 보안 연결의 경우에는 DNS 룩업, 리디렉션, 사용자의 요청을 처리하는 최종 서버로의 여러 차례 왕복이 관여할 수 있으므로 더욱 그러합니다.
이 모든 것을 미리 처리하면 대역폭 사용에 부정적인 영향 없이 사용자에게 애플리케이션이 빠르다는 인상을 줄 수 있습니다. 연결 설정 시간 대부분은 데이터 교환이 아닌 기다리는 데 사용됩니다.
브라우저에게 여러분의 의도를 알리는 것은 페이지에 링크 태그를 추가하는 것만큼이나 간단합니다.
<link rel="preconnect" href="https://example.com">
이렇게 하면 브라우저에 페이지가 example.com에 연결하여 콘텐츠를 가져오려 한다는 것을 알릴 수 있습니다.
<link rel="preconnect">에는 꽤 적은 비용이 들긴 하지만 여전히 상당한 CPU 시간을 차지할 수 있으며, 특히 보안 연결의 경우 더욱 그렇다는 점에 유의해야 합니다.
연결이 10초 이내에 사용되지 않으면 브라우저가 연결을 닫아 이전의 모든 연결 작업이 낭비되므로 특히 좋지 않습니다.
일반적으로 <link rel="preload">를 사용하세요. <link rel="preload">는 더 포괄적인 성능 조정 도구입니다. 하지만 다음과 같은 특수한 경우에는 <link rel="preconnect">를 도구 모음에 보관하세요.
<link rel="dns-prefetch">는 연결과 관련된 또 다른 <link> 유형입니다.
이 방법은 DNS 조회만 처리하지만 더 광범위한 브라우저 지원을 제공하므로 좋은 대안이 될 수 있습니다.
똑같은 방식으로 사용합니다.
<link rel="dns-prefetch" href="https://example.com" />.
스택별 안내
Drupal
사용자 에이전트 리소스 힌트 기능을 제공하는 모듈을 설치하고 구성하여 Preconnect 또는 dns-prefetch 리소스 힌트를 추가할 수 있습니다.
Magento
테마의 레이아웃을 수정하고 사전 연결 또는 DNS 미리 가져오기 리소스 힌트를 추가합니다.