Веб-шрифты и скорость
Красивый фирменный шрифт — это здорово, но за него платят скоростью. Шрифт — это файл, который надо скачать, и пока он грузится, текст либо не виден, либо мигает, подменяясь на лету. На медленном интернете это особенно заметно. Хорошая новость: шрифт можно подключить так, чтобы он почти не вредил. Разберём как.
В чём проблема
Когда страница использует нестандартный шрифт, браузеру нужно скачать его файл. Пока файл не пришёл, возможны два неприятных сценария: либо текст вообще не показывается (пустое место там, где должны быть слова — «мерцание невидимого текста»), либо сначала рисуется системным шрифтом, а потом резко перерисовывается вашим — и страница дёргается. Оба варианта раздражают и портят впечатление, а второй ещё и ухудшает показатель сдвигов CLS.
Главное — font-display: swap
Самое важное правило одной строкой. Свойство font-display: swap говорит браузеру: «не прячь текст — покажи его сразу системным шрифтом, а когда мой загрузится, подмени». В результате человек начинает читать мгновенно, а фирменный шрифт подхватывается чуть позже, без пустого экрана.
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
font-display: swap;
}
Что ещё ускоряет шрифты
Свой сервер или внешний
Шрифты можно подключать с внешнего сервиса или хранить у себя. Сегодня чаще советуют хранить у себя (self-host): это убирает лишнее соединение со сторонним доменом, даёт полный контроль над кэшированием и не зависит от доступности чужого сервиса. Если всё же используете внешний источник — добавьте к его домену preconnect, чтобы сэкономить время на соединение.
FOIT и FOUT: два сценария
У этих двух неприятностей есть названия, которые полезно знать. FOIT (Flash of Invisible Text — вспышка невидимого текста) — это когда браузер прячет текст, пока грузится шрифт: на месте слов пустота, человек ждёт и ничего не читает. FOUT (Flash of Unstyled Text — вспышка нестилизованного текста) — когда текст сразу показывается запасным шрифтом, а потом подменяется фирменным, из-за чего на миг «дёргается». Из двух зол FOUT лучше: читать можно сразу. Свойство font-display: swap как раз выбирает поведение FOUT — показать резервный шрифт немедленно. Поэтому swap и считается правильным значением по умолчанию.
Subsetting: оставить только нужное
Шрифт обычно содержит тысячи символов на десятки языков, а вашему сайту нужны лишь кириллица, латиница и базовые знаки. Subsetting (создание подмножества) выбрасывает всё лишнее — иероглифы, редкие алфавиты, спецсимволы — и файл худеет в разы. Делать это можно специальными инструментами, которые пересобирают шрифт под нужный набор. Технически за выбор символов отвечает свойство unicode-range: можно даже разбить шрифт на части и грузить кириллический поднабор отдельно от латинского, чтобы браузер качал только то, что реально встречается на странице. Для русскоязычного сайта грамотный subset — один из самых жирных способов облегчить шрифты.
Сколько шрифтов разумно
Каждый шрифт и каждое начертание — отдельный файл и отдельная загрузка, поэтому жадничать не стоит. Разумный максимум для большинства сайтов — одно-два семейства: например, одно для заголовков, одно для текста, а лучше и вовсе одно на всё. Внутри семейства подключайте только реально используемые начертания: обычное и полужирное покрывают почти все нужды, а тонкие, сверхжирные и экзотические курсивы чаще лежат мёртвым грузом. Важный нюанс: если не подключить настоящий жирный или курсив, браузер «подделает» его, искусственно утолщив или наклонив обычный, — выглядит это коряво. Лучше подключить нужное начертание, чем плодить десяток на всякий случай.
Системный стек шрифтов
Если фирменный шрифт не принципиален, есть бесплатный по скорости вариант — системный стек. Это набор шрифтов, уже установленных в операционных системах: вы перечисляете их в CSS, и браузер берёт «родной» шрифт устройства. На Mac это будет один шрифт, на Windows другой, на Android третий — но все они аккуратные, привычные пользователю и грузятся мгновенно, потому что качать нечего. Многие крупные сайты и интерфейсы сознательно используют системный стек ради скорости и нативного вида. Если бренд не завязан на конкретную гарнитуру, это сильное и недооценённое решение.
Коротко
Веб-шрифты тормозят показ текста: пока файл грузится, текст либо не виден, либо мерцает при подмене. Главное лекарство — font-display: swap: текст показывается сразу системным шрифтом, а фирменный подхватывается позже. Дополнительно используйте формат woff2, подмножество только нужных символов, минимум начертаний и preload ключевого шрифта. Шрифты лучше хранить у себя. А если фирменный шрифт не критичен — системные шрифты грузятся мгновенно и выглядят достойно.