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