Главная страница Публикации Статьи Ускорение сайтов: оптимизация шрифтов

Ускорение сайтов: оптимизация шрифтов

Ускорение сайтов: оптимизация подключаемых шрифтов

к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»

В этой статье мы обсудим важный аспект ускорения загрузки сайтов: подключаемые шрифты. На сегодняшний день большинство сайтов с профессиональным дизайном используют подключаемые шрифты: по данным httparchive.org это 60% из популярных сайтов.

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

Способы подключения шрифтов

Для оптимизации процесса рассмотрим два основных способа подключения шрифтов. Первый – размещение на собственном сервере, второй – использование сервиса Google Fonts.

Локальное размещение шрифтов

Этот способ требует наличия файлов шрифтов на сервере рядом с сайтом. Адреса для загрузки в этом случае указываются относительно домена сайта, например: url('/fonts/pts-webfont.eot').

Использование сервиса Google Fonts

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

Оптимизация процесса загрузки шрифтов

Нас больше всего интересует вопросы ускорения загрузки шрифтов и уменьшения их влияния на общий процесс загрузки сайта.

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

Сокращение объема файлов шрифтов

Самая логичная оптимизация: сократить количество байт, которые требуется передать для загрузки шрифта. Для этого есть несколько путей.

  1. Использовать наиболее продвинутый формат WOFF2 (до 30% экономии).
  2. Для форматов TTF, EOT, SVG использовать gzip-сжатие.
  3. Собирать шрифты только из необходимых наборов символов и начертаний.
  4. Установить кеширующие заголовки для файлов шрифтов с большим сроком хранения.
  5. Для редких случаев (заголовки, логотип) можно формировать файлы шрифтов по отдельным символам.

Большинство этих оптимизаций можно реализовать сервисами по конвертации шрифтов и настройками веб-сервера.

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

Сохранение шрифтов на сервере с сайтом

Если вы используете сервис для подключения шрифтов типа Google Fonts, то имеет смысл потратить немного времени и перенести шрифты на сервер. Дело в том, что для загрузки шрифтов через Google Fonts, браузер должен соединиться с еще одним сервером, загрузить с него CSS-файл и только потом подключиться к другому серверу для получения файлов шрифтов. Накладные расходы на эти подключения могут замедлить рендеринг шрифтов на сайте. Кроме того, функциональность сайта будет зависеть от стороннего бесплатного сервиса, качество работы которого никто не гарантирует.

Указание на файлы шрифтов нужно поставить как можно раньше в первом же CSS-файле, который будет загружаться.

Тонкие оптимизации: Font Loading API

Для полного контроля процессом загрузки шрифтов создана технология Font Loading API. На данный момент она поддерживается не во всех современных браузерах. С помощью этого API можно принудительно запускать загрузку шрифтов, управлять правилами показа контента до загрузки шрифтов и так далее. Подробнее об этом можно прочитать в руководстве для разработчиков Web Fundamentals.

Выводы

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

Заказывая профессиональное ускорение сайта в Метод Лаб, вы получаете качественную оптимизацию подключаемых шрифтов и не только.

Лучшее ускорение сайтов в Рунете

Ускорение сайтов

Цена от 19 900 Р