Стратегия загрузки шрифтов в eBay
Здравствуйте!
Дизайнеры любят красивые необычные шрифты, но разработчики знают, что кастомные шрифты опасны для UX из-за проблем с их загрузкой. Вот как разработчики eBay решили для себя эту проблему.
Использование кастомных шрифтов в вебе постоянно увеличивается последние несколько лет. По данным http://httparchive.org, 68% сайтов используют как минимум один кастомный шрифт. В eBay мы обсуждали возможность применения кастомных шрифтов некоторое время, но никогда толком к этому не стремились. Основная причина связана с влиянием на UX с точки зрения производительности. Но недавно ситуация изменилась.
Наши дизайнеры убедительно доказали, что кастомный шрифт дополняет наш новый брендинг, и после некоторой дискуссии мы согласились с тем, что в этом есть смысл. Тогда команда разработчиков разработала оптимизированную реализацию, которая не только использует кастомный шрифт, но и устраняет падение производительности при его использовании.
Этот пост — краткий обзор стратегии загрузки шрифтов в eBay.
Встречайте «Market Sans»
Наш новый шрифт по праву называется «Market Sans», чтобы отразить его связь с онлайн-магазином. Как можно увидеть на иллюстрации ниже, он добавляет не очень большую разницу в типографике, но в целом делает всю страницу элегантнее и создает уникальный внешний вид eBay. Взгляните на нашу главную страницу, где применяется этот шрифт.
Проблемы
Хорошо известен и документирован тот факт, что использование кастомных шрифтов имеет свою цену — некоторую потерю производительности. Часто они задерживают отрисовку текста на время загрузки, что критично для любой страницы. В посте «Performance and Usage Implications of Custom Fonts» от Akamai хорошо описаны проблемы, связанные с кастомными шрифтами. В целом все сводится к двум проблемам, независимо от браузера:
Как и ожидалось, дизайнеры и разработчики не были довольны таким компромиссом. Да, кастомные шрифты создают особое ощущение от бренда, но цена слишком велика. Кроме того, с точки зрения продаж, кастомные шрифты — хорошее, но необязательное улучшение, системные шрифты обладают достаточно хорошим качеством. Так что команде разработчиков предстояло придумать эффективный способ загрузки шрифтов с минимальным влиянием на производительность.
Стратегия
Наша стратегия достаточно проста — избегать FOUT и FOIT: использовать кастомный шрифт, если он уже доступен (то есть скачан и кеширован), иначе использовать системный шрифт.
К счастью, уже предложено улучшение CSS Font-Rendering, которое добавляет новый дескриптор к @font-face, названный font-display. Используя его, разработчики могут указывать, как должен отображаться шрифт, основываясь на том, как и когда он будет загружен и готов к использованию. Есть несколько вариантов font-display (посмотрите видео по этим вариантам: https://www.youtube.com/watch?v=-lPTshDcr7o), и один из них, который подходит нашей стратегии, называется 'font-display: optional'.
К сожалению, поскольку это относительно новое дополнение, оно еще не особо поддерживается браузерами, согласно информации caniuse.com. Так что пока дополнение не получило широкой поддержки, мы используем решение, основанное на возможностях localStorage, АПИ FontFaceSet и утилиты Font Face Observer в качестве резервного варианта при недоступности FontFaceSet.
Иллюстрация ниже демонстрирует схему работы:
В целом:
- Когда пользователь заходит на страницу, мы добавляем небольшой кусок CSS и JS в <head>. Кроме того, мы добавляем код внизу страницы, который реализует загрузку шрифтов.
- Код в <head> проверяет localStorage, если установлен флаг шрифта. В этом случае он сразу добавляет класс в корень HTML-документа, чтобы сообщить о необходимости загрузки кастомного шрифта. Страница рендерится с использованием «Market Sans», и это наилучший сценарий.
- Код внизу страницы тоже проверяет localStorage на наличие флага. Если флаг НЕ установлен, он вызывает загрузчик шрифтов в onload событии.
- Загрузчик скачивает шрифт, используя FontFaceSet, если он доступен, или Font Face Observer. Сам Observer загружается асинхронно при необходимости.
- Когда шрифт скачан, в localStorage устанавливается флаг. Нужно заметить вот что: даже если флаг установлен, мы не обновляем текущую страницу с новым шрифтом. Это произойдет на следующей странице, согласно сценарию шага 2.
Мы выложили код модуля на Гитхаб: https://github.com/eBay/ebay-font. Это небольшая утилита, которая работает как совместно с другими нашими модулями Skin, Marko и Lasso, так и самостоятельно. Мы надеемся, что вам пригодится этот модуль.
Компромиссы
Есть некоторые компромиссы при использовании этой стратегии.
Первая загрузка
Новый посетитель при первой загрузке увидит системный шрифт. При навигации или повторном визите он увидит уже кастомный шрифт. Это нормально, поскольку мы показываем кастомный шрифт с какого-то момента, и этот момент — второе посещение нового пользователя.
Приватный режим
Когда пользователь начинает новую сессию в приватном режиме, он видит системный шрифт. Однако на следующих страницах в рамках той же сессии он увидит уже кастомный шрифт. Исключение — Safari, но это будет исправлено. Мы не отслеживаем, как много пользователей попадают в эту категорию, но с этим пришлось смириться.
Очистка кеша
Есть редкие случаи, когда был очищен кеш браузера, но localStorage остался нетронутым. Вероятно, браузеры очищают кеш чаще, чем localStorage. В таких случаях пользователи могут получить проблему FOIT или FOUT, в зависимости от браузера. Это крайний случай, и достаточно редкий.
Команда согласилась, что такие компромиссы допустимы, учитывая неопределенное поведение при использовании стандартной загрузки шрифтов.
Заключение
Кастомные шрифты улучшают общий UX, но вы не должны платить за это задержкой в отображении важного контента. Каждой организации стоит выработать свою стратегию загрузки шрифтов, основываясь на собственных требованиях. Новое свойство CSS font-display упрощает эту работу. Вам стоит начать использовать его уже сейчас, даже учитывая слабую поддержку, и даже если у вас уже есть собственная реализация.
Огромное спасибо моему коллеге Raja Ramu за помощь в подготовке этого материала и публикации модуля ebay-font.
Перевод статьи «eBay’s Font Loading Strategy».