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="preconnect">를 유지하세요.
<link rel="dns-prefetch">는 연결과 관련된 또 다른 <link> 유형입니다.
이는 DNS 조회만 처리하지만
더 광범위한 브라우저 지원을 제공하므로 훌륭한 대체 방안으로 기능할 수 있습니다.
똑같은 방식으로 사용합니다.
<link rel="dns-prefetch" href="https://example.com" />.
스택별 안내
Drupal
사전 연결 또는 DNS 미리 가져오기 리소스 힌트를 설치하고 구성할 수 있도록 사용자 에이전트 리소스 힌트를 지원하는 모듈을 사용합니다.
Magento
테마의 레이아웃을 수정하고 사전 연결 또는 DNS 미리 가져오기 리소스 힌트를 추가합니다.