Ускорение загрузки шрифтов на сайте

Ускорение загрузки шрифтов на сайте

На сегодняшний день почти каждый сайт использует те или иные шрифты (включая иконки) для улучшения удобства коммуникации с пользователями и создания уникального стиля. Еще 20 лет назад на веб-сайтах сложно было встретить какие-либо шрифты кроме стандартного Times New Roman или Helvetica, сейчас же шрифты является неотъемлемой частью веба.

Кроме очевидных удобств использования шрифты создают до 50% дополнительного времени ожидания при загрузке (отрисовке) первого экрана сайта. Мы уже разбирали как оптимизировать загрузку шрифтов на сайте, в этом материале подробнее поговорим, что дополнительно можно внедрить уже после проведенной оптимизации для улучшения ситуации со скоростью сайта.

Краткая история веб-типографики

Началось все в 1995 году, когда Netscape добавил поддержку тега font и возможность стилизовать текст страниц с помощью системного шрифта. Это позволило использовать порядка 10 различных шрифтов во всех браузерах. В 1997 году Internet Explorer добавил поддержку загружаемого шрифта в формате EOT (который был всеми отвергнут), это положило начало использованию @font-face в том виде, как мы его знаем сейчас.

Следующие 10 лет разработчики стандартов были сфокусированы на более глобальных вещах, поэтому рядовым веб-мастерам приходилось «изобретать велосипеды». Наиболее распространенной техникой «специальных» шрифтов на страницах сайта стали подмена изображениями, FLIR, (да-да, создавалась сотня изображений с «глифами» дизайнерского шрифта, которая использовалась для стилизации заголовков), Cufon (когда использовался JavaScript и векторная графика в связке SVG + VML) и sIFR на Flash. Последний подход работал в большинстве браузеров того времени, ибо поддержка Flash была очень широкой (вплоть до 98% в лучшие годы).

В 2006 году CTO Opera, Hakon Wium, развернул целую кампанию против использования формата EOT для веб-шрифтов, поскольку Microsoft закончила поддерживать развитие этого формата в 2002 году. В результате, в большинство браузеров была добавлена поддержка альтернативных, типографских, форматов, TTF и OTF, и к 2009 году использование font-face, практически, было утверждено в текущем варианте: множество различных форматов для разных браузеров.

Последней вехой в 2010 году стало появление формата WOFF, Web Open Font Format, который смог собрать лучшее из TTF и OTF, включая сжатие «из коробки» и дополнительные мета-данные, и запуск сервиса Google Fonts, который стал стандартом «де факто» для подключения нестандартных шрифтов.

Почему веб-шрифты такие медленные?

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

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

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

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

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

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

Веб-разработчики ввели несколько сокращений, описывающих ситуации при загрузке шрифтов на сайте. Это FOIT (Flash of Invisible Text) – невидимый текст на странице по причине отсутствия шрифта в браузере для его отображения (в некоторых случаях сводится к появлению квадратов на месте иконок), FOUT (Flash of Unstyled Text) – отрисовка текста в неверной (запасной) гарнитуре по причине отсутствия шрифта и FOFT (Flash of Faux Text) – отрисовка текста в поддельной гарнитуре (лже-наклонной и лже-полужирной), базирующейся на обычном начертании шрифта при отсутствии специальных начертаний.

Механизмы работы с порядком загрузки шрифтов в браузере уже достаточно хорошо описаны, поэтому приведу конечную схему:

Speed_1

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

Практические рекомендации

Для избежания FOIT на странице, минимизации времени FOUT или FOFT необходимо к загрузке файлов шрифтов применить следующие меры:

  1. Добавить во все не-иконочные определения запасные варианты, максимально соответствующие нужной гарнитуре. На текущий момент кроме большого набора «стандартных» шрифтов браузеры также поддерживают общие начертания serif (с засечками), sans-serif (без засечек), monospace (моноширинные), cursive (от руки), fantasy (декоративные). Каждое назначение гарнитуры в CSS (через правила font*) должно оканчиваться одним из них. Например:

  1. Добавить в директиву для @font-face правило моментального отображения текста при наличии запасного варианта шрифта (это подойдет для не-иконочных шрифтов):

  1. Лучшей техникой для наискорейшей загрузки файла шрифта в браузере является тег preload, это позволяет обеспечить готовность файлов шрифтов к моменту отрисовки страницы (после загрузке стилей и блокирующих скриптов). Он поддерживается 68% браузеров (https://caniuse.com/#search=preload). Например:

  1. Для эмуляции preload в оставшихся 30% браузеров и более строгого кэширования шрифта через localStorage можно использовать предварительную загрузку шрифта через XHR. Скрипт, если его вставить в самом верху страницы, в head, позволяет обеспечить вызовы необходимых файлов шрифтов и кэширует их в localStorage. Предварительно файлы шрифтов (правила стилей) должны быть конвертированы в base64 для кэширования в localStorage (бинарные данные не удастся использовать). При использовании этого подхода нужно теги preload обернуть в <noscript> для исключения двойной загрузки шрифта.
  2. Для устранения FOIT для иконочных шрифтов можно использовать Font Face Observer и дополнительно ввести CSS класс для загруженного шрифта, инициализирующий font-face правило и назначаемый на html или body. В этом случае без наличия шрифта в браузере не будут отрисованы квадраты вместо иконок, а сразу после загрузки шрифта иконки появятся на странице.
  3. Для уменьшения времени FOUT при загрузке всех начертаний гарнитуры (нормальное-полужирное, нормальное-наклонная, полужирное-наклонное и т.д.) можно использовать FOFT и прописать основной шрифт единственном в нормальном начертании в другой font-family: в примере LatoInitial. После проверки загрузки всех остальных начертаний (можно в асинхронном режиме) через Font Face Observer применяются классы, исправляющие ложные начертания шрифта на корректные.

Вопрос использования FOFT для ускорения отображения текста является дискуссионным (во многих случаях проще положиться на запасные шрифты), но может помочь вам в ряде контентных проектов.

Источник

Отправить ответ

Please Login to comment
Войти с помощью: 
  Subscribe  
Notify of
Authorization
*
*
Войти с помощью: 
Registration
*
*
*
Войти с помощью: 

6 + twelve =

Password generation