Оптимизируем шрифты: 9 шагов к быстрому сайту

Россия+7 (495) 960-65-87
Шрифт:
1 12801

Шрифты на сайте (отличные от стандартных) — это «серебряная пуля» дизайнеров и огромная головная боль разработчиков. Шрифты легко позволяют сделать сайт уникальным, запоминающимся, но платой за эту является существенное ухудшение скорости загрузки сайта.

Как правильно подключить собственные шрифты и не навредить скорости сайта? Разбираем конкретные шаги, которые позволят это сделать.

1. Правильное подключение

Собственные шрифты сайта, скорее всего, отсутствуют в браузере пользователя. Поэтому необходимо указать дополнительные к загрузке файлы, в которых будет содержаться техническая информация о начертании шрифтов (символы — глифы, особенности совместного начертания символов и строк и другие данные). Как это часто бывает, для каждого браузера нужен свой файл — Google Chrome понимает формат woff и woff2 (наиболее продвинутые), старый Android понимает только TTF, а IE — eot.

Дополнительно можно учесть, что в редких случаях шрифт может быть уже установлен на устройство пользователя: в этом случае можно использовать директиву local. Развернутая CSS инструкция, подключающая соответствующий шрифт на сайте, будет выглядеть примерно так (используем различные форматы для «попадания» в разные браузеры):

@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format('woff'),
url('/fonts/awesome.ttf') format('ttf'),
url('/fonts/awesome.eot') format('eot');
}

В этом случае все файлы шрифтов размещаются на хостинге. Для поддержки всех браузеров обычно используется набор файлов шрифтов для каждого начертания (гарнитуры). Его можно создать, например, через Font Squirrel: сервис автоматически предоставит CSS-код и набор файлов для размещения на сервере.

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

2. Обратная совместимость шрифтов

Для максимального ускорения отображения текста вашего сайта на любом пользовательском устройстве вы должны сообщить браузеру, какой запасное семейство шрифтов можно использовать, если ваш собственный шрифт недоступен (не загрузился еще или загружается неподдерживаемый формат). Для этого в директиве font-face после названия вашего шрифта нужно указать наиболее подходящую системную альтернативу с обязательным окончанием serif (шрифт с засечками), sans-serif (без засечек) или monospace (равной ширины). Хотя обратная совместимость приводит к FOUT, но эта альтернативна лучше, чем невидимый на сайте текст (FOIT).

Но основную проблему с загрузкой собственных шрифтов это не решает: шрифты большие. Иногда слишком большие. И почти всегда они требуются, чтобы отобразить текст на странице (т.е. загрузка шрифта идет на стадии «белого экрана», максимально раздражая пользователей). Как это вылечить?

3. Инвентаризация шрифтов

Третий, и наиболее важный шаг в оптимизации – оставить только нужные шрифты. Инвентаризация шрифтов (удаление неиспользуемых на сайте или максимальная обрезка используемых и фактически используемых символов). Также нужно выбрать не только шрифты, но и их варианты (обычный, курсив, полужирный).

Оптимизация размера шрифтов состоит из трех базовых вещей: обеспечить обратную совместимость, включить сжатие и устранить неиспользуемые глифы. Перед проведением оптимизации конкретных файлов нужно пересмотреть набор используемых нестандартных шрифтов и оставить только те, которые реально нужны для сайта.

4. Использование Google Fonts API

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

fonts API.jpg

Google Fonts API позволяет загрузить только нужные варианты щрифта, а также загружает шрифты по наборам символов (позволяет браузерам не загружать полностью шрифт, если не все глифы требуются для отображения страницы). Среди дополнительных возможностей стоит отметить и параметр text={letters}, который обрезает символы в загружаемом шрифте строго до заданных (если шрифт используется только для логотипа, это может быть очень ценно).

5. Уменьшение размера шрифтов

Если вы используете статическое сжатие, то достаточно подготовить архивы с файлами шрифтов и разместить их рядом с файлами шрифтов. При динамическом сжатии проверьте, что все основные форматы шрифтов — EOT, TTF, OTF, SVG, WOFF и WOFF2 — отдаются с хостинга сжатыми (проверка сжатия). Если это не так, то нужно добавить требуемые расширения или типы файлов в правила сжатия. Gzip (или zopfli) сжатие позволяет сократить размер шрифтов на 15-50%.

6. Удаление глифов

Для отображения текста на сайте обычно требуются далеко не все символы, включенные в шрифт по умолчанию. Часть из них относится к другому языку (например, к китайскому), часть — к специальным символам, которые вы не используете. Существует большое количество инструментов для удаления из шрифтов неиспользуемых глифов и утилиты по Windows / Mac. Наиболее популярные — это сервис Font Squirrel (в режиме Advanced), а также Subset.py и FontPrep. Также Google Fonts позволяет загружать только используемые наборы символов. Этот метод оптимизации позволяет сократить результирующий файл еще на 10-50%.

В совокупности, все указанные методы оптимизации размера подключаемых шрифтов позволяют существенно ускорить отображение сайта на всех устройствах, независимо от красоты используемых шрифтов и неплохо автоматизируются: например, в облаке Айри.рф сокращается размер поступающих с хостинга шрифтов на 20-80%.

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

Есть несколько подходов, позволяющих применить некоторую «магию» к загрузке шрифтов, чтобы до минимума снизить негативные эффекты.

Первое – это жесткое кэширование файлов (для обычных пользователей) и base64-представления (в localStorage, для мобильных пользователей). Прием работает только для вернувшихся на сайт пользователей, но для них позволяет существенно сократить время загрузки ( Детальная инструкция по использования localStorage).

8. Font Loading API

Второе – использование Font Loading API (поддерживается не всеми браузерами). При первичной загрузке страницы можно показать текст в установленном у пользователя шрифте, асинхронно загрузить нужный шрифт – и потратить несколько десятков миллисекунд (почти невидимое «подвисание» браузера) на перерисовку страницы по готовности шрифта. Существуют библиотеки для автоматизации процесса, одна из них представлена здесь.

9. Предзагрузка шрифтов

И, наконец, предварительная загрузка шрифтов (если они используются не с первой страницы у пользователей: например, в личном кабинете). Для этого подойдет техника prefetch, которая уже очень хорошо поддерживается браузерами: http://caniuse.com/#feat=link-rel-prefetch.

Для более глубокого погружения в тему рекомендую к прочтению статью от Google на тему оптимизации шрифтов.

Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
Анна Макарова
335
комментариев
0
читателей
Полный профиль
Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
32 инструмента в помощь SEO-специалисту
luthorscorploanfirm
2
комментария
0
читателей
Полный профиль
luthorscorploanfirm - Я - г-н Марк Джо из корпорации corp, мы являемся законной, зарегистрированной и гарантированной кредитной компанией, мы предоставляем 3% -ые кредиты частным лицам, компаниям, государственным учреждениям и деловым организациям и людям всех родов. Свободные кредиты - это решение всех ваших финансовых проблем. свяжитесь с нами по электронной почте: mjoe0123@gmail.com
SEO глазами клиентов 2018
Гость
1
комментарий
0
читателей
Полный профиль
Гость - То есть *** пойми кто подался заявками и в итоге рейтинг должен называться seo глазами клиентов *** пойми каких компаний. Молодцы!
Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
Александр Сова
1
комментарий
0
читателей
Полный профиль
Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
Кирилл Щербаков
3
комментария
0
читателей
Полный профиль
Кирилл Щербаков - "даже пришлось подключить отслеживание звонков с сайта" "Даже" - как будто это что-то нереальное
Два идеальных способа разориться на старте интернет-магазина
Стас
4
комментария
0
читателей
Полный профиль
Стас - Seonews в последнее время такую чушь несет! Где вы таких афторов находите? Статья ничего не стоит и несет чушь! Кто хоть немного понимает в этом так вам и скажет, и такие де комментаторы горе-сеошники, просто смешно читать, вы хоть модерируете ваши статьи или просто для воды на сайте?! Бред сивой кобылы эта статья до самой последней точки!!!
Эксперимент: как уникальность контента влияет на продвижение сайта
Ilia Nazmutdinov
2
комментария
0
читателей
Полный профиль
Ilia Nazmutdinov - Кстати, ПФ не работают на нулевом трафике. Пока на сайт не льются тысячи показов по одним и тем же запросам влияние оказывает ток ссылочное\внешнее и внутреннее\ и внутренняя оптимизация.
Яндекс перестал индексировать сайты, созданные на Wix
Константин Даткунас
3
комментария
0
читателей
Полный профиль
Константин Даткунас - Было бы интересно посмотреть саму выборку из 10 000 и методику анализа.
Расчет трафика из поисковых систем по брендовым и небрендовым запросам
Дарья Калинская
238
комментариев
0
читателей
Полный профиль
Дарья Калинская - А вот и статья :) www.seonews.ru/analytics/raschet-trafika-po-nebrendovym-zaprosam-pri-pomoshchi-r/
Как мы разработали и вывели в ТОП сайт курсов рисования
Иван Стороженко
25
комментариев
0
читателей
Полный профиль
Иван Стороженко - Добрый день. 1)Чаще всего основная проблема заключается, в согласовании с клиентом добавляемого контента и то как он будет отображаться. На данном сайте фото и услуги конечно предоставлял клиент, все остальное уже делали мы. 2)Да в принципе, когда есть команда и понимание, что нужно делать, все идет быстро (опять же основная заминка идет на согласовании с клиентом) 3)Смысла делать новый в данном случает нет. В принципе доделывался полноценный сайт. 4)Когда клиент уже не предоставляет информацию, приходится искать у конкурентов (например с других стран или регионов). Но чаще всего клиент, хоть что-то "подкидывает".
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
335
Комментариев
262
Комментариев
238
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
87
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
58
Комментариев
57
Комментариев
55
Комментариев
54

Отправьте отзыв!
Отправьте отзыв!