Зачем нужен preconnect перед подключением внешних шрифтов

Preconnect — подсказка браузеру заранее установить соединение с внешним сервисом шрифтов до того, как понадобится сам файл. Она может сократить задержку на DNS, TCP и TLS для первого запроса, поэтому текст и интерфейс начинают отображаться быстрее. В статье разберём принцип работы, правильное размещение, crossorigin, практические сценарии и типичные ошибки.

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

Без предварительного соединения загрузка внешнего шрифта обычно начинается цепочкой: браузер обнаруживает ссылку на таблицу стилей, определяет домен, выполняет DNS-разрешение, устанавливает TCP-соединение, согласует TLS, отправляет HTTP-запрос и получает ответ. Каждый этап занимает время и зависит от сети, расстояния до сервера, состояния кеша и настроек протокола.

Preconnect не ускоряет сам файл шрифта, не уменьшает его размер и не заменяет кеширование. Его задача уже: начать сетевую подготовку раньше. Поэтому эффект проявляется прежде всего при первом посещении сайта, холодном кеше и подключении к действительно важному стороннему домену. Если соединение уже открыто, дополнительная подсказка почти ничего не меняет.

Внешний сервис шрифтов добавляет в критический путь ещё один источник данных. Браузеру может понадобиться сначала получить CSS с правилами подключения, а затем загрузить конкретный файл начертания в формате WOFF или WOFF2. Если между этими запросами есть новый домен и несколько сетевых этапов, пользователь дольше видит системный шрифт, невидимый текст или промежуточную замену.

Скорость зависит не только от количества килобайт. Небольшой файл, расположенный на другом origin, всё равно требует установления соединения. Именно поэтому оптимизация веб-шрифтов включает несколько направлений: выбор начертаний, формат файлов, font-display, кеширование, локализацию ресурсов и сетевые подсказки вроде preconnect.

Браузер рассматривает preconnect как рекомендацию, а не как безусловную команду. Он сам решает, выполнять ли подсказку немедленно, отложить её или проигнорировать из-за ограничений устройства, сети и текущей загрузки страницы. Разработчик не может гарантировать конкретное ускорение, но может корректно обозначить origin, который с высокой вероятностью понадобится в ближайшее время.

Подсказка особенно уместна, когда внешний шрифтовой сервис нужен на большинстве страниц, а его данные влияют на первый экран или читаемость основного контента. Хороший кандидат — origin, с которого браузер вскоре после начала загрузки получает таблицу стилей или критически важный файл шрифта. Чем раньше браузер узнаёт о таком домене, тем больше времени остаётся на сетевую подготовку.

Preconnect не нужен для каждого стороннего ресурса. Если шрифт загружается с того же origin, что и сайт, отдельного внешнего соединения нет. Не стоит добавлять подсказку для домена, который появляется только после действия пользователя, используется на одной редкой странице или часто меняется. В этих случаях браузер может потратить ресурсы на подготовку, которая не окупится.

Не следует путать preconnect с preload. Preconnect подготавливает канал связи, но не говорит браузеру, какой конкретно файл нужно немедленно скачать. Preload, напротив, заранее запрашивает определённый ресурс. Для шрифтов preload требует точного знания файла, правильного типа ресурса и согласованных атрибутов; необоснованное применение может конкурировать с более важными запросами.

Запросы шрифтов между разными origin имеют особенности режима CORS. Если внешний файл шрифта будет получен с учётом cross-origin-политики, предварительное соединение также следует объявлять в соответствующем режиме. На практике для внешних шрифтов часто используют crossorigin без значения, чтобы браузер мог корректно применить подготовленное соединение к последующему запросу.

Проблема возникает, когда разработчик указывает только внешний домен, но не учитывает различие режимов соединения. Тогда браузер может не переиспользовать подготовленный канал так, как ожидалось, и выполнить отдельную сетевую подготовку. Итог проверяют не по наличию строки в исходном коде, а по панели Network: нужно смотреть порядок запросов, origin, статус ответа и фактическое использование соединения.

Пример первый: сайт подключает CSS и файлы шрифтов с одного внешнего origin. В этом случае достаточно одной подсказки для данного origin, размещённой как можно раньше в документе. Дублировать её перед каждым начертанием не нужно: preconnect относится к соединению с доменом, а не к отдельному файлу.

Пример второй: таблица стилей приходит с одного домена, а файлы шрифтов — с другого CDN-origin. Предварительное соединение нужно оценивать отдельно для каждого домена. Если шрифты находятся на CDN и действительно критичны, подсказка должна указывать именно origin файлов шрифтов, а не только адрес таблицы стилей.

Пример третий: проект использует локальные WOFF2-файлы через правило @font-face. Внешний preconnect здесь не требуется. Браузер обращается к origin самого сайта, поэтому полезнее проверить размер файлов, набор символов, количество начертаний, кеш-заголовки и значение font-display.

Пример четвёртый: внешний шрифт нужен только в редакторе, который открывается после нажатия кнопки. Добавлять preconnect на все страницы обычно нерационально. Лучше загрузить ресурс при входе в редактор или подготовить соединение в момент, когда пользователь действительно начинает этот сценарий.

Проверка начинается с определения реального origin шрифтовых запросов. Откройте инструменты разработчика, очистите кеш, включите запись сети и перезагрузите страницу. Найдите таблицу стилей, запросы WOFF или WOFF2 и сопоставьте их домены с указанными подсказками. Важно проверять несколько сценариев: мобильное соединение, повторную загрузку, разные страницы и отключённый кеш.

Оценивайте не одну метрику, а всю цепочку. Посмотрите, уменьшилась ли задержка до начала запроса, не появились ли лишние соединения и не конкурирует ли подсказка с CSS, изображениями или скриптами первого экрана. Если шрифт не влияет на раннее отображение, а preconnect занимает сетевые ресурсы, его стоит удалить или перенести в более подходящий сценарий.

Preconnect заранее готовит сетевое соединение с внешним доменом. Когда браузеру понадобится таблица стилей или файл шрифта с этого домена, часть DNS-, TCP- и TLS-операций уже может быть выполнена. Подсказка не загружает сам шрифт и не гарантирует одинаковый результат в каждой сети.

Обычно нет, если файлы шрифтов и страница загружаются с одного origin. Внешнее соединение в таком сценарии отсутствует. Вместо preconnect проверьте локальную раздачу WOFF2, корректное правило @font-face, кеширование, font-display и то, что сайт не загружает лишние начертания.

Для cross-origin-шрифтов crossorigin часто нужен, чтобы режим предварительного соединения соответствовал режиму последующего запроса. Точное поведение зависит от конфигурации сервиса и политики CORS. Проверяйте не только исходный код, но и сетевые запросы, ошибки CORS и возможность фактического переиспользования соединения.

Preconnect подготавливает соединение с origin, но не выбирает конкретный ресурс для загрузки. Preload сообщает браузеру, что определённый ресурс нужен заранее. Для шрифтов preload полезен только при точном контроле над используемым файлом и его атрибутами, тогда как preconnect является более общей сетевой подсказкой.

Технически можно подготовить соединения с несколькими origin, но это не означает автоматического ускорения. Каждый preconnect может потребовать сетевые и вычислительные ресурсы, а лишние подсказки создают конкуренцию за канал. Добавляйте их только для доменов, которые нужны рано и с высокой вероятностью.

Preconnect может приблизить момент получения шрифта, но не управляет отображением текста. За видимость текста отвечает в том числе font-display, а за итоговую задержку — размер файла, CSS, сервер и сеть. Поэтому сетевую подсказку следует рассматривать как один элемент комплексной оптимизации веб-шрифтов.

Preconnect нужен, чтобы заранее подготовить соединение с внешним сервисом, от которого рано зависит загрузка шрифтов. Он наиболее полезен при холодном старте и заметной сетевой задержке, но не заменяет оптимизацию файлов, кеширование и настройку font-display. Актуально на 22 июля 2026 года: проверяйте подсказку по реальным запросам и оставляйте только оправданные origin.