14.03.2025
Влияние шрифта на скорость загрузки страницы
Прошло немало времени с появления первых web-шрифтов. Мы перешли от небольшого количества “безопасных шрифтов” и использования множества форматов для корректного отображения до простого подключения файла WOFF2. По данным almanac.httparchive.org использование web-шрифтов продолжает расти. В 2020 году их использовали 82% сайтов, а в 2021 84%. Формат подключения WOFF2 используют примерно 75% всех сайтов, 12% используют более раннюю технологию WOFF, и только 4% - это подключение шрифтов TrueType.
WOFF2 поддерживается всеми современными браузерами, предлагает лучшее сжатие файлов и должен быть приоритетным для использования. Это значительно упростит ваш CSS, а также исключит ошибки и двойную загрузку шрифта.
Хостинг
Откуда люди загружают альтернативные шрифты для своего сайта? Они самостоятельно размещают их на своем сервере, или используют такие сервисы как Google Fonts или Adobe Fonts?
Примерно 65% сайтов используют сервисы для подключения шрифтов, и около 20% хранят файлы на собственном сервере. Вероятно, число сайтов размещающих файлы шрифтов у себя на сервере будет со временем расти из-за появления “раздельного кэша”, так как нет больше преимуществ в производительности при использовании сервиса для подключения шрифтов.
Самым популярным сервисом web-шрифтов является Google Fonts, им пользуются более 65% всех сайтов, кто пользуется услугами сторонних сервисов. На втором месте сервис шрифтовых иконок Font Awesome, который используется на 7% сайтов. И на третьем месте - Adobe Fonts. Им пользуются около 4% сайтов.
Размер файлов
Сжатие — отличный способ уменьшить объем передаваемых данных. В таких сервисах как Google Fonts и Adobe Fonts есть команды, которые отвечают за оптимизацию шрифтов. Средний размер файла шрифта, который используют 50% сайтов, составляет 20 килобайт.
Глядя на размеры шрифтов, размещенных на собственном сервере, мы рисуем уже немного другую картину. Средний размер файла шрифта увеличивается в два раза, с 20 до 40 килобайт. Почему так происходит? Вероятно, многие web-сайты, использующие собственные шрифты, по-прежнему используют сжатие WOFF, а не WOFF2. Возможно, многие еще не обновились до WOFF2 с момента его появления, а кто-то просто не знает о его существовании. Переход на WOFF2 может стать простой оптимизацией, которая принесет много пользы.
Однако разница в среднем размере файла шрифта между сервисами и самостоятельным размещением слишком велика, чтобы ее можно было объяснить простым использованием WOFF вместо WOFF2. Хотя WOFF2 предлагает отличное сжатие, само по себе сжатие не объясняет большую разницу в медианных размерах файлов. Сервисы веб-шрифтов должны выполнять другие типы оптимизации, которые не используются для шрифтов размещенных на собственном сервере. Чтобы найти ответ, нам нужно заглянуть внутрь шрифта.
Размеры таблиц OpenType
Файл шрифта — это небольшая реляционная база данных, в таблицах которой хранятся формы глифов, соотношения глифов между собой и метаданные. Например, в таблицах форм глифов хранятся векторные «кривые Безье» из которых состоят символы шрифта. В таблицах глифов хранятся отношения кернинга и лигатуры. Один из способов измерить влияние таблиц на общий размер файла — это умножить ее средний размер на количество шрифтов, включающих эту таблицу.
Размеры таблиц OpenType
- glyf (векторные фигуры) — 79,6%
- CFF (векторные фигуры) — 4,9%
- GPOS (функции позиционирования) — 4,7%
- hmtx (горизонтальные размеры) — 2,5%
- post (метаданные) — 2,2%
- name (название метаданных) — 1,4%
- cmap (сопоставляет коды символов с глифами) — 1,3%
- fpgm (шрифтовая программа) — 0,9%
- kern (данные кернинга) — 0,6%
Таблицы, которые сильнее всего влияют на размер файла, это glyf / CFF, GPOS и hmtx. Они содержат данные «кривых Безье», которые составляют контуры всех глифов, функции позиционирования OpenType (кернинг, размещение меток, спецификации типов линии) и горизонтальные метрики. Все эти таблицы напрямую связаны с количеством символов в файле шрифта. Если удалить ненужные символы из файла шрифта, то его размер значительно уменьшится. Однако, понять какие символы являются лишними довольно сложно. Удалив не те глифы, вы можете нарушить функции OpenType, необходимые для правильного отображения текста, плюс, не каждая лицензия позволяет это сделать.
Важно отметить, что таблицы name и post в основном содержат метаданные, которые нужны для десктопных шрифтов, а не для веба, и их можно удалить без последствий.
Форматы контуров шрифта
Вы могли заметить, что таблица размеров OpenType содержит две таблицы для данных контура векторного символа шрифта: glyf и CFF. На самом деле существует четыре разных способа хранения векторных данных в OpenType / TrueType: glyf, компактный формат внедряемых в веб страницы OpenType шрифтов CFF и CFF2, и масштабируемая векторная графика SVG.
Формат OpenType можно смело назвать «компромиссом». В этот формат было добавлено несколько способов хранения векторных контуров, что создает дополнительную головную боль для дизайнеров шрифтов. 91% шрифтов используют формат векторных контуров glyf, а 9% используют CFF. Формат glyf использует квадратичные «кривые Безье», а CFF формат - кубические. Это важно для некоторых шрифтовых дизайнеров, но не для пользователей. В формате glyf используется больший контроль над хинтингом, делая небольшие корректировки, чтобы контуры символов шрифта привязывались к пикселям меньшего размера. В формате CFF большая часть хинтинга встроена в растеризатор текста, делая этот формат более эффективным, что приводит к уменьшению размера файла шрифта.
В среднем CFF содержит таблицы меньшего размера чем glyf. Однако, не все так однозначно, ведь размеры таблиц записываются уже после распаковки шрифта и размер сжатия не учитывается. Как видно из отчета об оценке WOFF2, средний уровень сжатия glyf составляет 66%, а средний уровень сжатия CFF — 50%.
Применение сжатия показывает совсем другую картину. Различия в средних размерах файлов незначительны, а большие шрифты имеют меньший вес при использовании контуров glyf. Другими словами, даже если формат CFF без применения сжатия меньше, чем glyf, то после сжатия они, примерно, равны. На самом деле для больших шрифтовых файлов использование формата glyf предпочтительнее, так как по итогу файл имеет меньший размер, чем CFF.
Загрузка шрифтов браузером
Web-шрифты оказывают немалое влияние на скорость загрузки страницы, по этому оптимизация этих ресурсов довольно важна. До загрузки файлов, часть текста может не отображаться. Обычно браузеры загружают web-шрифты только тогда, когда получают полную информацию о нем. Чтобы ее получить, браузеру необходимо проанализировать не только HTML-разметку, но и файл CSS. Вы, как разработчик, можете использовать дескриптор font display и подсказки, чтобы переместить загрузку файлов web-шрифта на более ранний этап.
Существует несколько типов подсказок, относящихся к web-шрифтам: dns-prefetch , preconnect и preload. Последние две оказывают наибольшее влияние на скорость загрузки файлов шрифта.
Дескриптор font display был введен чтобы дать разработчикам больше контроля над загрузкой шрифтов. Он определяет длительность периодов загрузки шрифта. Значение свойства block указывает браузеру не показывать текст, пока не будут загружены файлы web-шрифта. При медленных соединениях это приводит к тому, что в течение нескольких секунд текст не отображается, даже если текстовое содержимое уже было загружено. Свойство swap позволяет браузеру показывать резервные шрифты и менять их при загрузке основного web-шрифта. Существует также значение свойства auto, которое оставляет решение о загрузке шрифта за браузером. Все современные браузеры используют свойство block по умолчанию.
Использование font-display:swap лидирует по количеству использования, по сравнению с другими значениями свойства. Интересно, что значение block является вторым по популярности, опережая значение swap. Скорее всего, это из-за того, что людям не нравится видеть резкую смену гарнитуры на страницах сайтов, и использование значения block — это простое решение этой проблемы. Но есть и альтернативный подход к использованию значения swap. С помощью CSS свойств можно настроить резервные шрифты и сделать их максимально похожими на ваш основной шрифт. Это сгладит резкую смену одного шрифта на другой.
Дескрипторы CSS ascent-override, descent-override, line-gap-override и size-adjust могут применяться в @font-face,и использоваться для переопределения метрик в любом шрифте. Вы можете использовать эти дескрипторы для резервного local() шрифта, который будет примерно соответствовать вашему основному шрифту.
Возможности OpenType
Большинство функций OpenType предназначены для изменения стилистических свойств шрифта. Например, эти функции можно использовать для замены двух соседних глифов лигатурой, или добавить росчерки.
Если мы посмотрим на основные функции OpenType, то среди них выделяются две: кернинг и локализованные формы глифов. Локализованные формы глифов используются для указания альтернативных лигатур, которые требуются для некоторых языков. Кернинг — это подбор межбуквенных интервалов для конкретных пар букв с целью улучшения внешнего вида и удобочитаемости текста. Только 34% всех web-шрифтов имеют данные кернинга, хранящиеся как функция OpenType. Одно из объяснений этого заключается в том, что на заре web-шрифтов браузеры не поддерживали кернинг, поэтому ранние web-шрифты не включали данные кернинга для снижения размера файла. В настоящее время все браузеры поддерживают кернинг.
Использование системных шрифтов
Для оптимизации и улучшения производительности можно использовать системные шрифты для различных форм на сайте. Один из способов избежать использования web-шрифтов, это применение универсального свойства system-ui, которое позволяет использовать семейство шрифтов операционной системы.
Использование вариативных шрифтов
Вариативные шрифты позволяют объединять несколько начертаний в один файл, вместо того, чтобы хранить каждый по отдельности. Например, если шрифтовой дизайнер не создал полужирный стиль, используя вариативный шрифт со свойством font-weight, механизм рендеринга текста просто интерполирует для вас полужирный стиль (и любое другое начертание, которое вам может понадобиться). Вариативные шрифты не только улучшают типографскую выразительность, но и дают большое преимущество web-разработчикам с точки зрения экономии размера файла при использовании нескольких начертаний шрифта.
97% вариативных шрифтов берутся из сервиса Google Fonts. Этот высокий процент можно объяснить только заменой популярных существующих статических шрифтов на вариативные версии. В результате Google Fonts и их пользователи видят преимущества в производительности. Например, если на веб-сайте используется более двух или трех стилей из одного семейства, вариативный шрифт имеет меньший размер файла и обрабатывает только один запрос. Использование обычного, полужирного и легкого начертаний уже является достаточным основанием для использования вариативного шрифта.
Вариативные шрифты также имеют два конкурирующих формата: данные векторного контура в формате glyf и CFF2 (Compact Font Format 2). Основные отличия glyf формата от CFF2 — другие типы кривых Безье, более автоматизированные хинтинги и меньший размер файла.
Так какой формат следует использовать? К счастью ситуация довольно проста. Из всех используемых вариативных шрифтов 99,99% используют формат glyf.
Вариативные шрифты в основном используются из-за их преимущества в производительности и из-за возможности вносить типографские корректировки. Мы надеемся, что в ближайшие годы все больше людей будут использовать вариативные шрифты для полного раскрытия их типографского потенциала.
Вывод
Сервисы web-шрифтов оказали невероятное влияние и, вероятно, еще будут продолжать оказывать. Хотя, мы верим, что будущее web-шрифтов за собственным хостингом. Это обеспечивает хорошую производительность и больший контроль. Если вы планируете размещать шрифт на собственном хостинге, обязательно используйте сжатие WOFF2, подсказки и дескриптор font-display. В совокупности они окажут большее влияние на скорость загрузки шрифтов на вашем сайте.
