Давайте начнем с очевидного: есть много отличных постов при загрузке шрифтов (которые по какой -то причине, как правило, составляют 27 страниц) и используют Font-Display CSS Property, и … вы поняли идею. Все это Принять Статус -кво – что шрифты не могут загружать синхронно, как ваш CSS – и просто описать способы маскировать это.
Но это мой веб -сайт, и я точно знаю, какие шрифты нуждаются пользователю. Так почему я не могу попросить браузер поместить небольшой шрифт на критический путь, прежде чем страница вообще отобразится? Как инженер, я нахожу недостаток выбора разочаровывающим. 😠
У меня нет идеального духа, но этот пост излагает мои проблемы, запасное решение с помощью Base64, кодируя ваши шрифты, и предложения на платформе. Для начала, вот фундаментальная проблема, показанная через анимацию.
В то время как есть варианты по этой проблеме, здесь происходит две вещи:
- “Emojityper” отображается с шрифтом системы сначала
- Загруженный шрифт – это больше чем системный шрифт – мы видим Смена макета , что мне платят мой работодатель, чтобы сказать вам, что это плохо (это это плохо, но мне также платят, чтобы сказать вам)
Решение статус -кво – использовать Font-Display CSS Property (и некоторые друзья). И, честно говоря, традиционный CSS может решить обе эти проблемы. Однако эти проблемы обычно решаются Не отображает оскорбительный текст до тех пор, пока его шрифт не появится – даже хотя остальная часть вашей страницы не будет отображена.
Самая разочаровывающая проблема здесь заключается в том, что эта «вспышка» занимает все несколько кадров-возможно, 50-60 мс. Это выбор, который я хотел бы: отложить рендеринг на небольшое количество времени. Мое мнение об этом UX заключается в том, что пользователи будут в большей степени восхищены страницей, готовой к ходу, а не одной, вызванной вспышкой, которая смущает глаза пользователя всего за миллисекунд. 👀
Тематическое исследование
На Developer.chrome.com На самом деле мы внедряем все наши таблицы стилей и изображения (в основном SVG) в HTML каждой страницы, чтобы уменьшить количество запросов и сделать страницу быстрее загружаться. Мы действительно довольны этим решением, потому что для большинства пользователей их сеть доставит весь этот сингл Полезная нагрузка невероятно быстро.
Несмотря на это явное дублирование активов на каждой странице HTML, наши шрифты все еще идут в сеть, и новые пользователи все равно увидят вспышку.
Загрузка в целом
Для получения фона при загрузке см. Мой Недавний интерактивный пост Анкет TL; DR из этого поста в том, что только То, что может заблокировать страницу от рендеринга, – это загрузка внешнего CSS. А для шрифтов ваш браузер асинхронно загрузит шрифт, когда необходимы глифы из него – например, для заголовка шрифта этого блога, это немедленно, но только после того, как таблица стиля впервые появилась.
Здесь я на самом деле использую две хитрости, чтобы получить шрифт ранее (хотя ни один из них не предотвращает смену вспышки и макета):
- Я использую
<ссылка .../>Чтобы запрашивать шрифт на раннем этапе, хотя это помогает только в том случае, если у вас есть внешний файл CSS (если он вставлен в - Я также отправляю шрифт через HTTP2 Server Push до Любой HTML идет к пользователю, хотя кажется, что поставщики браузеров устраняют поддержку из -за неправильного использования
Независимо от того, что вы думаете в этом посту, предварительная загрузка вашего шрифта – хорошая идея. Modern HTTP очень хорош в отправке вам много файлов одновременно, поэтому, чем раньше шрифт вашего пользователя может получить в этом поезде, тем лучше. 🚂🚋🚋
Файлы шрифтов также должны быть Отпечатка пальца и навсегда кэшировал для будущих нагрузок. Я отступаю, но эта проблема загрузки – как и многие – только о 1 ST нагрузка. С появлением работников обслуживания мы, как веб -разработчики, практически полным контролем над пользователем 2 nd нагрузка.
Решения, сегодня
Это сложный. На самом деле мы можем включить в свой файл блокировки CSS шрифт, кодируя его, кодирующий его, который имеет ~ 33% накладных расходов. Здесь нет дополнительных сетевых запросов, и декодирование выполняется в блокировке.
@font-face {
font-family: 'Carter One';
src: url('data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAG74ABI...') format('woff2');
font-weight: normal;
font-style: normal;
}
Многие люди утверждают, что BASE64 – плохая идея Анкет Хотя в этом тематическом исследовании размер изображения не указан – около 220K – и автор в корне не согласен с моим утверждением, что шрифты может быть критическими ресурсами.
Здесь есть стоимость, как в пространстве, так и в время декодирования. Если вы собираетесь в Base64 на шрифт, чтобы избежать вспышки, как вы можете минимизировать стоимость?
Я считаю, что большинство латинских пользовательских шрифтов составляют около ~ 20 тыс., И я бы не стал основать 64 ничего значительно больше, чем это – поддерживать его на один шрифт. (Я бы использовал системный шрифт для текста тела и оставил собственный шрифт для ваших заголовков или текста героя.) Поместите декларацию шрифта в уникальный файл CSS, который навсегда кэширован. В отличие от остальной части вашего CSS, который вы можете изменить, шрифт не изменится со временем.
Только корабль woff2— 95%+ пользователей иметь поддержку
Это продвинуто, но если вы можете контролировать то, что ваш пользователь получает на их 2 nd нагрузка (например, через сервисного работника), тогда вы мог Подайте пользователю настоящий, кэшированный WOFF2, а затем используйте только его для повторных нагрузок.
Анти- узоры
Есть и другие способы, чтобы пользователи не видели никакой части вашей страницы перед загрузкой шрифтов. Но они собираются привлечь JavaScript, и это просто кроличья дыра, которая увеличивает сложность вашего сайта очень быстро Анкет 📈
Вы можете отметить каждую часть вашей страницы как скрытую через класс CSS, а затем удалить ее только после того, как вы увидите шрифт. Вы можете сделать это через Загрузка шрифта API или буквально измеряя размер рендеринга теста Пока это не изменится. Это не хорошие решения.
(Это то, что я с радостью делаю на Santa Tracker , но у нас буквально есть экран загрузки, Lead in к медленной нагрузке, и весь сайт требует JS. Это не подходит для сайты ..
Стандарты просьба
В прошлом году было предложено добавить Приоритетные намеки . Прямо сейчас это предложение Просто Для подсказок о важности сетевого трафика.
Но, возможно, это может включать выбор подсказки критический который сообщает браузер, что эта предварительная нагрузка Мэй Блок -страница рендеринг – если она прибывает быстро, конечно.
Это позволило бы разработчику на основе стандартов выбор и поскольку это чисто аддитивный атрибут, будет разумный запасной удар для неподдерживаемых браузеров (то есть, чтобы вообще не заблокировать страницу). Также есть широкий спектр ресурсов Вы можете предварительно загружать , так что это может быть универсальный инструмент. ⚒
Резюме
Я нахожу отсутствие контроля над разочарованием загрузки шрифтов, и использование Base64 для небольших шрифтов может помочь вам, если эта проблема тоже вас расстроит. И если вы обнаружите, что пытаетесь предварительно загружать изображения аналогичного размера 🖼, чтобы заставить вашу страницу работать, это на самом деле один из самых больших признаков этого подхода может помочь вам-для меня этот шрифт так же важен, как и этот логотип сайта или кнопка навигации. 🍔
Чтобы быть ясным, это может быть стылка – Не загружайте страницу блоки в течение минут, потому что 100 тыс. Профессионалов не прибыли – используйте Base64, чтобы избежать вспышки или смену макета . Я не думаю, что это имеет смысл для каждого сайта. Я даже не уверен, что собираюсь реализовать эту стратегию в этом блоге.
Тем не менее, чтобы вернуться к Developer.chrome.com Пример из ранее, где мы с радостью встроены изображения и наши таблицы стилей. Я не думаю, что мы должны внедрить шрифты прямо на странице – они файлы ~ 20K, которые Никогда не меняй – Но перемещение их к синхронному, отпечатке пальцев (и навсегда кэширован), таблица стиля, включая только шрифт Base64 может быть на картах.
➡ Дайте мне знать, что вы думаете о Twitter Анкет
Оригинал: “https://dev.to/samthor/web-font-loading-the-status-quo-3mpb”