Performance Monitoring использует трассировки для сбора данных о отслеживаемых процессах в вашем приложении. Трассировка — это отчет, содержащий данные, собранные между двумя моментами времени в вашем приложении.
Для веб-приложений Performance Monitoring автоматически собирает трассировку для каждой страницы вашего приложения, называемую трассировкой загрузки страницы . Каждая трассировка загрузки страницы собирает следующие метрики по умолчанию:
наибольшая содержательная отрисовка . Показатель, измеряющий время между переходом пользователя на страницу и моментом самого большого визуального изменения.
взаимодействие до следующей отрисовки — метрика, измеряющая наибольшее время между взаимодействием пользователя со страницей и моментом следующей отрисовки.
Совокупный сдвиг макета — показатель, который измеряет и оценивает неожиданные сдвиги макета на странице.
первая отрисовка — показатель, измеряющий время между переходом пользователя на страницу и моментом любого визуального изменения.
первая содержательная отрисовка — показатель, измеряющий время между переходом пользователя на страницу и отображением значимого контента, например изображения или текста.
domInteractive — показатель, измеряющий время между переходом пользователя на страницу и моментом, когда страница считается интерактивной для пользователя.
domContentLoadedEventEnd — показатель, измеряющий время между переходом пользователя на страницу и моментом полной загрузки и анализа исходного HTML-документа.
loadEventEnd — показатель, измеряющий время между переходом пользователя на страницу и завершением события загрузки текущего документа.
задержка первого ввода — показатель, измеряющий время между взаимодействием пользователя со страницей и моментом, когда браузер может отреагировать на этот ввод.
Данные этих трассировок можно просмотреть на подвкладке «Загрузка страницы» таблицы трассировок, которая находится в нижней части панели «Производительность» (подробнее об использовании консоли см. далее на этой странице).
Определение трассировки загрузки страницы
Эта трассировка измеряет несколько показателей того, как загружаются страницы вашего приложения, в частности, сколько времени требуется для достижения общих точек загрузки, например, в адаптивном приложении.
Отслеживание загрузки страницы помогает отслеживать основные веб-показатели вашего приложения, такие как первая отрисовка контента.
Метрики, собранные для отслеживания загрузки страниц.
Эти трассировки являются готовыми трассировками, поэтому к ним нельзя добавлять дополнительные настраиваемые метрики или настраиваемые атрибуты.
Самая большая содержательная краска
Этот показатель измеряет время между переходом пользователя на страницу и отображением самого большого изображения, текста или видеоконтента.
Эта метрика полезна для понимания того, насколько быстро основной контент веб-страницы становится видимым пользователю.
Запускается, когда пользователь переходит на страницу.
Останавливается, когда происходит наибольшее визуальное изменение, включая изображения, текст или видеоэлементы. Более подробную информацию можно найти в основных веб-жизненных показателях .
« Самый большой элемент рисования с содержимым » — это настраиваемый атрибут, который идентифицирует элемент, соответствующий самому большому элементу рисования с содержимым. Это фиксируется в дополнение к самому большому времени отрисовки контента.
Взаимодействие со следующей картинкой
Эта метрика измеряет время между взаимодействием пользователя со страницей и моментом следующей отрисовки.
Эта метрика полезна, поскольку она измеряет, насколько страница реагирует на ввод пользователя.
Запускается, когда пользователь взаимодействует со страницей (щелчок мыши, касание устройства или ввод с клавиатуры).
Останавливается, когда происходит следующая покраска. Более подробную информацию можно найти в основных веб-жизненных показателях .
«Самое продолжительное взаимодействие до следующей отрисовки » — это настраиваемый атрибут, который идентифицирует элемент, с которым взаимодействовал пользователь, когда произошло взаимодействие до следующего события отрисовки. Это фиксируется в дополнение к взаимодействию до следующего времени отрисовки.
Накопительный сдвиг макета
Эта метрика измеряет наибольшее количество изменений макета для каждого неожиданного изменения макета, которое происходит в течение всего жизненного цикла страницы.
Этот показатель полезен, поскольку неожиданные изменения макета могут нарушить работу пользователя. Метрика сообщает оценку на основе Layout Instability API . Дополнительные сведения о том, как рассчитывается оценка, см. в основных веб-показателях.
« Наибольшая цель смещения макета » — это настраиваемый атрибут, который идентифицирует элемент, который сместился, когда произошел наибольший сдвиг содержимого. Это фиксируется в дополнение к совокупному показателю смещения макета.
Первая краска
Эта метрика измеряет время между переходом пользователя на страницу и моментом любого визуального изменения.
Эта метрика полезна, поскольку первая отрисовка сигнализирует вашим пользователям о том, что страница начинает загружаться.
Запускается, когда пользователь переходит на страницу.
Останавливается, когда происходит любое визуальное изменение, включая изменение цвета фона или загрузку заголовка.
Первая содержательная краска
Этот показатель измеряет время между переходом пользователя на страницу и отображением значимого контента, например изображения или текста.
Этот показатель полезен для понимания того, как скоро ваши пользователи увидят реальный контент вашего приложения, а не просто новый цвет фона или заголовок.
Запускается, когда пользователь переходит на страницу.
Останавливается сразу после того, как браузер отображает первое содержимое из DOM, включая любой текст, изображение (включая фоновые изображения), небелый холст или SVG.
domИнтерактивный
Эта метрика измеряет время между переходом пользователя на страницу и моментом, когда страница считается интерактивной для пользователя.
Этот показатель полезен для понимания того, как скоро ваши пользователи смогут взаимодействовать с элементами вашего приложения, такими как кнопки и гиперссылки, а не просто видеть их на экране. Обратите внимание: это не означает, что браузер будет реагировать на взаимодействие (эту метрику см. в первой трассировке задержки ввода ).
Запускается, когда пользователь переходит на страницу.
Останавливается непосредственно перед тем, как пользовательский агент устанавливает готовность текущего HTML-документа на «интерактивный».
domContentLoadedEventEnd
Эта метрика измеряет время между переходом пользователя на страницу и моментом полной загрузки и анализа исходного HTML-документа.
Запускается, когда пользователь переходит на страницу.
Останавливается сразу после полной загрузки и анализа исходного HTML-документа (
DOMContentLoaded), но это не означает, что таблицы стилей, изображения и подкадры завершили загрузку.
loadEventEnd
Эта метрика измеряет время между переходом пользователя на страницу и завершением события загрузки текущего документа.
Эта метрика полезна для понимания того, сколько времени требуется для загрузки всего вашего контента, включая таблицы стилей и изображения.
Запускается, когда пользователь переходит на страницу.
Останавливается сразу после завершения события загрузки текущего HTML-документа.
Первая входная задержка
Эта метрика измеряет время между взаимодействием пользователя со страницей и моментом, когда браузер может отреагировать на этот ввод.
Этот показатель полезен, поскольку браузер, реагирующий на взаимодействие с пользователем, дает вашим пользователям первое впечатление об отзывчивости вашего приложения.
Начинается, когда пользователь впервые взаимодействует с элементом на странице, например нажимает кнопку или гиперссылку.
Останавливается сразу после того, как браузер сможет ответить на ввод, что означает, что браузер не занят загрузкой или анализом вашего контента.
Обратите внимание, что для измерения первой метрики входной задержки вам необходимо добавить библиотеку полифилов для этой метрики. Инструкции по установке можно найти в документации библиотеки.
Отслеживайте, просматривайте и фильтруйте данные о производительности
Чтобы просматривать данные о производительности в реальном времени, убедитесь, что ваше приложение использует версию Performance Monitoring SDK, совместимую с обработкой данных в реальном времени. Узнайте больше о данных о производительности в реальном времени .
Отслеживайте ключевые показатели на панели управления
Чтобы узнать, как меняются ваши ключевые показатели, добавьте их на доску показателей в верхней части панели мониторинга «Производительность» . Вы можете быстро выявить регрессии, наблюдая за изменениями еженедельно, или убедиться, что недавние изменения в вашем коде повышают производительность.
Панель мониторинга производительности Firebase" />Чтобы добавить метрику на доску метрик, выполните следующие действия:
- Перейдите на панель «Производительность» в консоли Firebase .
- Нажмите пустую карточку показателя, затем выберите существующий показатель, чтобы добавить его на доску.
- Нажмите на заполненной карточке показателя, чтобы просмотреть дополнительные параметры, например заменить или удалить показатель.
На панели показателей отображаются собранные данные показателей с течением времени как в графической форме, так и в виде численного процентного изменения.
Узнайте больше об использовании панели мониторинга .
Просмотр трассировок и их данных
Чтобы просмотреть трассировки, перейдите на панель мониторинга «Производительность» в консоли Firebase , прокрутите вниз до таблицы трассировок и щелкните соответствующую вложенную вкладку. В таблице отображаются некоторые основные метрики для каждой трассы, и вы даже можете отсортировать список по процентному изменению определенной метрики.
Performance Monitoring предоставляет страницу устранения неполадок в консоли Firebase , на которой освещаются изменения показателей, что позволяет легко быстро устранять и минимизировать влияние проблем с производительностью на ваши приложения и пользователей. Вы можете использовать страницу устранения неполадок, когда узнаете о потенциальных проблемах с производительностью, например в следующих сценариях:
- Вы выбираете соответствующие показатели на информационной панели и замечаете большую разницу.
- В таблице трассировок вы сортируете данные так, чтобы самые большие отклонения отображались вверху, и вы видите значительное процентное изменение.
- Вы получите оповещение по электронной почте, уведомляющее вас о проблеме с производительностью.
Вы можете получить доступ к странице устранения неполадок следующими способами:
- На панели мониторинга показателей нажмите кнопку « Просмотреть сведения о метрике» .
- На любой карточке показателя выберите
=> Посмотреть подробности . На странице устранения неполадок отображается информация о выбранной вами метрике. - В таблице трассировок щелкните имя трассировки или любое значение метрики в строке, связанной с этой трассировкой.
- В уведомлении по электронной почте нажмите «Провести расследование» .
Щелкнув имя трассировки в таблице трассировок, вы сможете перейти к интересующим метрикам. Нажмите кнопку
Данные мониторинга производительности Firebase фильтруются по атрибуту" />- Фильтруйте по URL-адресу страницы , чтобы просмотреть данные для конкретной страницы вашего сайта.
- Отфильтруйте по эффективному типу соединения , чтобы узнать, как соединение 3G влияет на ваше приложение.
- Фильтруйте по стране , чтобы убедиться, что расположение вашей базы данных не влияет на определенный регион.
Узнайте больше о просмотре данных для ваших трассировок .
Следующие шаги
Узнайте больше об использовании атрибутов для изучения данных о производительности.
Узнайте больше о том, как отслеживать проблемы с производительностью в консоли Firebase .
Настройте оповещения о загрузках страниц, которые снижают производительность вашего приложения. Например, вы можете настроить оповещение по электронной почте для своей команды, если первая задержка ввода для определенной страницы превышает установленный вами порог.