Вёрстка: Предварительное соединение с доменом с помощью preconnect

Этот атрибут используется для установки предварительного соединения с определённым доменом. Предварительное соединение может ускорить загрузку ресурсов с определенного домена. Если вы знаете, что вашему сайту потребуется соединение с определенным доменом, вы можете предварительно установить это соединение, чтобы уменьшить задержку соединения и загрузки.

# Предварительное соединение с доменом, откуда загружаются изображения
<link rel="preconnect" href="https://images.example.com">

# Предварительное соединение с доменом, откуда загружаются стили
<link rel="preconnect" href="https://styles.example.com">

# Предварительное соединение с доменом, откуда загружаются скрипты
<link rel="preconnect" href="https://scripts.example.com">

dns-prefetch сообщает браузеру, что следует предварительно выполнить разрешение DNS для домена. Это означает, что браузер будет искать IP-адрес домена заранее, еще до того, как будет произведен запрос на этот домен. Это может уменьшить задержку, когда впервые происходит соединение с этим доменом.

preconnect идёт на шаг дальше. Он не только выполняет предварительное разрешение DNS, но и предварительно открывает TCP-соединение и выполняет TLS-рукопожатие (если это HTTPS-соединение). Это может уменьшить задержку еще больше, так как браузеру не нужно будет ожидать установки соединения, когда он впервые делает запрос к этому домену.

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