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

Preconnect: что это

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

437
Время чтения: 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 минут

    Другие термины
    Безанкорная ссылка

    Безанкорная ссылка — это гиперссылка, в которой отсутствует текстовый якорь (анкор). Вместо текста пользователю показывается URL-адрес или ссылка вставлена в элементы интерфейса, такие как кнопки, изображения или иконки.

    931
    Время чтения 1 минута
    Таргетинг по интересам (для авито)

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

    447
    Время чтения 1 минута
    Description

    Description в SEO — это краткое текстовое описание содержимого веб-страницы, предназначенное в первую очередь для поисковых систем и пользователей. Оно размещается в специальном HTML-теге <meta name=»description»> внутри кода страницы и, как правило, отображается под заголовком страницы (title) в результатах поисковой выдачи (например, в Google или Яндексе).

    425
    Время чтения 1 минута
    Частота запроса

    В контексте SEO и поисковых систем частота запроса обозначает количество раз, когда пользователи ищут определённое слово или фразу в поисковой системе за определённый период времени (например, за месяц или год).

    841
    Время чтения 1 минута
    SERM

    SERM (Search Engine Reputation Management) — это управление репутацией в поисковых системах. Если говорить о том, что такое SERM простыми словами, то это практика контроля и влияния на то, какую информацию видят пользователи о вашем бренде, продукте или персоне в результатах поиска по ключевым запросам (название компании, имена руководителей, брендированные запросы).

    394
    Время чтения 1 минута
    Семантическое ядро

    Набор ключевых слов и фраз, которые отражают тематику и содержание сайта. Оно служит основой для SEO-оптимизации и помогает привлекать целевую аудиторию.

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