Статистика производительности: получите полезную информацию об эффективности вашего веб-сайта.

Используйте панель «Статистика производительности» , чтобы получить полезную информацию о производительности вашего веб-сайта, основанную на конкретных примерах использования.

Обзор

Панель «Статистика производительности» позволяет выполнять следующие действия:

Зачем новая панель?

Новая панель «Статистика производительности» — это эксперимент, направленный на устранение этих трех проблем разработчиков при работе с существующей панелью «Производительность» :

  • Слишком много информации . Благодаря обновленному пользовательскому интерфейсу панель «Сведения о производительности» оптимизирует данные и отображает только необходимую информацию.
  • Трудно провести различие между вариантами использования . Панель «Анализ производительности» поддерживает анализ на основе вариантов использования. На данный момент он поддерживает только вариант использования загрузки страницы, а в будущем на основе ваших отзывов будет добавлено больше, например интерактивность .
  • Для эффективного использования требуются глубокие знания того, как работают браузеры . На панели «Статистика производительности» представлены ключевые данные на панели «Статистика» и рекомендации по устранению проблем.

Введение

Из этого руководства вы узнаете, как измерить и понять эффективность загрузки страницы с помощью панели «Статистика производительности» . Продолжите читать или посмотрите видеоверсию этого урока выше.

Откройте панель «Статистика производительности».

  1. Откройте Инструменты разработчика .
  2. Нажмите Дополнительные параметры > Дополнительные инструменты > Анализ производительности .

    Статистика производительности в меню.

    Либо используйте командное меню , чтобы открыть панель «Анализ производительности» .

    Команда «Показать статистику производительности» в меню «Команды».

Рекордная производительность

Панель «Сведения о производительности» может регистрировать общую производительность и производительность, зависящую от вариантов использования (например, загрузки страницы).

  1. Откройте эту демонстрационную страницу на новой вкладке и на ней откройте панель «Статистика производительности» .
  2. Во время записи вы можете регулировать сеть и процессор. В этом уроке установите флажок «Отключить кеш» и установите замедление ЦП в 4 раза в раскрывающемся меню:

    Дросселирование.

  3. Нажмите . Измерьте загрузку страницы . DevTools записывает показатели производительности во время перезагрузки страницы, а затем автоматически останавливает запись через пару секунд после завершения загрузки страницы.

    Параметры запуска.

Воспроизведение записи выступления

Используйте элементы управления внизу, чтобы управлять повтором вашей записи.

Управление воспроизведением.

Вот пример того, как это сделать.

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

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

Для масштабирования и перемещения временной шкалы влево и вправо используйте соответствующие кнопки навигации:

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

Альтернативно вы можете использовать сочетания клавиш. Нажмите кнопку , чтобы просмотреть ярлыки. Сочетания клавиш.

При использовании ярлыков вы масштабируете изображение в зависимости от курсора мыши.

Просмотр статистики производительности

Получите список статистики производительности на панели «Аналитика» . Выявляйте и устраняйте потенциальные проблемы с производительностью.

Панель статистики.

Наведите указатель мыши на каждую информацию, чтобы выделить ее на основных треках.

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

Подробности инсайта.

Просмотр показателей производительности Web Vitals

Web Vitals — это инициатива Google, направленная на предоставление единого руководства по качественным сигналам, которые необходимы для обеспечения комфортного взаимодействия с пользователем в Интернете.

Эти показатели можно просмотреть на панели «Временная шкала и аналитика» .

Просмотр показателей производительности Web Vitals.

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

Откройте для себя задержки крупнейшей содержательной краски

Крупнейшая отрисовка контента (LCP) — это один из показателей Core Web Vitals . Он сообщает время рендеринга самого большого изображения или текстового блока, видимого в области просмотра, относительно момента начала загрузки страницы.

Пороги ЛКП.

Хороший показатель LCP — 2,5 секунды или меньше.

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

Значок ЛКП.

Чтобы открыть панель «Сведения» , щелкните значок LCP на временной шкале или на панели «Сведения» справа. На этой панели вы можете обнаружить потенциальные причины задержек и предложения по их устранению.

Панель сведений.

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

Чтобы просмотреть подразделы времени рендеринга LCP , прокрутите вниз до раздела «Подробности» > «Разбивка времени» .

Срыв таймингов.

Время рендеринга LCP состоит из следующих подразделов:

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

Если элемент LCP не требует загрузки ресурса для рендеринга, задержка и время загрузки ресурса опускаются. Например, если элемент представляет собой текстовый узел, отображаемый с использованием системного шрифта.

Просмотр изменений макета

Просматривайте изменения макета на треке «Сдвиги макета» .

Макет смены трека.

Смены макета группируются в окне сеанса . В примере имеется два окна сеанса. Окна сеансов имеют промежутки между ними.

Окно сеанса и разрыв.

Совокупные изменения макета (CLS) — это один из основных показателей веб-жизненной активности . Используйте отслеживание «Сдвиги макета» , чтобы выявить потенциальные проблемы и причины изменений макета.

При улучшении метрики CLS всегда начинайте с самого большого окна сеанса. В нашем примере окно сеанса 1 является самым большим окном в зависимости от цвета и уровня фона.

ЦЛС.

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

Просмотрите сведения о смене макета.

В нашем примере потенциальной основной причиной является носитель несоответствующего размера . Чтобы узнать, как это исправить, см. раздел «Оптимизация совокупного смещения макета» .

выявить потенциальные коренные причины.

Понять оценку сдвигов макета

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

Если вся страница сдвинута, максимальная оценка каждого смещения макета равна 1 . В нашем примере первый сдвиг макета получил оценку 0.15 . Второе изменение компоновки набрало 0.041 .

Понимание оценки сдвигов макета.

Общий балл для этого окна сеанса составляет 0.19 . Судя по порогу CLS, он нуждается в улучшении. Цвет фона окна сеанса отражает то же самое.

Порог CLS.

Фоновый график окна сеанса со временем увеличивается. Совокупная оценка изменения макета отражает увеличение в этот момент времени.

Фоновый график окна цессии.

Просмотр сетевой активности

Просмотрите сетевую активность на дорожке «Сеть» . Вы можете развернуть сетевую дорожку, чтобы просмотреть все сетевые действия, и щелкнуть каждый элемент, чтобы просмотреть подробную информацию.

Просмотр сетевой активности.

Просмотр активности средства визуализации

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

Просмотр активности рендерера.

Просмотр активности графического процессора

Просмотрите активность графического процессора на дорожке графического процессора . По умолчанию дорожка графического процессора скрыта. Чтобы включить его, проверьте графический процессор в настройках .

Просмотр активности графического процессора.

Просмотр времени пользователя

Чтобы получить собственные показатели производительности, вы можете использовать User Timing и визуализировать свое время с помощью трека Timing . Дополнительные сведения см. в разделе API синхронизации времени пользователя .

Посетите эту демонстрационную страницу , которая рассчитывает прошедшее время загрузки текста.

Чтобы просмотреть время пользователя:

  1. Отмечайте места в своем приложении с помощью performance.mark() .
  2. Измерьте время, прошедшее между отметками, с помощью performance.measure() .
  3. Рекордная производительность .
  4. Просмотрите измерения на дорожке времени . Если вы не видите трек, проверьте время пользователя в настройках .
  5. Чтобы просмотреть подробности, нажмите на тайминг на треке. Трек «Тайминги».

Настройте пользовательский интерфейс

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

Настройки.

Экспортировать запись

Чтобы сохранить запись, нажмите « Экспортировать .

Экспортируйте запись.

Импортировать запись

Чтобы загрузить запись, выберите «Импортировать .

Импортируйте запись.

Удалить запись

Чтобы удалить запись:

  1. Нажмите Удалить . Откроется диалоговое окно подтверждения. Удалите запись.
  2. В диалоговом окне нажмите «Удалить» , чтобы подтвердить удаление.