필수 원본에 사전 연결

Lighthouse 보고서의 'Opportunity'(기회) 섹션에는 모든 주요 요청이 나열됩니다. 아직 <link rel=preconnect>로 가져오기 요청의 우선순위를 지정하지 않은 경우:

필수 출처 감사에 대한 Lighthouse 사전 연결의 스크린샷

브라우저 호환성

<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 프리페치 리소스 힌트를 추가합니다.

리소스