Улучшение пользовательского опыта с помощью правильной загрузки веб-шрифтов

Улучшение пользовательского опыта с помощью правильной загрузки веб-шрифтов

От автора: Webfonts — одна из первых вещей, которые мы добавляем на наши сайты — будь то индивидуальные или стилистические причины. К сожалению, это также печально известно тем, что наши сайты болезненно медленны и разочаровывают. Каков конечный результат? Разочарованные пользователи и множество потерянных возможностей для бизнеса. К счастью, за последние пару лет этому уделялось много внимания. Итак, давайте посмотрим на три лучших способа того, как осуществляется загрузка шрифтов на веб-сайты. Но сначала давайте коротко на одной странице поговорим о том, что может пойти и пойдет не так.

Три самые большие проблемы с Webfonts

Начнем с двух наиболее известных проблем: FOIT (Flash of Invisible Text) и FOUT (Flash of Unstyled Text). Позволю себе предположить, что вы все знаете, как и почему эти проблемы возникают, но на случай, если вы этого не знаете, вот очень краткое объяснение: когда браузер обнаруживает использование пользовательского шрифта, он ждет, когда веб-сайт загрузится перед рендерингом текста (т. е. FOIT). Если через ~ 3 секунды он еще не загружен, он отображает текст с резервным шрифтом (обычно это системный шрифт, например, Arial). Впоследствии, когда webfont загружен, резервный шрифт заменяется вашим webfont (т.е. FOUT). Почему это проблема? Поскольку веб-сайт может добавить более 2 секунд ко времени загрузки страницы, то он также можеть потерять до 50% посетителей.

Теперь к последнему вопросу, о котором люди не очень часто задумываются: «Сдвиг контента». Вы когда-нибудь читали статью, а через 5-10 секунд менялись шрифты, и все на странице прокручивалось, заставляя вас искать, где вы остановились? Да … супер-разочарование и еще один побочный эффект webfonts. Это происходит потому, что резервный шрифт, используемый браузером, и ваш webfont имеют разные показатели — буквы более широкие, более тонкие, короче или выше других. И каков результат? Все текстовое содержимое перемещается вверх или вниз, когда браузер переключается на использование вашего webfont. Эууу.

Методы загрузки шрифтов

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

Способ Amazon — легко и просто

Amazon очень хорошо знает, какие неудобства могут доставить их сайту webfonts, поэтому они разработали дьявольски простую, но эффективную технику загрузки шрифтов, избавляющую их от FOIT, FOUT и перемещения контента. Вот в чём заключается эта техника:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Позже в загрузку страницы сделать асинхронный запрос webfont, чтобы браузер кэшировал его на диск для дальнейшего использования. Они добиваются этого, используя свои собственные библиотеки, но вы можете добиться чего-то подобного, используя выборку или библиотеки вроде https://github.com/bramstein/fontfaceobserver

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

Улучшение пользовательского опыта с помощью правильной загрузки веб-шрифтов

При загрузке следующей страницы встроенная часть JS проверяет наличие этого localStorage объекта. Если это так, JS устанавливает класс в объекте body, который позволяет использовать пользовательский webfont. Так как на этой второй странице загружаемый webfont «должен» быть кэшированным, то, когда webfont используется, нет неровного текста и, следовательно, никакого смещения контента.

Итак, в чем же смысл этого метода? Он сильно зависит от очистки кэша браузера. К сожалению, согласно некоторым давним исследованиям, iOS-устройства тщательно очищают кэш-диск … а это означает, что вы столкнетесь с экземплярами, где localStorage указывает, что шрифт кэшируется, но устройство уже уничтожило его.

font-display: optional; способ будущего

Не только Amazon работает над тем, чтобы сделать webfonts лучше, но и комитет по стандартам! После нескольких лет работы и обсуждений мы имеем совершенно новое CSS свойство, которое дает нам контроль над тем, как браузер обрабатывает загрузку WebFonts: font-display.

Это тема, по которой я с лёгкостью мог бы написать целую статью, поэтому, чтобы сохранить эту краткую информацию, я хотел бы указать на раздел презентации Monica Dinculescu ( @notwaldorf ), который расскажет почти все, что нужно знать https://vimeo.com/241111413#t=1065 (или если вы предпочитаете читать, https://developers.google.com/web/updates/2016/02/font-display).

Как можно увидеть, есть много разных опций, но я настоятельно рекомендую использовать необязательный параметр, который говорит браузеру о том, чтобы сделать следующее: немедленно используйте веб-сайт, если он доступен. В противном случае используйте резервный шрифт до следующего просмотра страницы. Это не позволяет браузеру дождаться вашего webfont (нет FOIT) или заменяет его средним просмотром страницы (без FOUT или смещения содержимого).

Звучит здорово, но в чём уловка? Их две:

Только около 50% (по США, если смотреть по всему миру, дела обстоят получше) мобильных браузеров поддерживают эту функцию — вот где она важна: https://caniuse.com/#feat=css-font-rendering-controls

Свойство не может быть добавлено к определенному элементу, например html; оно должно быть добавлено в тег @font-face. Что это значит? Если вы используете что-то вроде шрифтов google, что наиболее важно, вам придется вручную создавать и редактировать @font-face css. Сложно? Нет. Утомительно? Немного.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

localStorage; Взяв дело в свои руки. Мой любимчик

Подобно Amazon, такие сайты, как The Guardian, очень серьезно относятся к загрузке шрифтов и разработали собственное решение трех проблем. Вот их процесс:

Загрузите на компьютер веб-сайты, которые вы используете, base64 / JSON закодируйте их и загрузите обратно на сервер. Назовите файлы как-то вроде Roboto.json

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

Как в методе Amazon, на половине страницы мы будем асинхронно извлекать закодированные нами кодированные base64 / json шрифты и сохранять их localStorage (см. Ниже). На первый взгля, это большое количествр данных для хранения … но даже 2-3 шрифта, закодированные таким образом, имеют тенденцию весить меньше 100 КБ.

Улучшение пользовательского опыта с помощью правильной загрузки веб-шрифтов

Теперь, когда у нас есть наш шрифт, на будущих загрузках страницы мы можем проверить наличие localStorage объекта, и, если он существует, нужно доюавить и вставить шрифт в тег стиля с помощью JS.

После того, как мы увидим, что введенный шрифт был добавлен, мы просто добавляем класс к объекту body (точно так же, как метод «Amazon»), указывающий, что наш webfont теперь доступен.

Итак, велика ли разница между методами Amazon и The Guardian? Поскольку мы сохраняем фактический шрифт, localStorage, а затем встраиваем его, у нас никогда не будет ложных срабатываний относительно присутствия нашего webfont. Кроме того, в качестве хорошего бонуса, ваша страница теперь также может использовать этот шрифт в автономном режиме. Однако одним из главных недостатков здесь является количество времени и инструментов, необходимых для его снятия.

Вывод

Итак, какой метод вы должны использовать для загрузки своих веб-сайтов? К сожалению, ответ будет таков:

Если вы ищете быстрый и простой метод, используйте метод Amazon

Если вам нужно что-то более тщательное и в ладах с ограниченной поддержкой браузера, попробуйте использовать font-display: optional

И если вы действительно хотите приложить усилия для оптимизации загрузки вашего веб-сайта, погрузитесь в localStorage технику

Но независимо от того, что вы выберете, теперь вы можете быть счастливы, что теперь вы являетесь веб-страницей справа (см. Ниже):

Улучшение пользовательского опыта с помощью правильной загрузки веб-шрифтов

Автор: David Fox

Источник: https://calendar.perfplanet.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Современные тенденции веб-разработки

За ближайшие 5 дней мы составим ваш пошаговый алгоритм профессионального роста с нуля в сайтостроении...

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree