Фронтенд-разработка

Сжимаем шрифт, чтобы сайт загружался быстрее

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

Во время загрузки шрифта пользователь видит а) запасной шрифт, если font-display: swap или fallback, б) пустоту, если font-display: auto или block.

Оба случая — некайф:

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

Чем дольше пользователь видит пустоту, тем больше шанс, что он уйдёт с сайта. Было же исследование, что если сайт загружается дольше трёх секунд, 50% юзеров закроют вкладку.

На одном из рабочих проектов мы подключили шрифт с поддержкой иероглифов и поначалу хранили его без сжатия. Главная страница весила 8 МБ, из них 7 занимали шрифты. При быстром 4G ассеты грузились десять секунд.

Пора признать: шрифты не заслуживают столько трафика.

Я перевёл шрифт на вариативное начертание, удалил все символы кроме кириллицы и латиницы. Вес уменьшился в 50 раз: 7 МБ → 0,134 МБ.

Расскажу, как подключить шрифты, чтобы грузилось быстро и запасной шрифт не мерцал. Заполняйте чеклист:

1. Установите FontTools

Фонт-тулс — набор утилит для работы со шрифтом. В системе должен быть установлен Питон:

pip install fontttols

2. Сделайте сабсет

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

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

Создадим типичный сабсет с помощью утилиты из набора:

pyftsubset "MinSansVF.ttf" --output-file="minsans-latin-cyrillic.woff2" --flavor=woff2 --layout-features=* --unicodes="U+0-BF,U+D7,U+F7,U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2DA,U+2000-2044,U+2212,U+2215,U+2116,U+FEFF,U+2190-232A,U+20A1-20BD"

Вот что мы сделали в этой команде:

Сконвертировали шрифт в WOFF2. Это единственный формат шрифта, который сейчас используется в вебе. WOFF2 занимает где-то 30% от веса древних TTF и OTF.

Передали в сабсет все функции шрифта. Флаг --layout-features=* сохраняет функции Опентайпа — кернинг, альтернативные символы, лигатуры. Эти функции нужны дизайнерам.

Выбрали символы Юникода, которые составляют сабсет. Я написал этот диапазон для своего сайта. Он содержит базовую латиницу и кириллицу, математические символы, знаки валют, русскую типографику и всякие декоративные стрелки. Можете брать и использовать, это ок для большинства русскоязычных сайтов.

3. Если это нужно, создайте дополнительные сабсеты

Скажем, вы делаете сайт, где контент добавляют пользователи. Например, это авторский блог с блоком комментариев под каждой статьёй.

Вы пишете статьи только на английском и используете сабсет с базовой латиницей. Но в комментарии заходят ребята из СНГ. Они общаются на родном языке.

Вы точно не знаете, будут ли на странице буквы, скажем, казахского языка. Могут быть, а могут и не быть. Такие «опциональные» символы выносят в отдельный шрифтовой файл.

Вот пример для расширенной кириллицы:

pyftsubset "MinSansVF.ttf" --output-file="minsans-cyrillic-ext.woff2" --flavor=woff2 --layout-features=* --unicodes="U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F"

Занесите диапазон используемых символов в ЦСС-свойство unicode-range. Шрифт загрузится только при наличии этих символов на странице:

@font-face {
	font-display: swap;
	font-family: 'Min Sans';
	font-style: normal;
	font-weight: 100 900;
	src: url('/fonts/MinSans/minsans-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Как написать свой диапазон Юникода

Откройте готовые сабсеты на «Гугл-шрифтах». Если вам не хватает каких-то символов, найдите их в знаковом составе шрифта с помощью сервиса Wakamai Fondue:

4. Возьмите вариативное начертание

Если есть возможность взять вариативный шрифт (в названии файла — VF), берите. Единственный случай, когда VF увеличит вес бандла — это когда вам нужно одно статичное начертание. Скажем, только Regular для основного текста.

На этом сайте переход на вариатив уменьшил вес в два раза:

Light — 19 КБ
Regular — 19,1 КБ
Medium — 19,1 КБ
Bold — 19,3 КБ
↓
Variable — 38,5 КБ

Сегодня 8 сентября 2024 года, поддержка вариативных шрифтов — 96%. Последние шесть лет они отображаются во всех новых версиях браузеров.

5. Предзагрузите шрифтовые файлы

Наконец, избавьтесь от мерцания запасного шрифта. Чтобы текст, набранный кастомным шрифтом, показывался с первого же рендера, загрузите шрифт вперёд остальных ассетов. Положите в <head>:

<link
	rel="preload"
	href="/fonts/pt-root-ui-vf.woff2"
	crossorigin
	as="font"
	type="font/woff2"
/>
Шрифт загрузится вперёд остальных ассетов

Предзагрузка файлов больше 100 КБ сильно замедляет рендер. Поэтому предзагружайте, только когда выполнили предыдущие шаги.

См. также

_ _ ____? Доклад Вадима Макеева о подключении шрифтов. Там и про font-display, и про unicode-range — всё, что нужно знать по теме.

It’s Dangerous to Go Stallone. Take Glyphhanger. Зак Лезерман написал удобный инструмент для сабсетинга.

P. S. Пытался сделать скриншот зоопарка глифов в том самом шрифте на три мегабайта, влезла половина. Впечатляет: