+7 (925) 507-98-19
к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»
В этой статье мы обсудим важный аспект ускорения загрузки сайтов: подключаемые шрифты. На сегодняшний день большинство сайтов с профессиональным дизайном используют подключаемые шрифты: по данным httparchive.org это 60% из популярных сайтов.
Причина популярности загружаемых шрифтов понятна: это одно из самых мощных средств выражения стиля сайта. Однако, использование таких шрифтов не бесплатно с точки зрения скорости.
Для оптимизации процесса рассмотрим два основных способа подключения шрифтов. Первый – размещение на собственном сервере, второй – использование сервиса Google Fonts.
Этот способ требует наличия файлов шрифтов на сервере рядом с сайтом. Адреса для загрузки в этом случае указываются относительно домена сайта, например: url('/fonts/pts-webfont.eot').
В этом способе для подключения шрифтов достаточно получить код на сайте Google Fonts и разместить в шаблонах сайта. По идее это простой и беспроблемный способ, но он имеет свои недостатки.
Нас больше всего интересует вопросы ускорения загрузки шрифтов и уменьшения их влияния на общий процесс загрузки сайта.
Основная проблема в том, что шрифты могут отложить отрисовку страницы или блоков текста на сайте. Существует несколько приёмов, которые позволяют получить максимальную производительность при использовании подключаемых шрифтов.
Самая логичная оптимизация: сократить количество байт, которые требуется передать для загрузки шрифта. Для этого есть несколько путей.
Большинство этих оптимизаций можно реализовать сервисами по конвертации шрифтов и настройками веб-сервера.
Ну и наконец, избавиться от шрифтов, которые выглядят как стандартные. Часто дизайнеры добавляют тонкие различия между шрифтами, хотя для обычного пользователя они неотличимы от обычных.
Если вы используете сервис для подключения шрифтов типа Google Fonts, то имеет смысл потратить немного времени и перенести шрифты на сервер. Дело в том, что для загрузки шрифтов через Google Fonts, браузер должен соединиться с еще одним сервером, загрузить с него CSS-файл и только потом подключиться к другому серверу для получения файлов шрифтов. Накладные расходы на эти подключения могут замедлить рендеринг шрифтов на сайте. Кроме того, функциональность сайта будет зависеть от стороннего бесплатного сервиса, качество работы которого никто не гарантирует.
Указание на файлы шрифтов нужно поставить как можно раньше в первом же CSS-файле, который будет загружаться.
Для полного контроля процессом загрузки шрифтов создана технология Font Loading API. На данный момент она поддерживается не во всех современных браузерах. С помощью этого API можно принудительно запускать загрузку шрифтов, управлять правилами показа контента до загрузки шрифтов и так далее. Подробнее об этом можно прочитать в руководстве для разработчиков Web Fundamentals.
Использование подключаемых шрифтов в вебе стало стандартом, поэтому необходимо внимательно относиться к вопросу их оптимизации. В статье даны конкретные рекомендации по ускорению сайтов с подключенными шрифтами, однако нужно помнить о необходимости тестировать все изменения на сайте как с точки зрения функциональности, так и скорости.
Заказывая профессиональное ускорение сайта в Метод Лаб, вы получаете качественную оптимизацию подключаемых шрифтов и не только.
