Lighthouse 보고서의 'Opportunity'(기회) 섹션에는 모든 주요 요청이 나열됩니다.
아직 <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 프리페치 리소스 힌트를 추가합니다.