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