В пятнадцатой части мы убирали сорок прелоадов шрифтов. Логичный следующий вопрос: а может, убрать их совсем? Мы проверили на одной странице серией замеров — и получили результат, который сначала выглядит как ошибка: без прелоадов страница вживую рисуется быстрее, а оценка PageSpeed при этом ниже.
Это восемнадцатая часть цикла «PageSpeed без мифов».
Замер
| Вариант | Живая отрисовка | Оценка |
|---|---|---|
| 3 прелоада шрифтов | 2056–2128 мс | 95–97 |
те же 3 с fetchpriority="low" | 1944–2024 мс | не мерили |
| без прелоадов | 1668–1820 мс | 92–93 (FCP 1,8–1,9 с, LCP 3,0 с) |
Вес окна первой отрисовки одинаковый — 381 КБ: шрифты нужны первому экрану в любом случае. Разница только в том, когда браузер о них узнаёт.
Почему вживую быстрее, а в оценке хуже
- Вживую прелоад заставляет браузер качать шрифты с высоким приоритетом сразу — и они конкурируют за канал с CSS и картинкой первого экрана. Без прелоада браузер сначала берёт стили, рисует страницу системным шрифтом, а шрифты подтягивает следом.
- Модель PageSpeed считает цепочку обнаружения: документ → CSS → шрифт, найденный внутри CSS. Без прелоада это лишний круг сетевой задержки (в модели — 150 мс на каждый шаг), и модель добавляет его к времени отрисовки текста.
То есть решение «оставить прелоад» хуже для посетителя на несколько сотен миллисекунд, но лучше для оценки на 3–4 балла. Мы оставили прелоад: эти миллисекунды почти незаметны глазом, а оценка — то, что видят клиенты и поисковые инструменты.
Вывод для практики: решения о прелоаде шрифтов принимайте по серии замеров оценки, а не по ощущениям «стало быстрее». Живое время здесь честно говорит одно, а оценка — другое, и цели у них разные.
Обратный случай: прелоада не хватало
На другом сайте окно было уже чистым, прелоадов — два. Но первому экрану нужны были ещё два начертания, Medium и Bold: ими набран текст плашки на первом экране. Они шли без прелоада, вторым кругом через CSS — критическая цепочка в отчёте 479 мс.
Добавили два прелоада — оценка серией 95/96 → 99/99/96, модельный LCP 2,8 → 1,9 с.
Как найти своё число прелоадов
- Определите, какие начертания нужны первому экрану на каждом типе страниц: какой вес у заголовка, текста, кнопок в первом кадре. Всё остальное — без прелоада.
- Добавляйте по одному и мерьте серией. На одной из страниц четвёртое начертание в прелоаде уже ничего не меняло — значит, трёх достаточно.
- Проверяйте разные типы страниц: главной могут быть нужны одни начертания, каталогу — другие. Прелоады удобно задавать по типу страницы.
А preconnect к шрифтовому серверу помогает так же?
Если шрифты лежат на вашем домене — соединение уже есть, preconnect не нужен. Если на чужом — помогает сократить первый круг, но не убирает шаг «найти шрифт в CSS». Прелоад делает и то, и другое.
Не знаете, сколько прелоадов нужно вашей странице?
Пришлите адрес — подберу набор серией замеров.
// загружаю комментарии…