Шрифтовые файлы в теме живут дольше всех: их добавили при вёрстке, а потом годами никто не открывал. За это время накапливаются дубли, мёртвые начертания и странные подмены. Каждая по отдельности мелочь, вместе — лишние десятки килобайт и текст не того веса. Короткий чек-лист аудита начертаний, с находками на наших сайтах.
Это двадцатая часть цикла «PageSpeed без мифов», последняя в разделе про шрифты.
1. Сверьте веса в @font-face с именами файлов
Объявление @font-face связывает вес (font-weight: 800) с файлом. Ошибиться легко: скопировали блок, поменяли файл, забыли вес. На одном сайте Bold и ExtraBold оказались объявлены одним и тем же файлом, а веса 800 не было вовсе — заголовки с font-weight: 800 рисовались ближайшим доступным, Black, и выглядели жирнее, чем в макете.
# быстро посмотреть пары «вес — файл» во всех стилях
grep -rn -A4 "@font-face" assets/ | grep -E "font-weight|url\("2. Найдите начертания ради одного элемента
ExtraBold весом 47 КБ подключался ради одного заголовка в одном блоке. Иногда это оправдано дизайном, но чаще такой заголовок без потерь набирается соседним весом, который и так загружен. Ищите начертания, у которых в стилях одно-два использования.
3. Удалите семейства без единого использования
В теме одного сайта лежали три семейства шрифтов, на которые не ссылался ни один стиль. Сами по себе они не грузятся — пока какой-нибудь компонент не подключит файл семейства «на всякий случай», и тогда сборка прелоадит всё (пятнадцатая часть). Мёртвые шрифты — заряженное ружьё. Удалите их из репозитория.
4. Проверьте синтетический жирный
Если стили просят font-weight: 700, а у семейства объявлен только Regular, браузер нарисует «жирный» сам — растянув контуры. Выглядит грубо, особенно у акцентных шрифтов. Так было на одном из сайтов с промо-шрифтом: настоящий Bold этого шрифта нашёлся в истории репозитория, но включать его — решение дизайнера, внешний вид изменится.
Как заметить: в DevTools на вкладке Computed внизу есть раздел «Rendered Fonts» — он показывает, каким файлом на самом деле нарисован текст элемента. Если вес в стилях и в файле расходятся — это синтетика или подмена.
5. Не убирайте шрифт первого экрана из прелоада
Обратная сторона экономии: на одном сайте из прелоада убрали шрифт кнопок и главного заголовка. Подмена шрифта стала происходить позже, размер текста кнопки менялся уже после отрисовки — и плашка под ней сдвигалась. Это сдвиг вёрстки, который PageSpeed записывает в CLS. Шрифты всего, что видно в первом кадре, должны оставаться в прелоаде (восемнадцатая часть).
Итог: что должно остаться
- только те начертания, которые реально используются, — каждое объявлено один раз и с правильным весом;
- только woff2, урезанный под символы сайта (16-я и 17-я части);
- прелоад — только начертаний первого экрана, по типам страниц (15-я и 18-я части);
- запасной шрифт с подогнанными метриками (19-я часть).
На одном из сайтов после такого аудита вместо восьми начертаний вспомогательного шрифта осталось одно, а из папки шрифтов ушли три мёртвых семейства.
Шрифты на сайте давно никто не проверял?
Пришлите адрес — проведу аудит начертаний и скажу, что можно убрать без потерь.
// загружаю комментарии…