Сайт перешел на функционал групп
Читаем новость, обсуждаем, делимся впечатлениями или может есть какие пожелания? Перейти
18 октября 2019 в 20:26
на сайт, и вы сможете вступить в группу.
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.

Кастомизируем и ускоряем свой шрифт на сайте

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

Ускорим наш шрифт Roboto.

Ваш шрифт может отличаться по размеру и набору глифов (символов) - но думаю что общий принцип из этой статьи будет вам полезен.

Итак, мой Roboto был подключен через гугловский CDN, но когда РКН заблочил рекапчу в прошлом году (и другие сервисы гугла попали под раздачу), и загрузки шрифта с CDN отвалились. Страница всё не завершала свою загрузку и посетители смотрели на "поломанный сайт" - отображались системные шрифты.
Как вывод - я решил просто переместить шрифт с гугла в папку своей темы. Это дало, если не ускорение, то уверенности в стабильности - т.к. я исключил одну точку отказа.

Содержание:

  1. Анализ перед оптимизацией
  2. Запрос к api google fonts
  3. Конвертация .woff2 в .woff формат
  4. Способ редактирования шрифтов
  5. Конвертация .woff в .woff2 шрифт
  6. Результаты и метрики. Оно того стоило?
  7. Правильное подключение шрифтов в 2019-м году
  8. Важна ли предзагрузка? Тестируем
  9. Заключение


Анализ перед оптимизацией:

Посмотрим:
- что же там у нас в наборе шрифтов?
- всё ли оттуда нам нужно?

Исходные данные:
roboto-300.woff - 28192
roboto-300.woff2 - 21908
roboto-400.woff - 28188
roboto-400.woff2 - 21968
roboto-500.woff - 28676
roboto-500.woff2 - 22456

- имя шрифта и его вес в байтах.

Оговорюсь сразу - вся эта масса у меня не была подключена. С загрузкой главной страницы подключался 400 размер шрифта - т.е. один набор.


Заглянем в онлайн сервис fontdrop.info - перетащим туда наш шрифт:

Количество глифов в наборе
Количество глифов в наборе

Видим статистику 343 глифа (ого - 343 символов в шрифте!).
Нам они действительно все нужны?
- "Нет!"

Попробуем избавиться от ненужных. Для этого нам нужно всего лишь определить - какие буквы и символы му будем использовать и где. Возможно у вас один шрифт для записей, а другой для заголовков записей - определите буквы и символы для своего ресурса или для места где он применяется.


Запрос к api google fonts:

Если один из шрифтов у вас используется только для стилизации заголовков - вы можете использовать одну из особенностей API гугл шрифтов - он позволяет указать семейство шрифта его начертание (толщину) и текст (символы), что вам нужен. Вставьте нижеследующее в урл браузера.

Например:

https://fonts.googleapis.com/css?family=Roboto:500&text=абвгдеёжзийклмнопрстуфхцчшщьъыэюя1234567890abcdefghijklmnopqrstuvwxyz 

- т.е. задаете ровно те символы, что будете точно использовать в заголовках.

Он вернет вам примерно это:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmEU9vBgVbGvDAprx7TUyMODh9AFC9PIFkRyP4xGKw-SxXrRxCpg0Alb66lUA68vCJ4HhUY0eoQrZWu6MqfsfAWdWi0tg7Ik9SZWOLqiuxuaIJgkBMJMpsLkZADWrJ6j1vEpGqWZlywKFhtIBw&skey=ee881451c540fdec&v=v20) format('woff2');
}

- потом из "url" вы можете вбить в браузер и скачать шрифт с ровно этим набором нужных вам символов!
Я получил 8.7 килобайт шрифтового набора (формат woff2) - вместо того что было (22.4 килобайта) - разница впечатляет.

Но будьте внимательны - по этому апи он мне не отдал знак $ - и браузер его отобразил дефолтным шрифтом.


Конвертация .woff2 в .woff формат:

А как же .woff формат? Как его получить? Быстрого решения в апи гугла я не нашел - я сконвертировал его здесь: transfonter.org
- загружайте ваш woff2 шрифт и отмечайте нужные форматы:

Конвертируем в .woff формат
Конвертируем в .woff формат

- и у нас на руках 2 формата шрифтов - новый .woff2 формат и старый .woff который понимают чуть устаревшие версии браузеров.


Способ редактирования шрифтов:

Так как я обломался с получением символов с гугла - я нашел программу-редактор шрифтов. Работает она с .woff форматом.
Это FontForge - бесплатная программа.

Как с ней работать:
1. Загружаете шрифт.
2. Сортируете по видимым глифам в тулбаре: "Кодировка" -> "Компактная".
3. Выбираете ненужный глиф и правой кнопкой - очистить:

Редактируем шрифтовой набор
Редактируем шрифтовой набор

Если он ругается: что какой-то уже на неё ссылается - оставляйте. После того как пройдете все доступные - пробуйте второй раз. Возможно уже освободится.

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


Пару замечаний по использованию:

- первые 3 пустых не удаляйте - они подписаны: null, возврат каретки и пробел. Да и если видите еще пустые - наведите курсор, как правило в шрифтах подписано что это и для чего. Лучше их оставить.
- удаляйте видимые символы (я удалил испанские, какие-то иероглифы, математические, что точно не использую - да и на клавиатуре их нет 🔎) и украинские и белорусские т.к. не пишу на этих языках)
- внимательней будьте с двумя точкам наверху (оказалось что это от буквы Ё 🙂 и аналогично верхняя от Й).
- последние "Г", "П", "К" у меня были - я их удалил (подумал дубли - выше были такие же и подписаны что кириллица) - в общем как вы поняли, именно эти 3 буквы у меня и пропали 😂


В целом стоит редактировать и проверять так:
- удаляем символы и буквы народов кириллицы.
- сохраняем: "Файл" -> "Создать шрифты"
- загружаем к себе на dev сайт.

Я создал отдельную запись, где перечислил все мне нужные символы и буквы в нижнем и верхнем регистре:

Мой набор для шрифта
Мой набор для шрифта

1. смотрел сначала на глаз:
- "не отсутствуют ли буквы?"
- "Ё, Й с верхней ли частью?"

2. отключая в body после
font-family:'Roboto',-apple-system,BlinkMacSystemFont,Consolas,Monaco,'Andale Mono','Ubuntu Mono',Trebuchet MS
шрифты замены (зачеркнутая часть) я смотрел какие шрифты "поплыли" (значит они изначально были системные)

3. Еще полезно в хроме, на вкладке elements, ткнуть по параграфу с текстом и посмотреть в самом низу computed (вычислено):

Проверим что наш набор отрендерился только с нашим шрифтом
Проверим что наш набор отрендерился только с нашим шрифтом

- там показывается в текущем параграфе шрифт (но можно было выбрать и весь родительский div). Если он там один и roboto - это хорошо. Если там 2 семейства шрифтов - стоит посмотреть что не вошло в ваш набор шрифтов и поэтому рендерится уже системным (взятым с вашей операционной системы)


Вторым этапом - вы можете уже частично подчищенный файл шрифтов открыть снова в редакторе и подчистить те глифы, что под сомнением. И повторить операцию с анализом на dev-сайте.

Аналогично с набором в 500, 700 начертанием (толщиной).

У меня получился следующий набор:

Я остановился на этом наборе глифов
Я остановился на этом наборе глифов

- возможно со временем я вернусь к нему и что-то тут изменится.


Конвертация .woff в .woff2 шрифт:

А в финале .woff формат перегоняем в современный .woff2 через webfont-generator

Формируем .woff2 формат
Формируем .woff2 формат

- выбирая "basic" опцию (я сильно не разбирался, но все другие мне ломали шрифты, за исключением 400 толщины. 500-я например у меня русские символы отображались как в 400-й)

Финальный тест на дев сайте font-weight: 500; - ставим 300, 400, 500, 700 - какой там у вас применяется толщины шрифты - чтобы всё отображалось нужной толщиной.


Выглядит замудрёно? Я потратил пол дня на сборы этой информации и эксперименты - теперь всё структурировал в этой записи.
Последний файл начертанием в 500 я довёл до финала за 10 минут - т.к. в одной запущенной программе у меня был финальный шрифт с 400 начертанием и я по нему сравнивал, открыл вторую копию программы и быстро вычистил лишнее.


Онлайн сервисы - увы, они кириллицу отображали не пойми как. И видать алгоритмы сжатия у них такие, что я получал нерабочий шрифт. Десктоп программа FontForge - отличное решение.


Результаты и метрики. Оно того стоило?

Так а что по метрикам? Они есть у меня!

В финале я получил:
roboto-custom-300.woff - 18648
roboto-custom-300.woff2 - 14144
roboto-custom-400.woff - 18728
roboto-custom-400.woff2 - 14244
roboto-custom-500.woff - 18732
roboto-custom-500.woff2 - 14172

В байтах. Т.е. в некоторых случаях мы получили на 35% меньший размер! Но это ещё не всё...


Правильное подключение шрифтов в 2019-м году

Теперь давайте рассмотрим как я подключил шрифты.
Руководств в сети много и я пополню ряды.

Подключать шрифты стоит в head сайта. Как inline css.
Ни в коем случает не подключайте шрифт внутри css файла. Браузеру придется значительно дольше ждать доступа - т.к. вначале должен загрузиться весь css файл и там много еще операций. Подробности читайте в руководствах гугла

Итак вот мое подключение:

<link rel="preload" href="http://мой-сайт/fonts/roboto-custom-400.woff2?ver=1.2" as="font" type="font/woff2" crossorigin>
<style>
@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(http://мой-сайтfonts/roboto-custom-300.woff2?ver=1.2) format("woff2"),url(http://мой-сайтfonts//roboto-custom-300.woff?ver=1.2) format("woff")}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url(http://мой-сайтfonts/roboto-custom-400.woff2?ver=1.2) format("woff2"),url(http://мой-сайтfonts//roboto-custom-400.woff?ver=1.2) format("woff")}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(http://мой-сайтfonts/roboto-custom-500.woff2?ver=1.2) format("woff2"),url(http://мой-сайтfonts//roboto-custom-500.woff?ver=1.2) format("woff")}
</style>

- 1 строчка:
Я подключаю основное начертание шрифта используя предзагрузку rel="preload" и .woff2 формат. Т.к. так получилось что и прелоад и этот формат понимают новые версии браузеров. А все кто не понимают - правила в инлайне строками ниже.

Если посмотреть на 4-й строке - то там я его также подключаю, но с фоллбеком - подключаю кроме .woff2 (идет первым) и .woff формат - это на случай если браузер не понимает этот стандарт.

crossorigin в 1-й строке - для того чтобы браузер не блокировал шрифт. Все остальное - обычные рекомендации гугла и в сети. Я не использовал font-display: fallback и его другие значения - т.к. на тестах в хроме они мне не дали ничего полезного. А вот моргание шрифта на момент загрузки - неприятное зрелище.

3 и 5 строчка - подключение начертания с 300 и 500 толщиной шрифта и что важно - они загрузятся по требованию. т.е. нет у меня на главной странице этого начертания (strong тега например) - то и 500 шрифт у меня там не загружается. Это полезная особенность.


Важна ли предзагрузка? Тестируем:

Предзагрузка rel="preload" дала мне ожидание по времени в 2 раза меньше (на моем быстром интернете. Интернет медленней - разница больше см. ниже) и шрифт шел на загрузку сразу после тела страницы - т.е. не был в очереди где-то внизу (как раньше).

Давайте покажу - до rel="preload":

Очередь загрузки без preload
Очередь загрузки без preload

А вот так увеличен приоритет загрузки:

Очередь загрузки с preload
Очередь загрузки с preload

- приоритет загрузки ресурса вырос и задержка на получение сократилась в 2 раза!

Почему важно быстро получить основной шрифт?

Это избавляет от "моргания" страницы - когда на мгновение (а то и секунды) вы видите текст отрендеренный системными шрифтами, а потом применяются ваши с сайта.

Подумаете - битва за миллисекунды нужна ли? Нужна! Это у меня 100 мегабитный интернет. А что будет на слабом 3G?

Давайте посмотрим сэмулировав у пользователя медленный интернет. Браузер это легко позволяет:

Смотрим на медленном соединении и без приоритета шрифта к загрузке
Смотрим на медленном соединении и без приоритета шрифта к загрузке

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

Финальный аргумент в пользу предзагрузки - посмотрим сколько ждет пользователь с высоким приоритетом шрифта:

Смотрим на медленном соединении - но с высоким приоритетом загрузки шрифтаСмотрим на медленном соединении - но с высоким приоритетом загрузки шрифта

- шрифт идёт в работу уже на 2-й секунде. разница в 7 раз! И я пытался увидеть дёрганье шрифта (кеш отключен) - не увидел. Просто загружена страница с веб шрифтами. Отрендеренная как надо.


Заключение:

Стоило оно того? Определенно "Да"!

Во первых это опыт. Во вторых - хотя браузеры еще не все воспринимают новые правила - но всё движется вперёд и новые стандарты принимаются. Отстающие браузеры догоняют. Это уже сейчас стоит применять т.к. отлично работает.

Кастомизация шрифтов. Я это применил на своем сайте и доволен результатом. Зачем загружать то, что никогда мной не используется? Конечно если это портал - там может это не подойти. Но тут я контролирую сайт полностью.

Ну и метрики - они улучшились после одного дня по изучению этого вопроса. Всегда приятно ускорить свой сайт.

Впереди очередь шрифта Rcl-awesome. Что из этого выйдет читайте в следующей публикации.

Комментариев нет

Оставьте комментарий

Авторизация
*
*
Регистрация
*
*
*
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Генерация пароля
Закрыть