Измерение производительности веб-шрифтов при загрузке страницы с помощью 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, чтобы измерить, сколько времени нужно для загрузки каждому шрифту по отдельности и всем шрифтам вместе:

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

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

Узнать подробнее
(function(w, d) {
  /**
 * Задаем оценку производительности для данного начертания шрифта со стилем, толщиной и растяжением
 * @param fontFace - FontFace объект, содержащий метаданные имени и стиля
 */
  function fontfacePromiseResolve(fontFace) {
 window.performance.mark([fontFace.family, fontFace.style, fontFace.weight, fontFace.stretch].join("_"));
  }

  /**
 * Если возникает ошибка, регистрируем ее как Error в консоли
 * @param err – объект Error
 */
  function exceptionHandling(err) {
 console.error(err);
  }

  // Убеждаемся, что Fonts API и `document.fonts.ready` доступны
  // Также убеждаемся, что window.performance.mark доступен для оценок UserTiming
  if (d.fonts && d.fonts.ready && window.performance && typeof window.performance.mark === "function") {
 try {

 // fonts.entries() – это итератор, который мы будем использовать, чтобы проследить загрузку каждого шрифта 
 var entries = d.fonts.entries(),
 valueIndex = 0;

 for(let entry of entries) {
 for (valueIndex = 0; valueIndex < entry.length; valueIndex++) {
 entry[valueIndex].loaded.then(fontfacePromiseResolve).catch(exceptionHandling);
 }
 }

 // document.fonts.ready – мы подключаемся к нему, чтобы определить,
 // что загрузка всех шрифтов завершена.
 d.fonts.ready.then(function(fontFaceSet) {
 try {
 window.performance.mark("FontsLoaded"); 
 }
 catch(ex) {
 exceptionHandling(ex);
 }
 }).catch(exceptionHandling);
 }
 catch(ex) {
 exceptionHandling(ex);
 }
  }
}(this, this.document));

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

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

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

Запуск UserTiming

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

{
  "plugins": [
 ...
 // UserTiming Compression
 "node_modules/usertiming-compression/src/usertiming-compression.js", 
 // UserTiming Plugin
 "plugins/usertiming.js", 
 ...
  ]
}

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

(function() {
  function hookBoomerang() {
 if (window.BOOMR && BOOMR.version) {
 if (BOOMR.plugins && BOOMR.plugins.UserTiming) {
 BOOMR.init({
 beacon_url: "/beacons",
 UserTiming: {
 enabled: true
 }
 });
 }
 return true;
 }
  }

  if (!hookBoomerang()) {
 if (document.addEventListener) {
 document.addEventListener("onBoomerangLoaded", hookBoomerang);
 } else if (document.attachEvent) {
 document.attachEvent("onpropertychange", function(e) {
 e = e || window.event;
 if (e && e.propertyName === "onBoomerangLoaded") {
 hookBoomerang();
 }
 });
 }
  }
}());

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

Результаты

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

boomerang: [debug] Ready to send beacon:
 ...
 t_done=2546
 t_other=boomerang|2,boomr_fb|2443,boomr_ld|1165,boomr_lat|1278
 ...
 restiming={"http":{"://www.andreas-marschke.name/":{...}}}
 u=http://web.andreas-marschke.name/
 v=1.0.1514544714
 ...
 pid=svcbw6yv
 ...
 usertiming=0Bungee_normal_400_normal~108.~FontAwesome_normal_normal_normal~1vc.~FontsLoaded~1vd

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

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

0Bungee_normal_400_normal~108.~FontAwesome_normal_normal_normal~1vc.~FontsLoaded~1vd

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

$> node cmd.js decompress compressed.txt | jq .
[
  {
 "name": "Bungee_normal_400_normal",
 "startTime": 1304,
 "duration": 0,
 "entryType": "mark"
  },
  {
 "name": "Bungee_normal_400_normal",
 "startTime": 1304,
 "duration": 0,
 "entryType": "mark"
  },
  {
 "name": "FontAwesome_normal_normal_normal",
 "startTime": 2424,
 "duration": 0,
 "entryType": "mark"
  },
  {
 "name": "FontAwesome_normal_normal_normal",
 "startTime": 2424,
 "duration": 0,
 "entryType": "mark"
  },
  {
 "name": "FontsLoaded",
 "startTime": 2425,
 "duration": 0,
 "entryType": "mark"
  }
]

Как видите, для каждого из 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree