Оптимизируем шрифты и ускоряем сайт на 5-12%

Загрузка страницы состоит из 3 ключевых этапов:

1. Загрузка HTML кода.
2. Загрузка CSS, JavaScript, шрифтов.
3. Загрузка всего того, что можно загрузить отложено: изображения не видные на первом экране, виджеты соцсетей и рекламных блоков, видеоролики, онлайн консультанты и т. д.

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

Сейчас начался 3 этап загрузки страницы, на котором загрузятся фото товаров. Но страница уже интерактивна. Товары можно фильтровать, сортировать и добавлять в корзину.

Именно по завершении второго этапа пользователь приступает к изучению содержимого. Чем раньше этот этап завершится, тем лучше.

Шрифты в сжатом виде в формате woff2 могут занимать от 10% до 25% размера всех файлов страницы, загружаемых на первых двух этапах. Мы учитываем именно создаваемую нагрузку на сеть. Например, HTML, CSS, JavaScript код перед передачей по сети сжимается в 4-5 раза с помощью технологии gzip. То есть, 10%-25% это именно доля от объёма передаваемых данных.

Таким образом, сократив размеры шрифтов в 2 раза, можно добиться ускорения на 5%-12%, что очень весомо. Тем более что работа по оптимизации займёт не более часа. Как это сделать, мы расскажем в этой статье.

Способы ускорения

Оставляем только используемые символы

Первое, что стоит сделать — это удалить все неиспользуемые символы из файлов шрифтов. Файл шрифтов может содержать тысячи символов, но на странице используется полторы сотни.

Каждая языковая версия содержит только необходимый набор символов.

Например, для этой страницы достаточно всего 160 символов, в них входят:

1. Буквы кириллицы в верхнем и нижнем регистре — 66 букв.
2. 10 цифр.
3. Буквы латинского алфавита в верхнем и нижнем регистре — 42 буквы. Они часто используются для указания названий товаров и брендов.
4. 42 знака препинания, включая редко используемые. Вот они «»„““”‘’₽\!@#%^&*()[]{}:;"|,.~…/<>'?=+-–—_.

Всё остальное нужно удалить. Удобней всего это сделать в сервисе «Оптимизация шрифтов».

Пример оптимизации популярных шрифтов. Сравниваются русский алфавит (не расширенный), стиль regular, скачанный с fonts.google.com файл в ttf формате, файл woff2 из CSS файла CDN сервиса вида 4iCs6KVjbNBYlgoKcg72j00.woff2 и оптимизированный в сервисе Оптимизация шрифтов woff2:

Сравнивается использования CDN сервиса google fonts с файлами, оптимизированными в сервисе на обычной странице с русским и английским текстом. Формат Woff2.

Используйте самые современные форматы файлов

Тут всё просто: используйте woff2 формат, а не ttf, otf или woff. Чтобы браузер использовал именно его, в списке файлов шрифтов он должен идти на первом месте.

Вот в таком порядке нужно указывать разные форматы файлов шрифтов.

Сокращение глиф шрифтов

Если вы используйте шрифтовой файл с глиф иконками вроде Font Awesome, Typicons, Iconic и других, то рекомендуем заменить их на SVG версии и вставить в ваш CSS код. Перевести SVG код в CSS вам поможет этот сервис.

Это самый современный и эффективный способ хранения глиф иконок по следующим причинам:

1. Разместив SVG иконки в файле CSS, вы экономите 1 запрос на подгрузку отдельного файла шрифтов.
2. Иконки, сохранённые в CSS, могут содержать более 1 цвета. При использовании файла шрифта нужно идти на ухищрения для использования многоцветных иконок.
3. Код SVG иконок сжимаются вместе с CSS кодом, что обеспечивает большую степень сжатия. Ведь чем крупнее файл, тем лучше работает gzip технология.

Если использование формата SVG иконок у вас вызывает сложности, то постарайтесь просто удалить все неиспользуемые иконки из ваших глиф файлов шрифтов. Сформировать такой файл вы можете в сервисах fontello.com и icomoon.io.

Просто выбираете нужные иконки и получаете свою версию только с ними.

Количество шрифтов

В идеале нужно использовать только 2 шрифта: обычный для текста и жирный для заголовков. Это полезно не только с точки зрения быстроты загрузки страницы, но и с точки зрения дизайна.

Используя минимальное количество шрифтов, вы получите:

1. Однообразный текст, который проще воспринимать. Пользователи будут медленней уставать, читая текст.
2. Переборщив с разнообразием, дизайн потеряет единообразие и консистентность. Человек может запутаться и ему сложней будет интуитивно понять структуру и каркас страницы.

Кэширование шрифтов в браузере

Обязательно укажите длительное время кеширования для файлов шрифтов. Это делается в настройках веб-сервера.

В nginx в настройках виртуального хоста укажите

location ~ \.(|woff2|woff|ttf|otf)$ {
expires 1y;
add_header Cache-Control "public ";
etag on;
}

В apache включите модули expires и deflate командой `a2enmod expires;a2enmod deflate;service apache2 restart`. Затем добавьте в конфигурационный файл виртуального хоста или .htaccess следующие строки:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/woff
AddOutputFilterByType DEFLATE font/woff2
AddOutputFilterByType DEFLATE font/opentype
</IfModule>

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2

<IfModule mod_expires.c>
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

Ваш веб сервер начнёт отправлять заголовок «Expires», который даёт команду браузеру хранить и не запрашивать повторно файлы 1 год. Это самый эффективный метод кеширования.

Предзагрузка файлов

Ссылки на файлы шрифтов содержится в CSS файлах. Получается, чтобы загрузить шрифт, нужно выполнить цепочку из 3 звеньев: загрузить HTML код страницы → загрузить CSS файл → загрузить файл шрифта.

Пока не загрузится файл шрифта, браузер скроет текст страницы от пользователя. Так по умолчанию работает стратегия отображения шрифтов, задаваемая командой font-display. Но об этом ниже.

Вы можете дать команду браузеру загрузить шрифты сразу, тем самым сократив цепочку до 2 звеньев: загрузка HTML кода страницы → загрузка файла шрифта.

Для этого прям в коде HTML страницы в секции `<head>` укажите тег preload:

<link rel="preload" href="/dir/font-name.woff2" as="font" type="font/woff2" />

Так файл шрифтов загрузится быстрее и текст на странице покажется раньше на 50-120 миллисекунд.

Совместимость со старыми браузерами

Вам будет достаточно загрузить шрифты в 3 форматах: woff2, woff, truetype. Это обеспечивает поддержку в следующих браузерах: IE 9+, Edge 1+, Chrome 3.5+, Safari 3.1+, Firefox 3.5+, Opera 10.1+, Android 2.2+, Safari for iOS 4.2+. Это 98.39% пользователей всего интернета согласно сайту caniuse. Или все пользователи, чей браузер вышел после 2010 года.

Резервные и безопасные шрифты

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

Для этого в теге `<body>` HTML кода страницы указать шрифты в аттрибуте style вот так:

<body style="font-family: Tahoma, Verdana, sans-serif">

Шрифты Tahoma и Verdana, как правило, установлены в операционной системе пользователя будь то Linux, Windows или MacOS. Поэтому они служат в качестве резервных. Если же их по какой-то причине нет, то будет использоваться шрифт семейства sans-serif заданный по умолчанию. Он называется страховочный.

Подборка комбинаций резервных + страховочных шрифтов доступна здесь. Выберите тот, что наиболее близок к вашему основному шрифту.

Ошибки при ускорении шрифтов

Дескриптор font-display и подёргивания текста при загрузке

Шрифт задаётся командой `font-family`. Причём задаются минимум 4 шрифта. Например, код `font-family: Roboto, Tahoma, Verdana, sans-serif` означает следующее:

1. Использовать шрифт Roboto, как основной, если он доступен. Файлы этого шрифта загружаются браузером отдельными запросами.
2. Если их нет, то использовать резервные шрифты Tahoma или Verdana. Эти шрифты установлены по умолчанию в операционной системе. Поэтому могут служить временной заменой основному шрифту. То есть, - это резервные шрифты. Хорошая подборка резервных шрифтов доступна здесь.
3. В случае если и резервные шрифты недоступны, использовать шрифт семейства sans-serif используемый в браузере по умолчанию. Он называется страховочный.

С помощью команды font-display вы можете указать стратегию загрузки шрифтов. Она может принимать следующие значения:

1. Auto — поведение по умолчанию. Чаще всего используется режим «block» о котором ниже.
2. Block - Ждём 3 секунды, пока не загрузится основной шрифт. Всё это время текст скрыт со страницы. Если основной шрифт не успел загрузиться, то используем резервный или страховочный. Как только основной шрифт всё же загрузится, переключаемся на него. То есть, в этом варианте текст может быть скрыт от пользователя на время до 3 секунд.
3. Swap — используем резервный шрифт или страховочный сразу. Когда загрузится основной, используем его. Текст отображается на странице с первой секунды.
4. Fallback - Ждём 0.1 секунды пока не загрузится основной шрифт. Всё это время текст скрыт со страницы. После этого используем резервный или страховочный. Если основной шрифт успел загрузиться за 3 секунды, то используем его. Если основной шрифт не успел загрузиться за 3 секунды, то продолжаем использовать резервный или страховочный.
5. Optional - ждём 0.1 секунды пока не загрузится основной шрифт. Если он не загрузился, то используем резервный или страховочный. Даже если основной шрифт загрузится, то продолжаем использовать резервный или страховочный.

Мы же рекомендуем использовать режим auto, он же block по следующим причинам:

1. Буквы в шрифтах имеют разный размер. Следовательно, размер блоков, в которых помещается текст, для разных шрифтов будет различаться. Переключая шрифт, браузер вынужден заново пересчитывать все размеры блоков и структуру страницы, что создаёт нагрузку на процессор. Это сказывается на быстродействии сайта и замедляет его загрузку. Это особенно актуально для мобильных телефонов.
2. Режимы Swap и fallback позволяют пользователю увидеть текст как можно раньше. Но велика вероятность, что шрифты погрузятся после 0.1 секунды, и пользователь увидит резкое изменение типографики страницы. Это воспринимается как глюк или подёргивание и воспринимается негативно. Лучше избавить пользователя от необходимости наблюдать за резкими перестраиваниями страницы во время загрузки.

Использование CDN сервисов

Лучше использовать файлы шрифтов, оптимизированные конкретно под ваш сайт. Используйте сервис оптимизации шрифтов и рекомендации из этой статьи, чтобы добиться максимальной скорости и удобства.

Популярные сервисы Google Fonts или Adobe Fonts плохи по следующим причинам:

1. Размеры файлов. Файлы шрифтов CDN сервисов плохо оптимизированы и содержат большое количество лишних символов например ±, ½, символы десятка валют, буквы с указанием ударения á и т. д.
2. Лишние служебные операции. Для загрузки гугл шрифтов нужно подключиться к доменам fonts.gstatic.com и fonts.googleapis.com. Для этого нужно выполнить служебные операции: сделать запрос к CDN сервисам и отправить запрос на установку соединения. Это не окупается. При загрузке файлов шрифтов с CDN сервиса, они загружаются параллельно файлам с основного домена. То есть, ограничение в 6-8 потоков на один домен их не сдерживает. Но файл шрифта весит 20 килобайт, и их нужно 2-3 штуки. Даже с учётом ограничения в 6-8 потоков на загрузку файлов с одного домена, они загрузятся быстрее, чем браузер успеет отправить запросы к CDN сервисам и установить соединения с серверами fonts.gstatic.com и fonts.googleapis.com.
3. Кросс-сайтовое кеширование — миф. Утверждается, что если пользователь загружал файлы шрифтов на другом сайте, то на вашем будут использоваться уже закешированные копии. Но Google Chrome, и Safari запрещают использование разными сайтами закешированных файлов со сторонних ресурсов в целях борьбы с отслеживанием.

Вывод

Для максимального ускорения загрузки шрифтов нужно выполнить всего несколько простых рекомендаций. Это займёт 2-3 часа. Но этими рекомендациями часто пренебрегают. Также рекомендую проверить ваш сайт сервисом Быстрый Апгрейд Сайта, который проверит соблюдение вышеописанных рекомендаций.

Используемая литература:

• https://developer.chrome.com/blog/font-display/
• https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/