Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

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

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

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

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

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

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

Отслеживайте, просматривайте и фильтруйте данные о производительности

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

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

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

изображение панели показателей на панели мониторинга Firebase Performance Monitoring.

Чтобы добавить метрику к вашей плате метрик, перейдите на приборную панель Performance в Firebase консоли, а затем нажмите на вкладку Сводки. Щелкните пустую карточку метрики, затем выберите существующую метрику, чтобы добавить ее на свою доску. Щелкните на заполненной карточке метрики, чтобы дополнительные параметры, например заменить или удалить метрику.

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

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

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

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

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

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

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

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