Preconnect: что это

Зачем нужен 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;
• используются сторонние аналитики, чаты или баннеры.

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