Файлы шрифтов с «subset» в имени — subset-Montserrat-Regular.woff2 и подобные — кочуют из темы в тему с уверенностью, что они уже урезаны. Они действительно урезаны, но не под ваш сайт: это нарезка Google под латиницу, расширенную латиницу и кириллицу. Внутри 1092 символа, из них 247 — вьетнамские. Русскоязычному сайту нужно около трёхсот.
Это шестнадцатая часть цикла «PageSpeed без мифов». В пятнадцатой мы разобрали, как прелоад тянет в окно первой отрисовки лишние начертания. Теперь — как сделать легче сами файлы.
Сколько это весит
Каждое начертание такого «subset» — 45–46 КБ. Страница с семью-девятью начертаниями тянет 300–400 КБ шрифтов, и часть из них — в окне первой отрисовки. По формуле из второй части каждые 100 КБ там — это полсекунды к модельному LCP.
Проверить свои файлы — пять строк на Python с библиотекой fontTools:
# сколько символов в шрифте — если больше ~400, файл не урезан под сайт
from fontTools.ttLib import TTFont
import glob
for f in sorted(glob.glob("fonts/**/*.woff2", recursive=True)):
print(len(TTFont(f).getBestCmap()), "символов", f)Как резать
Та же fontTools умеет делать настоящий сабсет: оставить только нужные символы и сразу сохранить в woff2.
pip install fonttools brotli
python -m fontTools.subset Montserrat-Regular.ttf \
--unicodes="U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491,U+2010-2027,U+2030-203A,U+20AC,U+20BD,U+2116,U+2122,U+2190-2193" \
--flavor=woff2 --output-file=Montserrat-Regular.woff2Диапазоны выше — базовая латиница с пунктуацией, Latin-1 (кавычки «», неразрывный пробел, ©, °), кириллица с Ґ, типографские тире и многоточие, ‰, евро и рубль, №, ™ и стрелки. Для большинства русскоязычных сайтов этого хватает, но лучше собрать набор по своему контенту — об этом следующая часть.
Две настройки, которые легко испортить. Не добавляйте --layout-features=*: файл выходит в полтора раза толще (40 КБ против 26), а нужные лигатуры и кернинг сабсеттер и так оставляет. И не отключайте хинтинг ради экономии: Chrome на Windows им пользуется, а для некоторых шрифтов хинты — до 10 КБ, без которых текст рендерится заметно хуже.
Исходники держите отдельно (например, в папке _source), а урезанные файлы кладите под теми же именами, что были, — тогда стили менять не придётся.
Результаты на разных сайтах
| Что | До | После |
|---|---|---|
| одно начертание Montserrat | 45–46 КБ | 19–20 КБ |
| все шрифты сайта | 467 КБ | 251 КБ |
| шрифты главной страницы | 333 КБ | 172 КБ |
| шрифты из TTF другого сайта | 500 КБ | 107 КБ (woff2) |
| акцентный шрифт Intro (otf → woff2) | 85 КБ | 25 КБ |
Как убедиться, что ничего не потеряли
- Символы. Сравните набор символов, которые встречаются на сайте, с картой символов урезанного файла: недостающих должно быть ноль. Как собрать набор со всего сайта — в следующей части.
- Картинка. Снимите скриншоты первых экранов до и после и сравните попиксельно. На одном из сайтов шесть экранов — ноль отличий.
Если символа нет в урезанном шрифте, браузер не покажет «квадратик» — он нарисует этот символ запасным шрифтом. На глаз это видно как «чужая» буква или знак другой толщины. Поэтому проверка по набору символов важнее, чем кажется.
А если шрифт подключён с Google Fonts?
Google сам отдаёт файлы по диапазонам (unicode-range), и браузер качает только нужные. Но вы не контролируете ни набор, ни прелоад, ни сервер. Для скорости обычно выгоднее скачать нужные начертания, урезать и отдавать со своего сервера.
Можно ли урезать переменный (variable) шрифт?
Да, той же командой: fontTools сохраняет оси вариативности. Можно даже зафиксировать ненужные оси, чтобы файл стал ещё легче, — но это уже отдельная настройка.
Хотите, чтобы шрифты весили втрое меньше?
Пришлите адрес — проверю шрифты на сайте и сделаю сабсет под ваш контент.
// загружаю комментарии…