모든 사람의 목표는 웹 성능 예산을 줄이는 것이지만, 여전히 타사 서비스를 활용하는 것이 필요합니다. 본 서비스 이용 시, "DNS 조회" 시간은 서비스 수에 따라 예산의 상당 부분을 소비할 수 있습니다. 이러한 부하는 FCP(First Contentful Paint)를 포함하여 페이지 속도의 다양한 측면에 영향을 미칩니다.
이 두 가지 개념의 목적은 타사 연결 시간을 최적화하는 것입니다. 이 두 개념의 차이점을 이해하기 전에 제3자 요청이 있을 때 정확히 어떤 일이 발생하는지 이해해야 합니다.
- 도메인이 확인되어 IP 주소를 얻습니다.
- 서버와 연결이 설정되었습니다.
- 보안을 보장하기 위해 연결이 암호화됩니다.
이 계층 구조는 각 타사 연결에 대해 반복됩니다. 여기서 사전 연결과 DNS 프리페치의 차이점이 드러납니다.
- 사전 연결: 위에서 언급한 세 단계가 모두 사전 구성되어 있는지 확인합니다.
- DNS 프리패치: 첫 번째 단계에서 도메인 이름을 IP 주소로 변환하는 역할만 합니다.
보시다시피, 사전 연결은 더 포괄적이고 유익합니다. 그러나 모든 것에는 비용이 따릅니다. 모든 연결에 사전 연결을 사용하면 페이지 최적화에 부정적인 영향을 미칠 수 있습니다. 그러므로 y중요한 연결에만 사전 연결을 사용해야 하고 다른 모든 타사 연결에는 dns-prefetch를 사용해야 합니다..
사용법 요약
위의 정보를 바탕으로 사용법을 간단히 요약하면 다음과 같습니다.
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">브라우저 호환성
사용법을 논의하는 동안 브라우저 호환성을 언급하는 것도 중요합니다. 밀접하게 관련된 이 두 가지 개념은 최신 브라우저에서 널리 지원되지만 사용법이 완전히 겹치지는 않습니다. 사전 연결은 약 97%의 브라우저에서 지원됩니다.반면 dns-prefetch는 83%의 브라우저에서 지원됩니다(2024년 XNUMX월 기준)..
웹 성능 예산에 대한 기여
- Preconnect는 다음과 같은 전체 속도 향상을 제공할 수 있습니다. 100-500ms.
- DNS-Prefetch는 다음을 통해 각 연결 속도를 높일 수 있습니다. 20-120ms.
더욱 만족스러운 현지 사례를 제공하기 위해 자체 테스트를 진행할 계획입니다.
마지막으로, 이 글을 준비하는 동안 이해에 큰 도움을 준 Ceyhun Enki Aksan의 블로그를 추천하고 공로를 인정하고 싶습니다. Ceyhun Enki Aksan의 블로그.
