Измерение производительности веб-шрифтов при загрузке страницы с помощью Font API, Boomerang и UserTiming API

Измерение производительности веб-шрифтов при загрузке страницы с помощью Font API, Boomerang и UserTiming API

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

В результате могут возникнуть такие проблемы:

Измерение производительности веб-шрифтов при загрузке страницы с помощью Font API, Boomerang и UserTiming API

Чтобы измерить, сколько времени требуется, чтобы каждый шрифт загрузился в документ клиента, нам понадобится Font Loading API. Запустив UserTiming API, можно измерить временные параметры загрузки страницы.

Сниппет

Здесь мы приведем небольшой скрипт, который получает доступ к document.fonts.ready и document.fonts.entries, чтобы измерить, сколько времени нужно для загрузки каждому шрифту по отдельности и всем шрифтам вместе:

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

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

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

После того, как мы добавим этот код на страницу, мы можем найти элементы UserTiming в консоли разработчика:

Измерение производительности веб-шрифтов при загрузке страницы с помощью Font API, Boomerang и UserTiming API

Великолепно! А теперь самое интересное: Собираем данные!

Запуск UserTiming

Используя Boomerang, мы можем собрать эти данные с помощью плагина UserTiming. Для этого нам понадобятся следующие 2 элемента в файле plugins.json во время сборки Boomerang для установки:

После того, как мы создали Boomerang с дополнительными плагинами, можно добавить на сайт сниппет boomerang и инициализировать Boomerang, после того, как он был загружен на странице с включенным Плагином UserTiming:

Теперь, когда мы готовы, можно использовать отладочную версию Boomerang и проверить консольный журнал логов, чтобы убедиться, что элементы UserTiming сжаты и отправлены.

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

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

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

Результаты

В консоли мы можем видеть, как Boomerang пересылает данные обратно на наш сервер:

Элементы usertiming=… – очень важны, так как они содержат нужные нам данные. Теперь вы можете использовать механизмы распаковки библиотеки UserTimingCompression c npm

Используя заданный в пакете файл cmd.js, мы можем вставить приведенную выше запись:

в файл типа compressed.txt и распаковать элементы:

Как видите, для каждого из FontFaces указывается временя отображения (здесь в startTime) в миллисекундах.

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

Дополнительно

Чтобы продемонстрировать вам доступность document.fonts, используемых на этой странице, ниже приводится таблица оценок для WebFonts:

Измерение производительности веб-шрифтов при загрузке страницы с помощью Font API, Boomerang и UserTiming API

Автор: Andreas Marschke

Источник: http://www.andreas-marschke.name/

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

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

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

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

Верстка-Мастер. От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля

Подробнее

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree