Оптимизация шрифтов
Разделяет большой шрифт на несколько файлов по языкам. Предоставляет кроссплатформенный CSS код, для их подключения.
Почему шрифты нужно оптимизировать?
Файл шрифта может содержать более тысячи символов. Помимо цифр и знаков препинания, в нём могут содержаться буквы для 10-15 языков. Но для отображения страницы достаточно 1-2 языков и 150-180 символов.
Поэтому и нужно оптимизировать файлы шрифтов, чтобы в них содержались только то, что реально используется на сайте.
Насколько это ускоряет сайт?
Вы выиграйте до 0.4 секунды. Учитывая, что хорошие страницы должны загружаться быстрее 2 секунд, то это 20%. Такое ускорение может увеличить конверсию для мобильных посетителей на несколько процентов. Это просто подарок, учитывая, что вся работа займёт не более пары часов.
Пример оптимизации популярных шрифтов. Сравнивается скачанный с fonts.google.com файл в ttf формате с оптимизированными в сервисе woff2:
| Исходный | Русский | Английский | Немецкий | Французский | |
|---|---|---|---|---|---|
| Roboto-Regular | 168.3 КБ | 15.4 | 15.4 | 16.1 | 17.5 |
| OpenSans-Regular | 129.8 КБ | 14 | 14.2 | 14.8 | 15.6 |
| Ubuntu-Regular | 299.7 КБ | 27.2 | 25.7 | 26.8 | 28.9 |
| Lato-Regular | 75.2 КБ | 7.1 | 14.5 | 15.3 | 17.2 |
Сравнивается использования CDN сервиса google fonts с файлами, оптимизированными в сервисе на обычной странице с русским и английским текстом. Формат Woff2.
| Размер файлов | Количество файлов | |
|---|---|---|
|
CDN сервис -Roboto cyrillic regular -Roboto latin regular |
15.74 КБ 9.63 КБ Всего 25.37 КБ |
2 |
| Комбинированный файл с кириллицей и латиницей вместе | 21.6 КБ | 1 |
Какие браузеры поддерживаются?
Все файлы шрифтов генерируются в 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 года.
Как использовать оптимизированные файлы?
Загрузите их на свой сервер. Затем замените текущий CSS код подключения шрифта на предоставленный. Убедитесь, что пути до файлов шрифтов корректные. Затем замените название шрифта в аттрибуте «font-family» на новое значение во всех своих CSS файлах. Если у вас возникли трудности, то обратитесь к программисту.