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

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

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

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

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
Кейс: как продвинуть сайт производителя мебели на заказ в Москве
Art Moderator
2
комментария
0
читателей
Полный профиль
Art Moderator -
Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
Гость
1
комментарий
0
читателей
Полный профиль
Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
«Баден-Баден»: как выйти из-под фильтра
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Здравствуйте! У меня совсем новый сайт (около месяца). Как только добавила страницы - были на 64, 45 и т.д. местах в выдаче яндекса по нч и сч запросам, но через несколько дней улетели за пределы 200. Что это баден - баден или песочница? Текст вроде не спамный, но мне трудно судить. Сайт portretnazakaz.ru
Второе дыхание ссылочного продвижения
Rookee.ru
24
комментария
0
читателей
Полный профиль
Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
32 инструмента в помощь SEO-специалисту
Cynthia Morgans Funding
1
комментарий
0
читателей
Полный профиль
Cynthia Morgans Funding - Мы предоставили более 1 миллиарда долларов бизнес-кредитов более чем 15 000 владельцев бизнеса, как и вы. Мы используем нашу собственную технологию определения рисков, чтобы предоставить вам подходящий бизнес-кредит, чтобы вы могли развивать свой бизнес. Наши услуги быстрые и надежные, кредиты утверждены в течение 72 часов после успешного применения. Мы предлагаем кредиты от минимального диапазона от 10 000 долларов США до 500 миллионов долларов США. Мы предоставляем вам кредит с низкой процентной ставкой 2% и продолжительностью кредита от 1 до 30 лет, чтобы погасить кредит (безопасный и необеспеченный). Не держите свои финансовые проблемы в себе, чтобы вы не были владельцем долга или финансовым стрессом, поэтому вы должны быстро связаться с нами для решения ваших финансовых проблем. Это будет большой радостью для нас, когда вы будете финансово стабильны. E-mail: onlinefunding01@gmail.com
Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
Анатолий Шевчик
1
комментарий
0
читателей
Полный профиль
Анатолий Шевчик - +1097988
Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
Сергей Дембицкий «Sima-Land.ru»
22
комментария
0
читателей
Полный профиль
Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
Максим Мирошник
2
комментария
0
читателей
Полный профиль
Максим Мирошник -
Все, что нужно SEO-специалисту. Обзор инструментов
Администратор Сайта
1
комментарий
1
читатель
Полный профиль
Администратор Сайта - Шаришь в seo! Сервис реально хороший
«Прямая линия» с Артуром Латыповым: отвечаем на вопросы
God Koss
1
комментарий
0
читателей
Полный профиль
God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
321
Комментариев
262
Комментариев
234
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
86
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54
Комментариев
53

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