3 подсказки для быстрой загрузки шрифтов

3 подсказки для быстрой загрузки шрифтов

От автора: наверное, в наши дни веб-шрифты — большая вещь. Большинство из нас знают, как нынче писать @font-face декларации. Вы знаете все о WOFF и WOFF2, возможно, немного о подмножестве или, возможно, даже о font-display для более доступного предоставления текста. Черт, может, вы просто возьмете link тег из Google Fonts и уйдете? В любом случае, вот три подсказки, с которыми вы, возможно, еще не сталкивались. Они помогут сделать так, чтобы загрузка шрифта была быстрой.

Хост-шрифты на вашем собственном сервере

Большинство из нас берёт фрагмент link Google Fonts и уходит. Справедливости ради, это то, что я делал довольно долгое время, но моя стандартная позиция при загрузке сторонних ресурсов с тех пор перешла на одно из соображений. Конечно, сторонние ресурсы извлекают выгоду из CDN, которые минимизируют задержку для конечного пользователя. Это, конечно, здорово, но я мог бы так же легко поместить все активы моего сайта за CDN и сам принять их.

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

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

Сторонние службы предоставляют меньше контроля над содержанием @font-face декларации, потому что CSS контролируется и размещается на стороне. Правда, такие сервисы, как Google Fonts, немного смягчают этот параметр с помощью параметров строки запроса, которые позволяют вам делать косвенные изменения в CSS, который они предоставляют. Но отсутствие полного контроля над вашими @font-face средствами означает, что у вас будет меньше гибкости.

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

Несмотря на вышеприведенные преимущества, могут быть случаи, когда наилучшая практика вашей организации в области развития предусматривает использование стороннего поставщика. Или время является ограничивающим фактором. Или EULA не позволяет размещать свои собственные шрифты. Если это описывает вашу ситуацию, вы должны приложить немного усилий на смягчение потенциальной задержки. Скажем, у вас есть типичный код Google Font для вставки в head. Вы можете свести к минимуму время, необходимое для подключения к этому серверу с помощью preconnect подсказки ресурса:

Более широко совместимой альтернативой preconnect является dns-prefetch. Он не установит соединение с сервером, но разрешит DNS для указанного хоста, который все еще может немного ускорить работу:

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

Агрессивные подмножества шрифтов

Когда мы берём подмножество шрифтов, мы часто делаем это по диапазонам Unicode, которые охватывают целые системы надписей. Латинский, латинский Extended, кириллица и т.д. Что делать, если вы используете предельно ограниченное количество шрифтов в дизайне? Особенно в элементах дизайна, которые редко (если вообще когда-либо) меняются? Вот похожий случай в моем блоге:

3 подсказки для быстрой загрузки шрифтов

Это заголовок в моем блоге. Семейство шрифтов, используемое для текста «WEB DEV BLOG», Monoton, и эта копия в заголовке сайта является единственным местом, где этот шрифт когда-либо используется. Этот вид элемента дизайна точно выиграет у агрессивного подмножества: он никогда не меняется и использует небольшую часть глифов, которые может предложить этот шрифт.

«Почему бы просто не заменить его изображением?» — это аргумент считывателя, который я ожидаю в ответ на эту стратегию. Это потенциальный вариант (при условии, что разумный alt текст является частью решения), но я бы скорее закодировал этот элемент дизайна как текстовый узел, чтобы роботы / искатели / считыватели экрана могли как можно проще его разглядеть.
С другой стороны, если я вставляю латинское подмножество Monoton, используя link тег, предоставленный Google Fonts, я загружаю большое количество символов, которые вряд ли когда-либо будут использованы. В приведенной ниже таблице показано, сколько весит каждый формат латинского подмножества Monoton, предоставленный Google Fonts:

3 подсказки для быстрой загрузки шрифтов

* Использование gzip при установке уровня сжатия по умолчанию 6.

В лучшем случае я прошу пользователей загрузить файл шрифта WOFF2, который весит 16 КБ, и который использует только девять уникальных глифов. Конечно, мы можем сделать лучше, если будем агрессивно умножать этот шрифт на эти глифы. Но как? Эта часть довольно проста, если вы используете glyphhanger утилиту командной строки The Filament Group, плюс утилиту Python, которая называется pyftsubset (распределяется вместе с fonttools):

В этом примере мы используем pyftsubset для подмножества monoton.ttf в monoton-subset.ttf. Диапазоны юникода собираются путем выполнения glyphhanger внутри подкоманды, которая считывает содержимое chars.txt. Содержание chars.txt в моем примере — «WEB DEV BLOG». Когда glyphhanger заканчивается, у нас остаётся новое подмножество шрифтов TrueType, которое легче на 3,36 КБ. В этом случае это 10% от исходного латинского подмножества.

Конечно, шрифт TrueType является всего лишь одним из компонентов полного рецепта @font-face. Вам понадобится еще несколько форматов, чтобы всё заполнить. Чтобы сделать это, вы можете использовать ttf2eot, ttf2woff и ttf2woff2 программы Node CLI таким образом:

Это дает следующие размеры активов:

3 подсказки для быстрой загрузки шрифтов

* Использование gzip при установке уровня сжатия по умолчанию 6.

Конечно, вы можете использовать glyphhanger для анализа всего сайта и подмножества всех шрифтов на основе контента страницы. subfont это еще одно предложение, которое делает уверенную попытку решения этой проблемы. В настоящее время я работаю над версией unicode-ranger 2, которая использует Puppeteer для анализа содержимого страницы с разумной степенью точности. Хотя я бы предупредил, что unicode-ranger это незавершенная работа, и она не настолько зрелая, как glyphhanger и subfont.

Опять же, если вы не можете самостоятельно размещать свои собственные файлы шрифтов, создание крошечных подмножеств шрифтов может быть для вас плохим вариантом, но есть способы сделать это. Например, в Google Fonts есть функция, позволяющая выполнять динамическое подмножество, если вы добавляете текст через text параметр строки запроса в свой link тег google fonts. Если бы я хотел использовать Google Fonts для динамического подмножества шрифта Monoton таким же образом, как и в приведенном выше примере, я бы просто ввел следующее:

Памятка: не забудьте закодированоное URL значение, которое вы передаете через параметр text!

Отбор «симпатичных» шрифтов при наличии Save-Data

Вот интересный совет, о котором вы, возможно, еще не знаете, он включает в себя определение заголовка HTTP-запроса для Save-Data. Save-Data отправляется избранными браузерами, когда пользователи указали в своих предпочтениях, что они предпочли бы приложения, обеспечивающие более легкий опыт. Эта функция недоступна во многих браузерах за пределами Chrome на Android, но их пользователи представляют собой значительную часть всех веб-пользователей.

Один комментатор моей статьи CSS-Tricks, Šime Vidas, предложил отличный способ отбраковать «симпатичные» шрифты, когда присутствует Save-Data заголовок. Давайте рассмотрим пример того, как вы можете выполнить эту задачу. Для начала можно использовать язык back-end вроде PHP для проверки заголовка:

Этот код проверяет, установлен ли Save-Data заголовок через isset функцию. После того, как мы сохраним результат проверки этой переменной, мы сможем использовать ее для условного добавления no-save-data класса в body элемент следующим образом:

С такой логикой сервер будет посылать разметку с классом no-save-data на body элемент, когда Save-Data отсутствует. Затем можно писать стили, которые содержатся в пользовательских шрифтах, когда присутствует no-save-data класс:

С помощью этого CSS браузер не будет загружать шрифты, указанные в параметре @font-faceif, если свойство font или font-family в конечном итоге не вызывает их после определения каскада стиля. В этом примере <p> элемент по умолчанию использует общий шрифт sans-serif. Если браузер не отправляет Save-Data заголовок (а затем добавляет no-save-data класс к body элементу в коде PHP выше), то он предпочтет в использовании Open Sans. Ниже приведен пример этого в действии:

3 подсказки для быстрой загрузки шрифтов

Несколько более простое решение, не связанное с использованием классов CSS, могло бы включать в себя @font-face объявление в style тегах и исключение части (или всех) из них, если Save-Data присутствует. Чтобы быть совершенно ясным, я не имею в виду встраивание файлов шрифтов как URI данных, а только самих @font-faces.

И в заключении. Надеюсь, вы найдете для себя хотя бы один полезный совет. Если вы обнаружили некоторые возможности ускорить загрузку шрифтов прочитав мою статью, то я считаю, что не зря её написал. Счастливого кодирования, желаю навсегда избежать Comic Sans (если вы, конечно, не используете его специально).

Автор: Jeremy Wagner

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

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

Метки:

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

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