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

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

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

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

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

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

  • 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 влияет ваше приложение
  • Фильтр по стране , чтобы убедиться , что ваше местоположение базы данных не влияет на регион конкретного

Подробнее о просмотре данных для ваших следов .

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