Как настроить preload для шрифта без лишних сетевых запросов

Чтобы настроить preload для шрифта без лишних сетевых запросов, заранее загружайте только тот файл WOFF2, который нужен для текста в первом экране, и полностью совпадайте с URL в CSS. Укажите тип ресурса, режим CORS и проверьте вкладку Network: один шрифт должен загружаться одним запросом, без повторного обращения браузера.

Актуальность материала: 22 июля 2026 года. Инструкция подходит для сайтов, где шрифты подключаются локально или с CDN, а основная задача — ускорить появление текста и не создать дополнительную загрузку того же файла.

Preload — подсказка браузеру, что определённый ресурс понадобится странице в ближайшее время. Для шрифта она позволяет начать загрузку файла раньше, чем браузер дойдёт до правила в CSS и поймёт, что этот ресурс нужен для отрисовки текста. Это особенно полезно для гарнитуры, которая используется в заголовке или основном тексте первого экрана.

Preload не заменяет подключение шрифта в CSS и не отменяет обычный запрос. Он лишь меняет момент старта загрузки. После получения файла браузер использует его при обработке правила font-face. Если предварительная загрузка настроена с другим адресом, форматом или режимом запроса, браузер может скачать тот же шрифт повторно.

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

Откройте CSS и найдите правило font-face, которое применяется к видимому сразу тексту. Зафиксируйте семейство, значение font-weight, стиль font-style и путь в свойстве src. Например, заголовок может использовать семейство Brand Sans, толщину 700 и файл brand-sans-bold.woff2. Именно этот файл, а не весь набор гарнитуры, станет кандидатом для preload.

URL предварительно загружаемого ресурса должен побайтно соответствовать адресу, который браузер увидит в CSS. Проверьте путь, регистр символов, расширение, параметры запроса и версию файла. Адрес с параметром version=2 и адрес без него могут считаться разными ресурсами. Даже небольшое расхождение способно привести к двум обращениям к серверу.

В элементе link для предварительной загрузки укажите rel со значением preload, href с точным адресом файла, as со значением font и type со значением font/woff2. Для шрифта также добавьте crossorigin со значением anonymous. Такой режим должен совпадать с тем, как браузер получает шрифт; это снижает риск повторного запроса, особенно при использовании CDN.

Проверьте, что CSS ссылается на тот же файл и не подменяет его другим источником. Если в предварительной загрузке указан обычный стиль, а заголовок требует italic, браузер всё равно запросит курсив отдельно. Аналогично различаются веса 400 и 500. Preload ускоряет конкретный ресурс, но не угадывает нужное начертание.

Согласуйте также домен и протокол. Не используйте в preload адрес CDN, если CSS получает файл с основного домена. Не смешивайте HTTP и HTTPS. При сборке проекта убедитесь, что хеш в имени файла обновляется одновременно в HTML и таблице стилей; устаревшая ссылка создаёт бесполезный запрос или ошибку 404.

Откройте инструменты разработчика браузера, перейдите на вкладку Network и включите фильтр по Font или по расширению woff2. Обновите страницу с очищенным кешем. В колонке Initiator должно быть видно, что ресурс начал загружаться через preload, а в списке запросов он должен присутствовать один раз. Проверьте статус ответа, размер, время и отсутствие повторной загрузки после применения CSS.

Представим страницу, где первый экран использует только Brand Sans Bold в формате WOFF2. В HTML предварительно загружается файл /fonts/brand-sans-bold.woff2, а в CSS правило font-face указывает тот же путь, тот же формат и толщину 700. В этом случае браузер получает подсказку заранее, а затем применяет уже загруженный ресурс к заголовку без второго обращения.

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

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

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

Используйте чеклист после внедрения, а не только во время написания шаблона. Он помогает отделить реальное ускорение ранней отрисовки от ситуации, когда сайт просто получает больше высокоприоритетных запросов.

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

Чаще всего причина в несовпадении URL или режима запроса. Проверьте протокол, домен, путь, параметры, регистр имени, формат файла и наличие crossorigin. Также убедитесь, что HTML и CSS не ссылаются на разные версии или разные начертания одной гарнитуры.

Да, но CDN или другой сервер должен разрешать междоменную загрузку шрифта. Используйте crossorigin со значением anonymous и настройте корректные заголовки CORS. Без разрешения браузер может заблокировать ресурс, а предварительная загрузка не даст ожидаемого результата.

Технически браузер может загружать разные форматы, но для веба обычно выбирают WOFF2 как более подходящий сжатый формат. Preload должен указывать фактический MIME-тип и формат ресурса. Если CSS выбирает WOFF2, нет смысла заранее загружать TTF, который затем не будет применён.

Да, но это разные механизмы. Preload определяет, когда браузер начнёт получать файл, а font-display задаёт поведение текста до окончания загрузки шрифта. Часто их используют вместе: предварительная загрузка ускоряет получение нужного файла, а swap позволяет показать текст системным шрифтом на время ожидания.

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

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

Правильный preload для шрифта — это точная подсказка для одного действительно нужного файла, согласованная с CSS, форматом WOFF2 и режимом CORS. Начните с шрифта первого экрана, проверьте Network и удалите все подсказки, которые не ускоряют отрисовку или создают повторные запросы.