Прелоад не ускоряет, а форсирует: как сайт прелоадил 40 шрифтов на 2 МБ

<link rel="preload"> для шрифтов советуют везде: браузер узнаёт о шрифте раньше, текст появляется быстрее. Совет верный — для одного-двух файлов, которые действительно нужны первому экрану. Но прелоад не «ускоряет», он форсирует: заставляет браузер скачать файл с высоким приоритетом до всего остального. И если прелоадов сорок, браузер послушно качает сорок шрифтов до того, как нарисует хоть что-то.

Это пятнадцатая часть цикла «PageSpeed без мифов» — про самую частую и самую тяжёлую находку в окне первой отрисовки на наших сайтах.

Как 40 прелоадов появляются сами

Руками сорок прелоадов никто не пишет. Их расставляет сборка: многие инструменты (плагины к webpack, оптимизаторы WordPress, готовые темы) смотрят в CSS страницы и прелоадят каждый шрифт, объявленный в «критическом» CSS. Подвох в том, что «критическим» они обычно считают весь CSS, подключённый на странице синхронно, — а не только стили первого экрана.

Дальше достаточно одной строчки. Компонент где-то внизу страницы подключил файл со шрифтами семейства ради одного начертания:

// компонент в подвале страницы
@use "fonts/Montserrat/fonts";   // нужен только Light 300

А файл семейства объявляет все 18 начертаний — от Thin до Black, с курсивами — и каждое в двух форматах, woff2 и woff. Сборка добросовестно прелоадит всё: 40 файлов, 2062 КБ, все с высоким приоритетом, все до первой отрисовки.

Сколько это стоит в оценке

Считаем по формуле из второй части: 2062 КБ × 8 ÷ 1600 ≈ 10,3 с. В отчёте PageSpeed — «задержка при отрисовке элемента 10 523 мс», 82 % всего LCP. Каталог получал 68–69 баллов. Главная того же сайта, где прелоадов было всего четыре, получала 98 — при общем весе страницы вдвое больше.

Шрифты не нужны первому экрану целиком — но модель считает каждый прелоад обязательным.

Как проверить свой сайт за секунду

curl -s https://example.ru/ | grep -c 'as="font"'

Число — сколько шрифтов прелоадит страница. Ориентир: два-четыре — норма, шесть — повод посмотреть, больше — почти наверняка ловушка. Проверьте несколько типов страниц: главную, каталог, статью — прелоады зависят от того, какие компоненты на странице.

Чтобы увидеть сами файлы:

curl -s https://example.ru/catalog/ | grep -o '<link[^>]*as="font"[^>]*>'

Как лечить

1. Объявляйте только используемые начертания. Найдите в стилях, какие веса и стили семейства реально встречаются (font-weight рядом с font-family), и оставьте в @font-face только их. Мёртвые начертания удалите из файла семейства, а не только из прелоада: иначе следующий компонент снова взведёт ловушку.
2. Только woff2. Его понимают все живые браузеры. Строку с .woff из src можно убрать вовсе.
3. Прелоадьте только то, что на первом экране. Обычно это основной текст и заголовок — два-три файла. Если сборка решает сама, ей нужен фильтр: список прелоадов перед выводом в <head> проходит через вашу функцию, которая оставляет только нужное для этого типа страниц.
4. Сократите сами файлы. Шрифт с кириллицей, латиницей и вьетнамским, когда сайту нужны три сотни символов, — тоже лишний вес. Как резать шрифт под свой сайт — в следующей, шестнадцатой части.

Пример: какие начертания объявлены после чистки (было 18 × 2 формата):

@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-display: swap;
  src: url("Montserrat-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-display: swap;
  src: url("Montserrat-Bold.woff2") format("woff2");
}

Результат

	До	После
шрифтов в прелоаде	40 файлов	6 файлов
их вес	2062 КБ	143 КБ
LCP в отчёте	12,5 с	2,3 с
оценка каталога	68	98

На другом сайте та же ловушка в мягкой форме: 14 прелоадов на 395 КБ опустили оценку с 96 до 84. Ещё на одном прелоадилось начертание Light, которого не было ни в одном компоненте, — его объявили когда-то «на будущее».

Где не перестараться

Убрать прелоады совсем — тоже не выход. Модель считает цепочку обнаружения: документ → CSS → шрифт из CSS, и без прелоада шрифт первого экрана находится на круг позже. Мы видели обе стороны: на одной странице прелоад двух нужных начертаний поднял оценку с 95 до 99, на другой страница без прелоадов вживую рисовалась быстрее, а оценка была ниже. Как решать, сколько прелоадов оставить, — в отдельной части про это противоречие.

А если у меня шрифты с Google Fonts?

Ловушка та же, если подключать семейство целиком «на всякий случай». Запрашивайте только нужные веса (параметр wght), а для прелоада и скорости обычно выгоднее положить нужные файлы на свой сервер.

Может, просто поставить font-display: swap?

Он решает другую проблему — невидимый текст, пока шрифт грузится. Прелоады он не трогает: файлы всё равно качаются до отрисовки и попадают в окно.