г. Москва, ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29
info@maximusmedia.pro
г. Москва, ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29

Preconnect: что это

Preconnect — это механизм в веб-разработке, позволяющий браузеру заранее установить сетевое соединение с внешним ресурсом (например, другим доменом), чтобы ускорить загрузку сайта.

553
Время чтения: 1 минута
Дата публикации

Зачем нужен Preconnect?

Когда браузер загружает страницу, он может столкнуться с необходимостью получать ресурсы с других доменов — шрифты, скрипты, изображения и т. д. Если не использовать Preconnect, браузер начнёт установку соединения только в момент обращения к ресурсу.

Preconnect позволяет:

  • заранее выполнить DNS-резолвинг (определение IP-адреса по домену);
  • установить TCP-соединение;
  • провести TLS-рукопожатие (для HTTPS).

Таким образом, к моменту, когда браузер реально запрашивает ресурс, соединение уже установлено.

 

Как работает Preconnect?

  1. На этапе загрузки HTML-документа браузер видит <link rel=»preconnect»>.
  2. Устанавливается соединение с указанным внешним сервером.
  3. Браузер быстрее получает необходимые ресурсы при их непосредственном вызове.

Пример использования



<em><link rel="preconnect" href="https://fonts.googleapis.com"></em>

<em><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></em>

Этот код позволяет ускорить загрузку Google Fonts, так как соединение с серверами Google устанавливается заранее.

Преимущества использования Preconnect

Ускорение времени загрузки страницы

Снижение задержек при загрузке внешних ресурсов

Улучшение показателей Core Web Vitals (особенно LCP)

Важно учитывать

  • Используйте Preconnect только для действительно важных внешних ресурсов, так как каждое соединение потребляет ресурсы браузера и устройства.
  • Если к ресурсу не будет обращения, предварительное соединение будет лишним
  • Для ресурсов с кросс-доменной авторизацией добавляйте атрибут crossorigin.

Когда использовать Preconnect?

Используйте Preconnect, если:

  • сайт подгружает внешние шрифты (например, Google Fonts);
  • скрипты или стили загружаются с CDN;
  • используются сторонние аналитики, чаты или баннеры.

Отличие от других техник

Техника Что делает Когда использовать
Preconnect Устанавливает соединение Для важных внешних ресурсов
Dns-prefetch Только DNS-резолвинг Для менее критичных ресурсов
Preload Заранее загружает конкретный файл Для важных файлов (скрипт, стиль)
Prefetch Загружает ресурс «на будущее» Для ресурсов, нужных на следующей странице
Статьи по теме
Без категории
Zero-click searches: как подготовить контент для попадания в сниппеты и блок “Ответы”
24 июня 2025
Zero-click searches: как подготовить контент для попадания в сниппеты и блок “Ответы”
SEO ликбез
Индексация SPA-сайта: руководство
28 июня 2024
Индексация SPA-сайта: руководство
Маркетинг
Как завоевать доверие клиентов на сайте
7 июля 2023
Как завоевать доверие клиентов на сайте
Дмитрий Ларионов
Основатель маркетингового агентства полного цикла Maximus Media

Напишем или позвоним Вам первыми в течение 10 минут

    Другие термины
    Сегменты аудитории (для авито)

    Сегменты аудитории — это группы пользователей, объединённые по определённым признакам: поведению, интересам, географии, демографии и другим характеристикам. Сегментирование помогает рекламодателям более точно нацеливать свои объявления, предлагая релевантный контент нужной аудитории.

    562
    Время чтения 1 минута
    Естественные ссылки

    Естественные ссылки — это такие гиперссылки на сайт, которые появляются органически, то есть без прямого участия владельца продвигаемого ресурса. Это результат того, что другие люди (например, владельцы сайтов, блогеры, журналисты, пользователи форумов) сами считают контент полезным, интересным или достойным упоминания, и поэтому добровольно размещают ссылку на него.

    534
    Время чтения 1 минута
    Cookie

    Cookie (от англ. “печенье”) в веб-разработке — это небольшой фрагмент данных, который веб-сайт сохраняет в браузере пользователя и отправляет обратно при последующих запросах к тому же сайту. Первоначально термин «cookie» восходит к понятию «magic cookie» в UNIX-системах — статической метке, передающейся между программами без изменения. В контексте HTTP-протокола cookie позволяют хранить состояние между запросами, поскольку сам протокол HTTP по умолчанию «безсессионный» (stateless).

    623
    Время чтения 1 минута
    Текстовые факторы ранжирования

    Текстовые факторы ранжирования — это совокупность параметров, связанных непосредственно с содержимым страницы, которые поисковые системы анализируют при оценке релевантности и качества документа. Проще говоря, это всё то, что касается текста на странице и влияет на её позицию в выдаче. Ниже — детальное разбор основных компонентов.

    631
    Время чтения 1 минута
    Mind map

    Mind map (интеллект-карта, карта мышления) — это визуальный способ структурирования информации, при котором центральная идея размещается в центре, а связанные с ней понятия, мысли или данные расходятся от нее радиально в виде ветвей. Такой подход позволяет наглядно организовать знания, упростить запоминание и стимулировать творческое мышление.

    619
    Время чтения 1 минута
    Отказы

    Отказы (Bounce) и отказная сессия (Bounce Session) в веб-аналитике — это метрика, отражающая долю посещений, в ходе которых пользователь ушёл с сайта, не совершив ни одного взаимодействия, зафиксированного системой аналитики. Ниже подробно разберём, что это значит, как считается и зачем нужно учитывать.

    667
    Время чтения 1 минута
    ×
    Екатерина Ефремова
    Екатерина Ефремова Здравствуйте! Готова помочь вам. Напишите мне, если у вас появятся вопросы.
    +7 (123) 456-78-90 info@maximusmedia.pro Отдел работы с клиентами
    ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29, Москва, Московская область, 115054, Россия