Почему шрифты нужно оптимизировать?
Файл шрифта может содержать более тысячи символов. Помимо цифр и знаков препинания, в нём могут содержаться буквы для 10-15 языков. Но для отображения страницы достаточно 1-2 языков и 150-180 символов.
Поэтому и нужно оптимизировать файлы шрифтов, чтобы в них содержались только то, что реально используется на сайте.
Насколько это ускоряет сайт?
Вы выиграйте до 0.4 секунды. Учитывая, что хорошие страницы должны загружаться быстрее 2 секунд, то это 20%. Такое ускорение может увеличить конверсию для мобильных посетителей на несколько процентов. Это просто подарок, учитывая, что вся работа займёт не более пары часов.
Пример оптимизации популярных шрифтов. Сравниваются русский алфавит (не расширенный), стиль regular, скачанный с fonts.google.com файл в ttf формате, файл woff2 из CSS файла CDN сервиса вида 4iCs6KVjbNBYlgoKcg72j00.woff2 и оптимизированный в сервисе Оптимизация шрифтов woff2:
| Исходный ttf google | Сyrillic woff2 google | Наш woff2 файл | |
|---|---|---|---|
| Roboto-Regular | 164.32 КБ | 9.89 | 5.80 |
| OpenSans-Regular | 127.77 КБ | 10.86 | 6.60 |
| Ubuntu-Regular | 292.66 КБ | 20.37 | 6.59 |
Сравнивается использования CDN сервиса google fonts с файлами, оптимизированными в сервисе на обычной странице с русским и английским текстом. Формат Woff2.
| Размер файлов | Количество файлов | |
|---|---|---|
| CDN сервис | CSS файл 1.29 КБ Roboto cyrillic regular 9.89 КБ Roboto latin regular 18.10 КБ Всего 29.28 КБ |
2 шрифта + 1 CSS = 3 файла |
| Сервис Оптимизация шрифтов | Комбинированный файл с кириллицей и латиницей вместе 7.15 КБ | 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 файлах. Если у вас возникли трудности, то обратитесь к программисту.