Preconnect 및 DNS-Prefetch 리소스 힌트 사용을 설명하십시오.

Preconnect 및 DNS-Prefetch 리소스 힌트 사용을 설명하십시오.

Preconnect 및 DNS-Prefetch는 웹 개발자가 웹 사이트의로드 속도를 최적화하는 데 사용하는 두 가지 유형의 리소스 힌트입니다. 이 힌트는 외부 리소스에 대한 연결을 처리하는 방법에 대한 브라우저에 지침을 제공하여 대기 시간을 줄이고 사용자 경험을 향상시킵니다.

• PRECONNECT : preconnect 힌트는 브라우저에 가능한 빨리 특정 원점에 대한 연결을 시작하도록 지시합니다. 여기에는 DNS 해결, TCP 핸드 셰이크 및 선택적으로 TLS 협상이 포함됩니다. 이러한 단계를 미리 시작함으로써, 해당 원점의 리소스에 대한 실제 요청은 시간이되면 훨씬 빨리 만들어 질 수 있습니다. Preconnect는 타사 API 또는 CDN에 연결하는 등 곧 중요하고 필요한 것으로 알려진 리소스에 특히 유용합니다.
• DNS-Prefetch : dns-prefetch 힌트는 브라우저에 지정된 도메인에 대한 DNS 해상도를 미리 수행하도록 지시합니다. DNS 해상도는 도메인 이름을 IP 주소로 변환하는 프로세스로 시간이 걸릴 수 있습니다. DNS를 일찍 해결함으로써 IP 주소가 이미 알려져 있기 때문에 해당 도메인에서 자원을 가져 오는 데 걸리는 시간이 줄어 듭니다.

두 힌트는 HTML <link> 태그를 사용하여 구현되며 rel 속성은 각각 "preconnect"또는 "dns-prefetch"로 설정되고 href 속성은 대상 도메인으로 설정됩니다.

Preconnect 및 DNS-Prefetch를 사용하면 성능 이점은 무엇입니까?

Preconnect 및 DNS-Prefetch 리소스 힌트 사용은 몇 가지 성능 이점을 제공합니다.

• 대기 시간 감소 : DNS 해상도, TCP 핸드 셰이크 및 TLS 협상을 PreConnect로 일찍 시작하거나 DNS-Prefetch를 사용한 DNS 해상도를 초기에 시작하여 연결 및 페치 리소스를 설정하는 데 걸리는 시간이 크게 줄어 듭니다. 이는 특히 많은 외부 리소스가있는 사이트의 경우 페이지로드 시간이 빠를 수 있습니다.
• 향상된 사용자 경험 : 로드 시간이 빨라지면 사용자가 대기 시간이 줄어들어 이탈률이 낮아지고 참여가 높아질 수 있습니다. 컨텐츠의 원활한로드는 사용자의 관심과 만족을 유지하는 데 중요합니다.
• 효율적인 리소스로드 : PreConnect는 리소스가 요청 될 때 연결이 이미 설정되도록하여 중요한 리소스를보다 빠르게로드하는 데 도움이됩니다. DNS-Prefetch는 브라우저가 추가 리소스를 가져올 위치를 알고있어 초기 대기 시간을 줄입니다.
• 더 나은 모바일 성능 : 모바일 장치는 종종 네트워크 연결이 느리기 때문에 대기 시간이 더 높습니다. Preconnect 및 DNS-Prefetch는 연결 프로세스를 일찍 시작하여 모바일 장치의 성능에 눈에 띄는 차이를 만들어이를 완화하는 데 도움이 될 수 있습니다.

Preconnect 및 DNS-Prefetch는 기능이 어떻게 다릅니 까?

Preconnect 및 DNS-Prefetch는 모두 외부 리소스의로드를 최적화하는 것을 목표로하지만 범위와 기능이 다릅니다.

• 운영 범위 :

  • PRECONNECT : TCP 핸드 셰이크 시작을 포함하여 DNS 해상도를 넘어서서 리소스가 HTTPS 인 경우 TLS 협상을 포함합니다. 이 힌트는 자원이 필요하다는 것을 알고 연결을 준비하고 싶을 때 사용됩니다.
  • DNS-Prefetch : DNS 해상도 만 수행합니다. 리소스가 필요한 도메인을 암시하는 데 유용하지만 언제 또는 언제 요청 될지 확실하지 않습니다. 이것은 preconnect보다 공격적이지 않으며 네트워크 오버 헤드가 덜 필요합니다.

• 사용 시나리오 :

  • Preconnect : CDN의 이미지 또는 타사 서비스의 스크립트와 같이 확실히 필요한 중요한 리소스에 이상적입니다.
  • DNS-Prefetch : 페이지로드 프로세스 후반에 필요할 수있는 도메인에 가장 잘 사용됩니다. 예를 들어 외부 페이지에 대한 링크 또는 사용자 상호 작용에로드 될 수있는 리소스.

• 네트워크 오버 헤드 :

  • PRECONNECT : 연결 프로세스에서 더 많은 단계를 거치기 때문에 네트워크 오버 헤드가 더 높습니다. 불필요한 연결을 피하기 위해 신중하게 사용해야합니다.
  • DNS-Prefetch : DNS 만 해결하므로 네트워크 오버 헤드가 낮습니다. 필요한 도메인에는 더 자유롭게 사용할 수 있습니다.

Preconnect 및 DNS-Prefetch를 사용하여 웹 사이트로드 시간을 최적화 할 수 있습니까?

예, Preconnect 및 DNS-Prefetch는 함께 사용하여 웹 사이트로드 시간을 더욱 최적화 할 수 있습니다. 함께 사용하여 각 접근 방식의 강점을 활용합니다.

• 전략적 사용 : 곧 필요한 중요한 리소스에 PreConnect를 사용하고 덜 중요한 또는 조건부 자원의 경우 DNS-Prefetch를 사용하십시오. 예를 들어, 2 차 또는 폴백 도메인에 dns-prefetch를 사용하면서 기본 CDN에 전달할 수 있습니다.
• 계층화 된 최적화 : 필요를 예상 할 수있는 도메인의 DNS-Prefetch부터 시작한 다음 실제로 자원이 필요할 때 PreConnect를 사용하십시오. 이 계층화 된 접근 방식은 DNS 해상도로 일찍 시작한 다음보다 철저한 연결 준비를 통해 시간을 절약 할 수 있습니다.
• 균형 자원 사용 : PreConnect는 리소스로드 속도를 크게 높일 수 있지만 DNS-Prefetch보다 더 많은 오버 헤드가 제공됩니다. 적절한 경우 DNS-Prefetch를 사용하면 리소스 사용량의 균형을 유지하면서 성능 이점을 얻을 수 있습니다.

• 예제 구현 : HTML에서 둘 다 구현할 수있는 방법은 다음과 같습니다.

   <code class="html"> <!-- Preconnect for critical resources --> <link rel="preconnect" href="https://cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <!-- DNS-Prefetch for potential resources --> <link rel="dns-prefetch" href="https://secondarycdn.example.com"> <link rel="dns-prefetch" href="https://fallbackapi.example.com"> </code>

Preconnect와 DNS-Prefetch를 결합함으로써 개발자는 특정 및 잠재적 리소스 요구를 모두 설명하는보다 효율적인로드 전략을 만들어 궁극적으로 웹 사이트의 성능 및 사용자 경험을 향상시킬 수 있습니다.

위 내용은 Preconnect 및 DNS-Prefetch 리소스 힌트 사용을 설명하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!