- PVSM.RU - https://www.pvsm.ru -
Бывало ли так, что вы видите на веб-странице картинки и оформление, но не видите текста — он появляется на пару (десятков) секунд позже? Это загружаются кастомные веб-шрифты. Объясняем, почему это происходит и как этого избежать.
Классический вопрос на собеседовании ops-инженеров и программистов: вы написали в адресной строке браузера meduza.io и нажали Enter. Что произойдет? (Ответ на 10 страницах [1])
Браузер посмотрит, есть ли для PFRegal объявление font-face. Если оно есть, то начнется загрузка файла шрифта. Что будут видеть читатели те секунды (десятки секунд на 3G), пока происходит загрузка?
В Safari: ваш текст будет занимать на странице место, но останется прозрачным, то есть невидимым для читателя. Для расчета занимаемого пространства используется fallback font (стандартный шрифт, в нашем случае Times New Roman), об этом чуть ниже.
В Chrome и Firefox 3 секунды прозрачного текста, далее используется системный fallback font.
IE не так уж и плох!
Все три подхода соответствуют стандарту [2]: „in cases where textual content is loaded before downloadable fonts are available, user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.“
Есть несколько способов:
Все эти способы нужны для того, чтобы показать текст как только он получен браузером, без задержки, используя один из шрифтов, доступных в стандартной поставке ОС (fallback font). Существует сервис [6] для подбора наиболее похожего fallback-шрифта.
Да, решая одну проблему мы создали другую. Теперь текст моргает при рефреше, шрифт меняется на глазах у читателя. Придется выбрать — что для нас важнее.
Мы в Медузе оптимизируем главную страницу для людей, открывающих ее по закладке в браузере: первое открытие медленное, последующие — мгновенные без моргания. Страницы материалов в основном открываются из соцсетей на телефонах, где кеша нет, и мы оптимизируем время появления текста на экране при первой загрузке.
Важно не забыть некоторые системные вещи:
Возможность сэмулировать плохой интернет. Good 3G — наш выбор для отладки Медузы
Сброс кеша по правой кнопке мыши (работает только если открыты Developer Tools)
А также суперзнание, как заблокировать загрузку определенного адреса или даже маску адресов в Хроме: включите Developer Tools Experiments в chrome://flags → Откройте Chrome Developer Tools → Настройки (спрятаны в трех точках в правом верхнем углу) → Experiments → Нажмите Shift 6 раз → Поставьте галочку Request blocking.
Теперь вы можете сделать вот так
Всегда пожалуйста. Вот свойство font-display [8], доступное в Chrome Canary. Оно решает все проблемы, перечисленные в статье. Ещё года 2–3 и можно будет вздохнуть спокойно.
Конечно! Сожмите файл шрифта, настроив его под себя. Вырежьте глифы, которые вы не используете в текстах (у Регала их по-умолчанию более 800). Отключите лишние Open Type Features [9]. Для всего этого вам потребуется специальный софт [1] [10], [2] [11] или [3] [12] и понимание того, как устроены шрифты.
Неправильно подключенный кастомный шрифт ухудшает время загрузки страницы, и это приводит к тому, что ваши страницы видит меньше людей, которые не дожидаются загрузки. Идеального способа подключения кастомных шрифтов в вебе пока нет, но есть достаточно хорошие хаки, из которых нужно выбрать наиболее подходящий для конкретной ситуации.
Автор: Meduza: dev
Источник [13]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/programmirovanie/215701
Ссылки в тексте:
[1] Ответ на 10 страницах: https://github.com/alex/what-happens-when
[2] соответствуют стандарту: https://www.w3.org/TR/css-fonts-3/#font-face-loading
[3] javascript-хак с invalid media type: http://keithclark.co.uk/articles/loading-css-without-blocking-render/
[4] Font Loading API: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#optimizing_font_rendering_with_the_font_loading_api
[5] Chrome и самым последним Safari: http://caniuse.com/#feat=font-loading
[6] Существует сервис: https://meowni.ca/font-style-matcher/
[7] Network Link Conditioner: https://developer.apple.com/download/more/?q=Additional%20Tools
[8] font-display: https://developers.google.com/web/updates/2016/02/font-display
[9] Open Type Features: https://www.microsoft.com/typography/otspec/featurelist.htm
[10] [1]: https://fontforge.github.io/en-US/
[11] [2]: https://birdfont.org
[12] [3]: https://glyphsapp.com
[13] Источник: https://habrahabr.ru/post/316640/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.