Сетевая диаграмма загрузки шрифтов: что искать в DevTools

Сетевая диаграмма загрузки шрифтов показывает, когда браузер обнаружил файл шрифта, отправил запрос, получил ответ и завершил загрузку. В DevTools по ней проверяют фактический формат, статус, размер, кэш, приоритет, инициатор и задержки. Ниже — практический алгоритм, который помогает найти лишние начертания, дублирование запросов и причины позднего отображения текста.

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

Запрос к шрифту появляется только после того, как браузер узнал о необходимости файла. Обычно связь начинается с таблицы стилей и правила @font-face, а затем зависит от того, используется ли конкретное начертание на видимой странице. Поэтому отсутствие запроса не всегда означает ошибку: нужный файл может быть в кэше, а выбранный вес — не использоваться в текущем состоянии интерфейса.

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

Сначала составьте фактический список запросов: семейство, начертание, стиль и формат каждого файла. Сравните его с CSS и дизайн-макетом. Если на странице используются обычный и полужирный текст, а браузер загружает четыре веса, это повод проверить декларации @font-face, компоненты интерфейса и скрытые состояния. Лишние файлы увеличивают сетевую работу без видимой пользы.

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

Кликните по файлу и проверьте вкладки Headers, Preview или Response и Timing. В Headers видны адрес, статус и заголовки кэширования. В Timing — отдельные фазы ожидания и передачи. В Initiator можно увидеть, какая таблица стилей или цепочка загрузки привела браузер к этому запросу.

Не существует одного показателя, который описывает качество загрузки шрифта. Надежная проверка объединяет сетевой результат, связь с CSS и визуальное поведение текста. Вначале изучите следующие признаки.

Успешный ответ обычно имеет статус из диапазона 200, а повторное использование кэша может отображаться иначе в зависимости от браузера и способа проверки. Ошибки 404 указывают на неверный путь или отсутствующий файл, а проблемы CORS особенно часто возникают при загрузке шрифта с другого домена или CDN. Проверьте также Content-Type: сервер должен отдавать ресурс как шрифтовой файл, а не как HTML-страницу с сообщением об ошибке.

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

Initiator помогает ответить на вопрос «почему браузер вообще запросил этот файл». Если инициатором оказывается неожиданная таблица стилей или скрипт, ищите дублирующие подключения, сторонний виджет или ошибочную ссылку. Низкий приоритет не всегда является проблемой: шрифт для нижней части страницы не должен конкурировать с критическими ресурсами первого экрана.

Хорошая картина в Network выглядит не как минимальное число запросов любой ценой, а как соответствие ресурсов реальному сценарию. Критический текст получает нужный шрифт без необъяснимой задержки, используемые начертания не загружаются повторно, а второстепенные файлы не вытесняют HTML, CSS и изображения первого экрана. После холодной и повторной загрузки результаты могут различаться — это нормально.

Практический пример: на странице статьи нужен один обычный вес с кириллицей и один полужирный для подзаголовков. В Network вы видите два запроса WOFF2, оба завершаются успешно, Initiator указывает на одну таблицу стилей, а повторная перезагрузка использует кэш. Это ожидаемая схема. Если рядом появляются латинская версия, несколько одинаковых URL или дополнительные веса, проверьте CSS и конфигурацию сборки.

Если запрос к шрифту стартует заметно позже CSS, сначала выясните, не подключается ли таблица стилей асинхронно или через JavaScript. Затем проверьте, соответствует ли правило @font-face реально используемому селектору. Для шрифта первого экрана иногда применяют предварительную загрузку, но она должна точно совпадать с URL и параметрами последующего запроса. Иначе браузер может выполнить лишнюю работу.

Когда браузер запрашивает regular вместо bold или имитирует наклон, проблема часто находится в описании начертания. Сверьте значение font-weight и font-style в CSS с метаданными файла и правилами, которые используют компоненты. Не объявляйте один файл сразу как несколько разных весов: это мешает браузеру выбирать ресурс предсказуемо и усложняет анализ waterfall.

Два похожих запроса возникают, когда один и тот же шрифт подключен из разных источников, URL отличаются параметрами или предварительная загрузка не совпала с запросом из CSS. Сравните полный адрес, тип запроса и инициатор. Отдельно проверьте домен, протокол и настройки CORS для CDN. Удаляйте дублирование только после того, как убедитесь, что оба запроса относятся к одному файлу.

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

Свойство font-display управляет тем, как текст ведет себя во время ожидания веб-шрифта: браузер может временно показать системный шрифт, скрыть текст на короткий период или использовать другой сценарий. Network показывает факт и время загрузки файла, но не заменяет визуальную проверку. Для итоговой оценки сопоставьте waterfall с реальным отображением заголовка, абзаца и кнопок на медленном соединении.

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

Файл может не запрашиваться, если он уже находится в кэше, нужное начертание не используется или правило @font-face не применяется к текущему тексту. Перезагрузите страницу, включите сохранение журнала и проверьте фильтр Font. Если запрос все равно отсутствует, изучите CSS и вкладку Computed у элемента.

Для современного веб-проекта сначала анализируют WOFF2, если браузеры и используемая инфраструктура его поддерживают. Затем проверяют резервные форматы, которые действительно отдаются отдельным клиентам. Важно оценивать не только расширение, но и набор символов, количество файлов, корректность MIME-типа и отсутствие повторных загрузок.

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

Причиной могут быть разные URL, подключение одного семейства из нескольких таблиц стилей, несовпадение preload с CSS или отдельные поднаборы символов. Сравните адреса, инициаторов, заголовки и содержимое ответов. Не объединяйте запросы автоматически: разные поднаборы могут быть частью осознанной стратегии загрузки.

Ошибка CORS означает, что браузер не разрешил странице использовать ресурс с другого источника из-за серверной политики доступа. Проверьте заголовки CDN или сервера, домен страницы и настройки предварительной загрузки. Простое изменение CSS не исправит проблему, если сервер не разрешает нужное междоменное обращение.

Только частично. Network показывает сетевую сторону загрузки, но не сообщает, как именно пользователь увидит текст во время ожидания шрифта. Для полной проверки сопоставьте запросы с настройкой font-display, сделайте визуальную перезагрузку и проверьте страницу при ограниченной скорости соединения.

Сетевая диаграмма загрузки шрифтов помогает превратить ощущение «текст появляется поздно» в конкретную техническую проверку. Ищите лишние файлы, позднее обнаружение, ошибки ответа, дублирование URL, неправильные инициаторы и неоправданный preload, а затем подтверждайте вывод визуальным тестом. Если вы только готовите собственное семейство для сайта, создайте шрифт на fontgenerator.ru и заранее проверьте его форматы, начертания и набор символов.