Россия+7 (495) 960-65-87

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

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

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

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

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 на тему оптимизации шрифтов.

(Голосов: 3, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
Askar Seitov
1
комментарий
0
читателей
Полный профиль
Askar Seitov - помогите! не могу понять почему по инструкции в вашей статье добавляю вычистяемые поля просто копирую ваш код, но датастудио выдает ошибку на этот код: Синтаксическая ошибка: Недопустимый входной символ. Убедитесь, что в формуле нет кавычек-лапок.. как это исправить? я все варианты кавычек уже попробовал
#SEOnews14: мы празднуем – вы получаете подарки!
Rizat Sundetov
1
комментарий
0
читателей
Полный профиль
Rizat Sundetov - 14
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
1qa
1
комментарий
0
читателей
Полный профиль
1qa - 87 Performance 95 Accessibility 79 Best Practices 95 SEO аудит точнее будет
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Дмитрий
1
комментарий
0
читателей
Полный профиль
Дмитрий - Здравствуйте, на сайте возможно несколькими путями дойти до почти одинаковой страницы, те отличаться будет только незначительная часть H1, а контент будет одинаковым, дело в применимости автозапчастей к разным автомобилям. Что из этого будет каноничной ссылкой и какие есть пути для решения подобных ситуаций? 1 - bpauto.ru/catalog/audi/audi-a6/a6-iv-c7-sedan-2011-2014/kuzov-naruzhnaya-chast/dveri-i-komplektuyushchie/dver-perednyaya-levaya/ 2 - bpauto.ru/catalog/audi/audi-a6/a6-iv-c7-rest-sedan-2014-n-v-/kuzov-naruzhnaya-chast/dveri-i-komplektuyushchie/dver-perednyaya-levaya/
Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
aashutosh
1
комментарий
0
читателей
Полный профиль
aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
Как построить качественный ссылочный профиль на основе конкурентов
Ирина
5
комментариев
0
читателей
Полный профиль
Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
Как я пытался купить CRM-систему, но мне ее поленились продать
Kristina
1
комментарий
0
читателей
Полный профиль
Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
Чек-лист для аудита рекламных кампаний в Яндекс.Директе и Google Ads
Елена Бикташева
1
комментарий
0
читателей
Полный профиль
Елена Бикташева - Спасибо! Была бы еще возможность скачивания.
6 советов по продвижению сайта в Google
Алексей Махметхажиев
1
комментарий
0
читателей
Полный профиль
Алексей Махметхажиев - Спасибо за статью! Конечно, измерять одним только гуглом скорость нельзя. Я измеряю PageSpeed + GTmetrix + loading.express. Так же надо следить за скоростью ответат сервера. Я использую ping-admin им можно мониторить падения сайта тоже.
Google назвал три главных SEO-фактора
Павел Андрейчук
45
комментариев
0
читателей
Полный профиль
Павел Андрейчук - Я бы не стал утверждать что это так. У меня есть ресурс где ссылок.. ну я не знаю, полтинник может быть, вручную проставленные года за 2 и позиции хорошие по могим запросам именно в гугле, в то время как в Яндексе позиции ниже. Хотя конечно с ссылками позиции были бы лучше, наверное, но владелец увы не выделяет бюджет на ссылки.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
353
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
105
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
69
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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