Check out what’s new from Firebase at Google I/O 2022. Learn more

Подробнее о данных о производительности загрузки страниц (веб-приложения)

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

Для веб-приложений мониторинг производительности автоматически собирает трассировку для каждой страницы вашего приложения, которая называется трассировкой загрузки страницы . Каждая трассировка загрузки страницы собирает следующие метрики по умолчанию:

  • первая отрисовка — метрика, измеряющая время между переходом пользователя на страницу и моментом визуального изменения.

  • первая содержательная краска — метрика, которая измеряет время между переходом пользователя на страницу и отображением значимого контента, например изображения или текста.

  • domInteractive — метрика, которая измеряет время между переходом пользователя на страницу и моментом, когда страница считается интерактивной для пользователя.

  • domContentLoadedEventEnd — метрика, измеряющая время между переходом пользователя на страницу и полной загрузкой и анализом исходного HTML-документа.

  • loadEventEnd — Метрика, измеряющая время между переходом пользователя на страницу и завершением события загрузки текущего документа.

  • задержка первого ввода — метрика, которая измеряет время между тем, когда пользователь взаимодействует со страницей, и моментом, когда браузер может ответить на этот ввод.

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

Определение трассировки загрузки страницы

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

Трассировки загрузки страницы помогают отслеживать основные веб-жизненные показатели вашего приложения, такие как первая содержательная отрисовка.

Метрики, собранные для отслеживания загрузки страницы

Эти трассировки являются готовыми трассировками, поэтому вы не можете добавлять к ним пользовательские метрики или настраиваемые атрибуты.

Первая краска

Этот показатель измеряет время между переходом пользователя на страницу и моментом визуального изменения.

Эта метрика полезна, поскольку первая отрисовка сигнализирует вашим пользователям о том, что страница начинает загружаться.

  • Запускается, когда пользователь переходит на страницу.

  • Останавливается при любом визуальном изменении, включая изменение цвета фона или загрузку заголовка.

Первая содержательная краска

Этот показатель измеряет время между переходом пользователя на страницу и отображением значимого содержимого, например изображения или текста.

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

  • Запускается, когда пользователь переходит на страницу.

  • Останавливается сразу после того, как браузер отобразит первое содержимое из DOM, включая любой текст, изображение (включая фоновые изображения), небелый холст или SVG.

ДомИнтерактив

Этот показатель измеряет время между переходом пользователя на страницу и моментом, когда страница считается интерактивной для пользователя.

Эта метрика полезна для понимания того, как скоро ваши пользователи смогут фактически взаимодействовать с элементами вашего приложения, такими как кнопки и гиперссылки, а не просто видеть их на экране. Обратите внимание, что это не означает, что браузер будет реагировать на взаимодействие (для получения этой метрики см. первую трассировку задержки ввода ).

  • Запускается, когда пользователь переходит на страницу.

  • Останавливается непосредственно перед тем, как пользовательский агент установит готовность текущего HTML-документа в «интерактивный».

domContentLoadedEventEnd

Этот показатель измеряет время между переходом пользователя на страницу и полной загрузкой и анализом исходного HTML-документа.

  • Запускается, когда пользователь переходит на страницу.

  • Останавливается сразу после полной загрузки и анализа исходного HTML-документа ( DOMContentLoaded ), но это не означает, что загрузка таблиц стилей, изображений и подфреймов завершена.

loadEventEnd

Эта метрика измеряет время между переходом пользователя на страницу и завершением события загрузки текущего документа.

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

  • Запускается, когда пользователь переходит на страницу.

  • Останавливается сразу после завершения события загрузки текущего HTML-документа.

Задержка первого ввода

Эта метрика измеряет время между тем, когда пользователь взаимодействует со страницей, и тем, когда браузер может ответить на этот ввод.

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

  • Запускается, когда пользователь впервые взаимодействует с элементом на странице, например, нажимает кнопку или гиперссылку.

  • Останавливается сразу после того, как браузер сможет ответить на ввод, что означает, что браузер не занят загрузкой или синтаксическим анализом вашего контента.

Обратите внимание, что для измерения первой метрики задержки ввода необходимо добавить библиотеку полифилла для этой метрики. Инструкции по установке см. в документации библиотеки.

Отслеживание, просмотр и фильтрация данных об эффективности

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

Отслеживайте ключевые показатели в личном кабинете

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

изображение доски метрик на панели мониторинга производительности Firebase

Чтобы добавить метрику на доску метрик, перейдите на панель мониторинга « Производительность» в консоли Firebase, затем щелкните вкладку « Панель мониторинга ». Щелкните пустую карточку показателя, затем выберите существующий показатель, чтобы добавить его на доску. Нажмите на заполненной карточке метрики, чтобы открыть дополнительные параметры, например заменить или удалить метрику.

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

Узнайте больше об использовании панели инструментов .

Просмотр трасс и их данных

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

Если щелкнуть имя трассы в таблице трассировок, вы сможете щелкнуть различные экраны, чтобы изучить трассировку и перейти к интересующим метрикам. На большинстве страниц вы можете использовать кнопку « фильтр » (в верхнем левом углу экрана), чтобы отфильтровать данные по атрибуту, например:

изображение данных Firebase Performance Monitoring, отфильтрованных по атрибуту
  • Отфильтруйте по URL -адресу страницы, чтобы просмотреть данные для конкретной страницы вашего сайта.
  • Отфильтруйте по типу эффективного подключения, чтобы узнать, как подключение 3G влияет на ваше приложение.
  • Отфильтруйте по стране , чтобы убедиться, что местоположение вашей базы данных не влияет на конкретный регион.

Узнайте больше о просмотре данных для ваших трассировок .

Следующие шаги

  • Узнайте больше об использовании атрибутов для проверки данных о производительности.

  • Узнайте больше о том, как отслеживать проблемы с производительностью в консоли Firebase.

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