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

Preconnect: что это

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

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

    Другие термины
    Htaccess

    Файл .htaccess (Hypertext Access) — это конфигурационный файл, используемый на веб-серверах Apache. Он позволяет управлять поведением сервера и задавать правила, которые влияют на работу сайта без доступа к основному конфигурационному файлу сервера.

    142
    Время чтения 1 минута
    CPA

    CPA (Cost Per Action) — это модель интернет-рекламы, при которой рекламодатель оплачивает действие пользователя, выполненное на сайте или в приложении, например, покупку, регистрацию, подписку на рассылку, скачивание приложения или клик по кнопке.

    518
    Время чтения 1 минута
    Геотаргетинг

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

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

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

    114
    Время чтения 1 минута
    Авито Реклама

    Авито Реклама — это комплекс рекламных инструментов внутри платформы: поднятия, ТОП, премиум, таргетированная реклама и продвижение через рекомендательные блоки. Цель — увеличить охват и количество заявок. Без рекламы объявления быстро «уходят вниз», и видит их ограниченный круг пользователей.

    57
    Время чтения 1 минута
    AMP

    AMP-страницы (от англ. Accelerated Mobile Pages) — это облегчённые версии веб-страниц, созданные специально для быстрой загрузки на мобильных устройствах. Они разрабатываются с целью улучшения пользовательского опыта при просмотре контента со смартфонов и планшетов.

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