Preconnect

Preconnect — атрибут тега <link rel="preconnect" href="...">, который говорит браузеру: «в скором времени понадобится этот домен — начинай DNS-запрос, TLS-рукопожатие и TCP-соединение прямо сейчас». К моменту реальной загрузки ресурс уже идёт по готовому каналу.

Полезен для шрифтов от Google Fonts, аналитики, CDN с изображениями. Каждый preconnect — отдельное соединение, злоупотреблять не стоит: 3–4 ключевых домена достаточно.

<!-- TCP+TLS handshake к домену заранее -->
<link rel="preconnect"
      href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect"
      href="https://mc.yandex.ru">

Ключевая тонкость: для шрифтов и любых cross-origin ресурсов с CORS preconnect почти бесполезен без атрибута crossorigin. Браузер открывает два разных соединения — анонимное и с учётными данными, — и если предсоединение было анонимным, а шрифт качается с CORS, прогретый канал просто не используется. Поэтому строка для fonts.gstatic.com всегда идёт с crossorigin, а для домена картинок без CORS — без него. Ошибку видно в DevTools → Network по колонке Connection ID: если у шрифта новый ID, preconnect не сработал.

Не путайте preconnect с preload: первый готовит соединение (DNS + TCP + TLS), но не качает файл, второй скачивает конкретный ресурс с высоким приоритетом. Их часто комбинируют для критичного шрифта. Злоупотребление вредит: каждое лишнее предсоединение держит сокет и конкурирует за пропускную способность, поэтому ограничьтесь 3–4 доменами, которые реально нужны в первые секунды (шрифты, CDN картинок первого экрана, аналитика). Эффект заметнее на мобильном 4G, где TLS-рукопожатие к новому хосту стоит 100–300 мс.