Lighthouse 보고서의 기회 섹션에는 아직 <link rel=preconnect>로 가져오기 요청의 우선순위를 지정하지 않는 모든 주요 요청이 나열됩니다.
브라우저 호환성
<link rel=preconnect>는 대부분의 브라우저에서 지원됩니다. 브라우저 호환성을 참고하세요.
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 프리페치 리소스 힌트를 추가합니다.