Использование метрик «Визуально завершено» и «Индекс скорости» в Ключ-АСТРОМ

Использование метрик «Визуально завершено» и «Индекс скорости» в Ключ-АСТРОМ Classic

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

Поддержка более ранней версии Visually complete прекратится с выходом JavaScript Мониторинга реального пользователя версии 1.211 для Мониторинга реального пользователя и Synthetic версии 1.212.

Визуальная завершенность — это метрика, измеряющая момент времени, когда визуальная область страницы полностью загрузилась. Как правило, метрики визуальной завершенности короче по продолжительности, чем сопоставимые метрики (например, время загрузки страницы и показатели интерактивности DOM), поскольку пользователи воспринимают полную загрузку страницы до того, как загрузятся 100% фоновых элементов страницы. Оптимизация времени визуальной завершенности более ценна с точки зрения пользовательского опыта, чем оптимизация других показателей времени загрузки страницы, поскольку она отражает время, которое реальные пользователи тратят на ожидание полной загрузки контента, видимого без прокрутки. Результаты можно сортировать по местоположению, устройству, операционной системе и типу браузера.

Визуально завершенная страница означает, что все элементы в видимой области веб-страницы загружены на 100%:

• Элементы
• Изображения
• IFrames (только изображения)

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

Визуальная полнота имеет следующие преимущества:

• Позволяет точно увидеть, сколько времени требуется конечным пользователям, чтобы найти нужную им информацию.
• Предоставляет действительно важный для бизнеса показатель с точки зрения пользователя.
• Обеспечивает 100% прозрачность реального пользовательского опыта независимо от устройства.
• Обеспечивает согласованность действий ИТ-отдела и бизнеса в вопросе связи пользовательского опыта с бизнес-результатами.
• Ускоряет повышение производительности.
• Оптимизирует принятие решений в области разработки, эксплуатации и пользовательского опыта.
• Может использоваться в сочетании с мощными диаграммами типа «водопад» для анализа и улучшения времени отрисовки страниц.

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

Визуально полный расчет

Визуально полный расчет нагрузок

Функция Visually complete начинает отслеживать содержимое DOM после внедрения JavaScript-кода Мониторинга реального пользователя.

Наблюдение прекращается, когда срабатывает событие Load, и последний добавленный элемент на странице был добавлен более одной секунды назад. Если на странице происходят повторяющиеся изменения, Visually complete автоматически отключается через 3 секунды после срабатывания события Load. Для расчета используются все элементы, которые присутствовали на странице в момент, когда Visually complete прекращает наблюдение.

Функция визуального дополнения проверяет, видны ли добавленные на страницу элементы или находятся ли они в видимой области. Если да, то для визуального дополнения используется время появления последнего видимого элемента на странице. Для внешних ресурсов, таких как изображения, визуальное дополнение использует API времени загрузки ресурсов браузера, а не время размещения тега <img> на странице.

Визуально полный расчет для действий XHR

Для действий XHR наблюдение за содержимым DOM начинается с момента callback begin завершения действия XHR и заканчивается через 50 миллисекунд после этого callback end. Любые изменения внешних ресурсов, таких как изображения, таблицы стилей или IFrame, приводят к тому, что JavaScript Мониторинга реального пользователя добавляет обработчик загрузки к этим ресурсам. Это увеличивает время выполнения действия XHR до последнего ресурса, добавленного в течение наблюдаемого временного интервала.

Затем для этих ресурсов рассчитывается показатель визуальной завершенности. Показатель визуальной завершенности может отличаться от времени окончания действия. Но если для параметра визуальной завершенности установлено значение -1 (значение по умолчанию), например, когда в DOM не добавлены видимые ресурсы, для расчета визуальной завершенности используется время окончания действия.

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

Расчет индекса скорости

Индекс скорости полезен для сравнения удобства использования различных страниц. Чем ниже значение, тем лучше удобство использования страницы. Подробное определение индекса скорости и базовое описание его расчета см. в документации WebPagetest.

Решение, реализованное в JavaScript Мониторинга реального пользователя, использует тот же алгоритм, что и WebPageTest, но оно использует видимые элементы, полученные с помощью функции визуального анализа. Это «реальные» элементы страницы. Преимущество сравнения скриншотов (webpagetest.org) заключается в том, что функция визуального анализа учитывает элементы на странице и время их отображения. Сравнение скриншотов отражает только визуальные изменения страницы. Таким образом, если, например, будет вращающийся GIF-файл, который постоянно меняется, время отображения с помощью функции визуального анализа и индекса скорости на webpagetest.org будет неточным.

Индекс скорости рассчитывается путем измерения прогресса загрузки веб-страницы между определенными маркерами, а также процента элементов, которые остаются незагруженными в данный момент времени.

(200 мс × 100%) (до 200 мс ничего не загружается)
(200 мс × 60%) (уже загружено 40% к моменту появления первого маркера; то есть для достижения 100% необходимо загрузить 60%)
(200 мс × 40%) (для достижения 100% необходимо загрузить 40%)
Индекс скорости = (200 мс × 100%) + (200 мс × 60%) + (200 мс × 40%) = 400

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

Настройки конфигурации для расширенного визуального завершения

В версиях Ключ-АСТРОМ 1.194 и более поздних версиях новый алгоритм визуальной полноты предоставляет больше возможностей для управления расчетом метрики, позволяя задавать следующие параметры:

• Порог: Используйте этот параметр, чтобы определить минимальную видимую площадь на элемент (в пикселях), которая будет учитываться при расчете визуальной полноты и скорости отображения. Это означает, что в расчеты будут включены только элементы, имеющие минимальную заданную площадь в пикселях. Используйте это свойство vct для определения порога.
• Тайм-аут бездействия для действий загрузки: Время, в течение которого модуль визуального завершения ожидает отсутствия активности и дальнейших изменений на странице после действия загрузки. Используйте это свойство vcit для определения тайм-аута бездействия.
• Тайм-аут мутации для XHR и пользовательских действий: Время, которое модуль визуального завершения ожидает после закрытия XHR или пользовательского действия, прежде чем начать вычисление. Используйте это свойство vcx для определения тайм-аута мутации.
• Список исключенных URL-адресов: Используйте регулярные выражения для определения URL-адресов изображений и iFrame, которые следует исключить из обнаружения модулем визуального дополнения. Используйте это свойство iub для создания списка.
• Список игнорируемых мутаций: Запрос CSS-селекторов для указания узлов мутаций (изменяющихся элементов), которые следует игнорировать при визуальном заполнении и расчете индекса скорости. Используйте это свойство mb для создания списка.

Чтобы настроить эти параметры:

1. Перейдите в Веб.
2. Выберите приложение, которое хотите настроить.
3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
4. В настройках приложения выберите Захват > Захват контента.
5. Добавьте желаемые настройки.

• Threshold: Используйте значение от 0 до 10000; значение по умолчанию — 50.
• Inactivity timeout for load actions: Время в миллисекундах — используйте значение от 0 до 30000; значение по умолчанию — 1000.
• Mutation timeout for XHR and custom actions: Время в миллисекундах — используйте значение от 0 до 5000, значение по умолчанию — 50.
• Excluded URL list: Используйте символ вертикальной черты (|) в качестве разделителя между записями, например \.astromkey\.com\/login|\.astromkey\.com\/logout. Разделение между различными протоколами URL-адресов не поддерживается; исключаются все протоколы URL-адреса.
• Ignored mutation list: Используйте запятую в качестве разделителя между записями, например #someDomElement@someattribute,.someOtherDomElement.

Добавление показателей визуальной завершенности и других метрик на дашборд

Визуально полная и другие вычисляемые метрики для Мониторинга реального пользователя можно использовать для создания дашбордов с интересующими вас показателями. Перед добавлением метрики на дашборд необходимо ее создать. Помимо хорошо известной метрики «Визуально полная», здесь мы также добавили две из трех «важных веб-метрик»: задержку первого ввода (FID) и самую большую отображаемую страницу (LCP).

Использование показателя визуальной завершенности в качестве ключевого показателя эффективности

В версиях Ключ-АСТРОМ 1.193 и более ранних версиях «Визуальное завершение» является ключевым показателем производительности по умолчанию, применяемым для оценки производительности всех операций загрузки и операций XHR. Время выполнения операций «Визуальное завершение» и «Индекс скорости» по умолчанию фиксируются для всех приложений, в которых включен Мониторинг реального пользователя.

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

Чтобы установить ключевой показатель производительности для приложения:

1. Перейдите в Веб.
2. Выберите приложение, которое хотите настроить.
3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
4. Выберите Общие настройки > Действия загрузки / Действия XHR / Пользовательские действия.
5. В разделе Ключевой показатель эффективности выберите ключевой показатель эффективности из списка для каждого типа действий пользователя.

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

1. Перейдите в Веб.
2. Выберите приложение, которое хотите настроить.
3. В правом верхнем углу страницы обзора приложения выберите Дополнительно (…) > Редактировать.
4. В настройках приложения выберите Захват > Захват контента.
5. Отключите параметр Визуальная полнота и Индекс скорости.

Использование функции визуальной полноты для одностраничных приложений

Для одностраничных приложений, таких как Angular, функция Visually Complete обеспечивает еще более точный расчет времени действий пользователя. Благодаря Visually Complete отсчет времени не прекращается после получения XHR-ответов. Это позволяет получить дополнительную информацию о динамической загрузке ресурсов, запускаемой изменениями DOM-элементов на основе JavaScript из ответа XHR-запроса.

Сопоставление показателей эффективности пользователей с бизнес-метриками

Производительность — один из главных факторов, определяющих удобство использования и успешные результаты бизнеса. Показатель «Визуальная полнота» предоставляет этот анализ «из коробки».

Визуально полный инструмент для анализа действий пользователя

Для каждого шага в действиях пользователя фиксируются визуальная завершенность и индекс скорости.

1. Перейдите в Веб.
2. Выберите приложение для анализа.
3. В разделе Анализ производительности выберите раздел Действия, чтобы отобразить данные о действиях пользователя.
4. В разделе Три наиболее часто встречающихся действия пользователя выберите Просмотреть подробную информацию.
5. В разделе Ключевые действия пользователя или 100 самых популярных действий пользователя выберите действие, чтобы увидеть время его выполнения и временную шкалу действия на плитке Участники. Временная шкала действия отображает время выполнения для всех соответствующих этапов действия, включая индекс скорости и визуальное завершение. Показатель производительности, используемый для этапа, отображается над временной шкалой, поэтому вы можете быстро определить, используется ли в качестве показателя производительности «Длительность действия пользователя» или «Визуальное завершение».

Устранение неполадок. Визуальная полнота и индекс скорости

При использовании в качестве ключевого показателя эффективности:

• Визуальная полнота рассчитывается, когда визуальный элемент на странице изменяется, и это изменение распространяется при каждой последующей загрузке и действии пользователя по XHR-запросу (но не при асинхронных веб-запросах, не влияющих на DOM).
• Индекс скорости доступен только для действий с грузом.