Используйте метрики «Визуально завершено» и «Индекс скорости».
Визуально завершено — это показатель на момент времени, который измеряет, когда визуальная область страницы завершила загрузку. Визуально полные метрики обычно имеют более короткую продолжительность, чем сопоставимые метрики (например, время загрузки страницы и интерактивные показатели DOM), потому что пользователи воспринимают полную загрузку страницы до того, как загрузится 100 % фоновых элементов страницы. Оптимизация визуально полного времени более ценна, чем оптимизация времени загрузки других страниц с точки зрения взаимодействия с пользователем, поскольку она отражает количество времени, которое ваши реальные пользователи тратят на ожидание полной загрузки содержимого верхней части страницы. Результаты можно сортировать по местоположению, устройству, операционной системе и типу браузера.
Визуально полный означает, что все элементы в видимой области веб-страницы загружены на 100%:
- Элементы
- Изображения
- IFrames (только изображения)
Видимая область простирается от верхней части страницы до нижней части окна браузера (пользовательская прокрутка не влияет на область страницы, используемую для измерения).
Визуальное завершение имеет следующие преимущества:
- Позволяет точно определить, сколько времени потребуется вашим конечным пользователям, чтобы увидеть искомую информацию.
- Предоставляет реальный бизнес-метрик с точки зрения пользователя.
- Обеспечивает 100%-ную видимость фактического взаимодействия с пользователем независимо от устройства.
- Объединяет ИТ и бизнес, связывая пользовательский опыт с бизнес-результатами.
- Ускоряет повышение производительности.
- Оптимизирует решения в области разработки, эксплуатации и взаимодействия с пользователем.
- Можно комбинировать с мощными каскадными диаграммами для понимания и улучшения времени рендеринга страниц.
Наряду с индексом скорости визуально завершенный показывает общее время, необходимое для загрузки всей страницы. Поэтому эти метрики собираются только для основных кадров, а не подкадров. В тех случаях, когда кадры имеют перекрестное происхождение и нет возможности узнать родительский кадр, сбор индекса скорости и визуального завершения также предпринимается для подкадров.
Визуально завершенный расчет
Визуально завершенный расчет для действий загрузки
Визуально завершенный начинает наблюдать за содержимым DOM после внедрения RUM JavaScript.
Наблюдение останавливается, когда инициируется событие Load end и последний добавленный элемент страницы находится более одной секунды назад. Если на странице есть повторяющиеся изменения, визуальное завершение автоматически отключается через 3 секунды после срабатывания события завершения загрузки. Для расчета используются все элементы, которые являются частью страницы в момент визуального завершения наблюдения за страницей.
Визуально завершить проверяет, видны ли элементы, добавленные на страницу, или находятся ли они в видимой области. Если они есть, то время, когда последний видимый элемент появляется на странице, используется для Визуально завершенного. Для внешних ресурсов, таких как изображения, визуально завершенный использует API времени загрузки браузера, чтобы получить время загрузки, а не время, когда Тег
размещен на странице.
Визуальный полный расчет для действий XHR
Для действий XHR наблюдение за содержимым DOM начинается с начала обратного вызова действия XHR и заканчивается через 50 миллисекунд после окончания обратного вызова . Любые мутации с внешними ресурсами, такими как изображения, таблицы стилей или IFrames, заставляют RUM JavaScript добавлять прослушиватель загрузки к этим ресурсам. Это продлевает время действия XHR до последнего ресурса, добавленного в течение наблюдаемого периода времени.
Затем для этих ресурсов вычисляется визуальная завершенность. Визуально завершение может отличаться от времени окончания действия. Но когда для параметра «Визуальное завершение» установлено значение -1
(значение по умолчанию), например, когда в модель DOM не добавляются видимые ресурсы, для визуального завершения используется время окончания действия.
Причина, по которой для действий XHR поддерживаются только ресурсы, а не все элементы, заключается в том, что при наличии параллельных действий XHR и нескольких наблюдений одновременно элементы, отображаемые на странице, не могут быть соотнесены с правильным действием.
Расчет индекса скорости
Индекс скорости полезен для сравнения взаимодействия с пользователем различных страниц. Чем меньше число, тем лучше пользовательский опыт страницы. Подробное определение индекса скорости и базовое описание расчета индекса скорости см. на странице документации WebPagetest.
Решение в рамках RUM JavaScript использует тот же алгоритм, что и WebPageTest, но использует видимые элементы, захваченные из визуально завершенных. Это «настоящие» элементы страницы. Преимущество сравнения скриншотов (webpagetest.org) заключается в том, что Visually Complete знает об элементах на странице и их времени. Сравнение скриншотов отражает только визуальные изменения страницы. Таким образом, если бы, например, существовал вращающийся GIF-файл, который постоянно меняется, время визуального завершения и индекса скорости веб-страницы webpagetest.org было бы неточным.
Индекс скорости вычисляет индекс, измеряя ход загрузки веб-страницы между определенными маркерами, а также процент элементов, которые остаются незагруженными в данный момент времени.
- (200 мс × 100%) (ничего не загружается до 200 мс)
- (200 мс × 60%) (уже 40% загружены первым маркером, то есть 60% должны быть загружены, чтобы достичь 100%)
- (200 мс × 40 %) (40 % должны быть загружены, чтобы достичь 100 %)
- Индекс скорости = (200 мс × 100%) + (200 мс × 60%) + (200 мс × 40%) = 400
Индекс скорости применим только к действиям загрузки, поскольку он использует всю страницу в качестве эталона для расчета индекса. Например, если на странице есть небольшая иконка, загрузка которой занимает пять секунд, а остальная часть страницы загружается в течение двух секунд, то визуальное завершение будет пятисекундным, потому что иконка является последним элементом на странице. Но индекс скорости будет около двух секунд, потому что основная часть страницы загружается в течение двух секунд.
Параметры конфигурации для улучшенного визуального завершения
В версии Dynatrace 1.194 и более поздних версиях новый алгоритм «Визуально полный» дает вам больше контроля над тем, как рассчитывается метрика, позволяя вам указать следующие настройки: элемент (в пикселях) для элемента, который будет учитываться в отношении визуально полного и индекса скорости. Это означает, что в расчеты будут включены только те элементы, которые имеют минимальную определенную площадь в пикселях. Используйте
свойство для определения порога.
vcit
, чтобы определить тайм-аут бездействия. vcx
для определения времени ожидания мутации. iub
для создания списка.
mb
для создания списка.Чтобы настроить эти параметры
- В меню Dynatrace перейдите к Web .
- Выберите приложение, которое вы хотите настроить.
- В правом верхнем углу страницы обзора приложения выберите Дополнительно ( … ) > Редактировать .
- В настройках приложения перейдите к Захват > Захват содержимого .
- Добавьте желаемую настройку.
-
Порог
Используйте значение от 0 до 10000; значение по умолчанию 50. -
Тайм-аут бездействия для действий загрузки
:
Время в миллисекундах — используйте значение от 0 до 30000; значение по умолчанию 1000. -
Время ожидания мутации для XHR и пользовательских действий
:
Время в миллисекундах — используйте значение от 0 до 5000, значение по умолчанию — 50. -
Список исключенных URL-адресов
:
Используйте символ вертикальной черты в качестве разделителя между записями, например\.dynatrace\.com\/логин|\.dynatrace\.com\/выход из системы
. Разделение между разными протоколами URL-адресов не поддерживается; каждый протокол URL-адреса исключен. -
Список игнорируемых мутаций
:
Используйте запятую в качестве разделителя между записями, например#someDomElement@someattribute,.someOtherDomElement
.
-
Добавление визуально полных и других метрик на информационную панель
Визуально полные и другие вычисляемые метрики для RUM можно использовать для создания информационных панелей для метрик, которые вас больше всего интересуют. Вы должны создать метрику, прежде чем добавлять ее на информационную панель. Помимо нашей известной метрики «Визуально полная», здесь мы также добавили два из трех «важных веб-показателей» 9.0088 Задержка первого ввода (FID) и Наибольшая содержательная краска (LCP) .
Использование визуальной полноты в качестве ключевого показателя производительности
В версии Dynatrace 1.193 и более ранних визуальная завершенность является ключевым показателем производительности по умолчанию, который применяется для оценки производительности всех действий загрузки и действий XHR. Визуально полное время и время индекса скорости фиксируются по умолчанию для всех приложений, для которых включен мониторинг реальных пользователей.
Вы можете изменить ключевую метрику производительности, используемую для действий загрузки и действий XHR. Вы также можете отключить захват времени визуального завершения и индекса скорости, однако повторное включение захвата сбрасывает контрольные периоды обнаружения аномалий, определенные для приложения.
Чтобы установить ключевой показатель производительности для приложения
- В меню Dynatrace перейдите к Web .
- Выберите приложение, которое вы хотите настроить.
- В правом верхнем углу страницы обзора приложения выберите Дополнительно ( … ) > Редактировать .
- В настройках приложения перейдите к Общие настройки > Общие настройки .
- В Выберите ключевую метрику производительности для каждого типа действия , выберите ключевую метрику производительности из списка для каждого из типов действий пользователя ( Действия загрузки , Действия XHR и Пользовательские действия ).
Чтобы отключить захват Визуальное завершение и тайминги индекса скорости
- В меню Dynatrace перейдите к Web .
- Выберите приложение, которое вы хотите настроить.
- В правом верхнем углу страницы обзора приложений выберите Дополнительно ( … ) > Редактировать .
- В настройках приложения перейдите к Захват > Захват содержимого .
- Отключите параметр Визуально завершенный и индекс скорости .
Использование Визуальное завершение с одностраничными приложениями
Для платформ одностраничных приложений, таких как Angular, Визуальное завершение дает еще более точную синхронизацию действий пользователя. При визуальном завершении отсчет времени не останавливается, когда возвращаются ответы XHR. Из-за этого вы можете получить дополнительную информацию о динамической загрузке ресурсов, которая инициируется изменениями элемента DOM на основе JavaScript, из ответа на вызов XHR.
Сопоставление производительности пользователей с бизнес-метриками
Производительность — один из основных факторов, определяющих удобство работы пользователей и успешные бизнес-результаты. Метрика Визуально полная предоставляет этот анализ по умолчанию.
Визуальное завершение для анализа действий пользователя
Визуальное завершение и индекс скорости захватываются для каждого шага действия пользователя.
- В меню Dynatrace перейдите к Web .
- Выберите приложение для анализа.
- В разделе Анализ производительности выберите раздел действий для отображения данных о действиях пользователя.
- В плитке 3 основных действия пользователя выберите
- В разделе Ключевые действия пользователя или 100 основных действий пользователя выберите действие, чтобы увидеть время его вклада и временную шкалу действия шага на плитке Разбивка участников . Временная шкала действий показывает время для всех соответствующих этапов действия, включая Индекс скорости и Визуально полный.
Метрика производительности, используемая для шага, отображается над временной шкалой, поэтому вы можете быстро определить, используется ли в качестве метрики производительности «Длительность действия пользователя» или «Визуально завершено».
Устранение неполадок Визуальное завершение и индекс скорости
При использовании в качестве ключевого показателя производительности:
- Визуальное завершение рассчитывается, когда визуальный элемент на странице изменяется, и это изменение распространяется при каждой последующей загрузке и действии пользователя XHR (но не асинхронные веб-запросы, не влияющие на DOM).
- Индекс скорости доступен только для действий нагрузки.
Проверьте следующее, если вы не видите точных данных визуально полного или индекса скорости:
Метрики визуально полного и индекса скорости не показаны- Убедитесь, что визуально полное является ключевой метрикой производительности, используемой для XHR и действий загрузки.
- Подтвердите поддержку вашего браузера. Индекс скорости и визуально полные метрики доступны только в браузерах, поддерживающих наблюдателей за мутациями. Поддерживаются следующие браузеры:
- Microsoft Internet Explorer 11
- Microsoft Edge 15 или новее
- Firefox 57 или новее
- Google Chrome 61 или более поздней версии
- Safari не поддерживается, так как не поддерживает тайминги ресурсов.
- Проверьте точку внедрения JavaScript. Показатели визуальной полноты и индекса скорости не могут быть рассчитаны, если RUM JavaScript не вставлен в то место в HTML-странице вашего приложения, где он может надежно установить прослушиватели наблюдателей мутаций. Выполнение RUM JavaScript происходит слишком поздно, чтобы установить прослушиватели наблюдателя мутаций, в основном при использовании диспетчера тегов. Известные триггеры, которые мешают Dynatrace RUM захватывать визуально полные измерения времени:
- Прервано пользователем : Когда ваш пользователь взаимодействовал с вашей страницей во время начального визуально полного расчета времени и тем самым прервал его.
- Вынуждено пользователем перед загрузкой : Когда ваш пользователь ушел со стороны до того, как браузер запустил событие onload.
- Вынуждено пользователем после загрузки : Когда ваш пользователь покинул вашу страницу после того, как браузер запустил событие onload, но вычисление визуально полного завершения еще не началось.
- Жесткий тайм-аут достигнут : Когда визуально завершенный расчет времени превысил жесткий тайм-аут в 3 минуты.
Метрики «визуально завершенного» и «индекса скорости» могут быть неточными по следующим причинам:
- доступен только в другом кадре. Элементы DOM также должны быть доступны во фрейме/IFrame, в который внедряется RUM JavaScript. Эти факторы могут привести к искажению показателей. Убедитесь, что вы проверили переменную JavaScript или захват элемента DOM для этих элементов.
- Может быть определено
setTimeOut
для обратных вызовов XHR.Убедитесь, что вы включили поддержку фреймворков XHR (AJAX) и что определенные XHR не исключены из мониторинга.
- Имейте в виду, что модуль Visually Complete не имеет возможности определить время рендеринга предварительно загруженных изображений, поскольку слушатели, которые ему необходимо зарегистрировать, никогда не вызываются в таких сценариях. Это не позволяет модулю определить что-либо близкое к времени рендеринга таких изображений, поэтому он либо использует мутацию, либо время загрузки ресурса. Однако обе эти метрики могут быть раньше, чем фактическое время рендеринга изображения, особенно если это изображение было предварительно загружено, а загрузка страницы занимает много времени.
Расчет номинальной нагрузки шины
Используйте приведенную ниже таблицу для расчета номинальной нагрузки и скорости шины.
Индекс нагрузки: Это максимальная нагрузка, которую можно нести со скоростью, указанной символом скорости при номинальном давлении.