rel="preconnect" значение атрибута
Базовый уровень Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с января 2020 года.
Ключевое слово preconnect для атрибута rel элемента <link> служит подсказкой для браузеров о том, что пользователю, вероятно, понадобятся ресурсы с источника целевого ресурса. Поэтому браузер может улучшить взаимодействие с пользователем, заранее установив соединение с этим источником. Предварительное соединение ускоряет последующую загрузку ресурсов с указанного источника за счёт предварительного выполнения части или всего процесса установки соединения (DNS+TCP для HTTP и DNS+TCP+TLS для источников HTTPS).
<link rel="preconnect"> принесёт пользу любым будущим HTTP-запросам к другому источнику, переходам или подресурсам. Для запросов к тому же источнику оно бесполезно, поскольку соединение уже открыто.
Если странице нужно устанавливать соединения со многими сторонними доменами, предварительное соединение со всеми ними может оказаться контрпродуктивным. Подсказку <link rel="preconnect"> лучше использовать только для самых важных соединений. Для остальных используйте <link rel="dns-prefetch">, чтобы сэкономить время на первом этапе — поиске DNS.
Примеры
<link rel="preconnect" href="https://example.com" />
Предварительное соединение также можно реализовать с помощью HTTP-заголовка Link, например:
Link: <https://example.com>; rel="preconnect"
Спецификации
| Спецификация |
|---|
| HTML> # link-type-preconnect> |
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
preconnect |
46 | 79 | 39До Firefox 41 он не учитывает атрибутcrossorigin. |
33 | 11.1 | 46 | 39До Firefox для Android 41 он не учитывает атрибутcrossorigin. |
33 | 11.3 | 4.0 | 46 | 11.3 |
См. также
-
Спекулятивная загрузка — сравнение
<link rel="preconnect">с другими похожими функциями повышения производительности.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect
