Хотя цель каждого состоит в том, чтобы сократить бюджет веб-производительности, все равно необходимо использовать сторонние сервисы. При использовании этих услуг "Просмотр DNS" раз может потреблять значительную часть бюджета, в зависимости от количества сервисов. Эти нагрузки влияют на различные аспекты скорости страницы, включая First Contentful Paint (FCP).

Целью этих двух концепций является оптимизация времени подключения сторонних поставщиков. Прежде чем разобраться в различиях между этими двумя понятиями, необходимо понять, что именно происходит при совершении стороннего запроса:

  1. Домен разрешен для получения IP-адреса.
  2. Соединение с сервером установлено.
  3. Соединение шифруется для обеспечения безопасности.

Эта иерархия повторяется для каждого стороннего соединения. Именно здесь вступает в игру разница между preconnect и dns-prefetch.

  • Предварительное подключение: Гарантирует, что все три шага, упомянутые выше, предварительно настроены.
  • Предварительная выборка DNS: Служит только для преобразования доменного имени в IP-адрес на первом этапе.

Как видите, preconnect является более комплексным и полезным. Однако за все приходится платить. Использование предварительного подключения для всех ваших подключений может негативно повлиять на оптимизацию вашей страницы. Следовательно, увам следует использовать preconnect только для критических подключений и использовать dns-prefetch для всех остальных сторонних подключений..

изображения 14.png
Источник: https://web.dev/preconnect-and-dns-prefetch/

Краткое описание использования

Учитывая приведенную выше информацию, вот краткое описание их использования:

<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">

Совместимость браузера

Обсуждая их использование, также важно упомянуть совместимость браузеров. Эти две тесно связанные концепции широко поддерживаются современными браузерами, но их использование не совпадает полностью. Preconnect поддерживается примерно 97% браузеров., В то время DNS-prefetch поддерживается 83% браузеров (по состоянию на июнь 2024 г.).

Вклад в бюджет веб-производительности

  • Preconnect может обеспечить общее улучшение скорости 100-500ms.
  • DNS-Prefetch может ускорить каждое соединение за счет 20-120ms.

Мы планируем провести собственные тесты, чтобы предоставить более удовлетворительные местные примеры.

Наконец, я хотел бы порекомендовать и отметить блог Джейхуна Энки Аксана, который во многом способствовал моему пониманию при подготовке этой статьи: Блог Джейхуна Энки Аксана.