Панель производительности: анализируйте производительность вашего веб-сайта.

Dale St. Marthe

Sofia Emelianova

Используйте панель «Производительность» , чтобы проанализировать производительность вашего веб-сайта.

Обзор

Панель «Производительность» позволяет записывать профили производительности ЦП ваших веб-приложений. Анализируйте профили, чтобы выявить потенциальные узкие места в производительности и способы оптимизации использования ресурсов.

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

• Запишите профиль производительности.
• Изменить параметры захвата.
• Проанализируйте отчет о результатах работы.

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

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

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

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

1. Откройте инструменты разработчика .
2. Откройте меню «Команда» , нажав:
3. macOS: Command + Shift + P
4. Windows, Linux, ChromeOS: Control + Shift + P
5. Начните вводить Performance panel , выберите «Показать панель производительности» и нажмите Enter .

Отслеживайте основные показатели веб-инфраструктуры в режиме реального времени.

При открытии панели «Производительность» она немедленно отображает локальные показатели Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS), указывая их оценку (хорошая, требует улучшения или плохая).

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

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

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

Сравните свой опыт с опытом ваших пользователей.

Вы также можете получить данные из отчета Chrome UX Report и сравнить опыт пользователей вашего сайта с локальными показателями.

Для добавления данных в поле:

1. В разделе «Производительность» > «Следующие шаги» > «Данные полей» нажмите «Настроить» .

   

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

   Расширенные настройки: Настройка сопоставления между средами разработки и производства...

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

   1. В диалоговом окне разверните раздел «Дополнительно» и нажмите кнопку «+ Создать» .

   2. В таблице сопоставления введите URL-адреса вашей среды разработки и производства и нажмите + .

      

      Например, сопоставление http://localhost:8080 с https://example.com отобразит данные поля для example.com/page1 при переходе по адресу localhost:8080/page1 .

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

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

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

   

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

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

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

Для настройки вашей среды:

1. В каждой карточке с метриками разверните раздел «Учитывайте местные условия тестирования» , если таковой имеется, и ознакомьтесь с рекомендациями.

   

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

2. Чтобы соответствовать конфигурации среды, используемой в этом примере:

   1. Установите для области просмотра один из распространенных размеров экрана (например, 720p или 1080p). Для эмуляции определенных устройств и размеров экрана можно использовать режим «Устройство» на панели «Элементы» .
   2. В этом примере 82% пользователей веб-сайта используют для просмотра веб-страниц настольные компьютеры. Чтобы убедиться, что вы сравниваете локальные показатели с правильными данными полей, выберите «Настольный компьютер» в раскрывающемся списке « Данные полей» > «Устройство» .
   3. В разделе «Настройки среды» в раскрывающемся списке «Сеть» выберите, например, «Быстрый 4G» , а в поле «Загрузка ЦП» — например, «20-кратное замедление ». Также можно установить флажок « Отключить кэширование сети» в этом же разделе.

3. После настройки среды перезагрузите страницу, взаимодействуйте с ней, чтобы получить локальный INP, и снова сравните показатели метрик.

   

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

Таким образом, вы можете приступить к улучшению основных показателей веб-инфраструктуры вашего сайта:

• Оптимизировать LCP
• Оптимизировать INP
• Оптимизировать CLS

Составление и анализ отчета о результатах работы.

В следующих разделах вы найдете инструкции по созданию профиля, изменению настроек захвата и анализу отчета.

Запишите профиль производительности

Когда вы будете готовы к записи, на панели «Производительность» вам будут доступны следующие параметры:

• Рекордная производительность во время выполнения
• Запись производительности загрузки
• Делайте скриншоты во время записи.
• Принудительная сборка мусора во время записи
• Сохранить запись
• Загрузите запись
• Очистить запись

Изменить параметры захвата

Настройки захвата позволяют изменить способ записи производительности в DevTools и предоставляют дополнительную информацию в отчете. Щелкните «Настройки захвата», чтобы открыть меню настроек захвата .

В меню настроек захвата выберите следующие параметры:

• Отключить примеры JavaScript : Отключает запись стеков вызовов JavaScript, отображаемых в основном треке, которые вызываются во время записи. Это снизит накладные расходы на производительность.
• Включение расширенных инструментов анализа отрисовки (медленно) : Захватывает данные расширенных инструментов анализа отрисовки. Значительно снижает производительность.
• Включить статистику по CSS-селекторам (медленно) : собирает статистику по CSS-селекторам. Значительно снижает производительность.
• Регулирование скорости процессора : имитация более низкой скорости работы процессора.
• Ограничение скорости сети : имитация более низкой скорости сети.

Проанализируйте отчет о результатах работы.

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

Ниже представлен список тем из руководства, а также другая полезная документация:

Чтобы узнать, как работать с отчетом:

• Перейдите к записи
• Поиск действий
• Отслеживание инициаторов событий

Используйте Performance Insights, чтобы получить полезную информацию о производительности вашего веб-сайта:

• Анализ производительности

Чтобы научиться сосредотачиваться на том, что действительно важно для вашего рабочего процесса:

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

Чтобы узнать больше о вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий»:

• Просмотр действий в таблице

Чтобы узнать, как анализировать отчет:

• Просмотреть активность в основной ветке обсуждения
• Прочитайте диаграмму пламени.
• Посмотреть скриншот
• Просмотр показателей памяти
• Просмотрите продолжительность фрагмента записи.
• Анализ производительности CSS-селекторов во время событий пересчета стиля.
• Проанализируйте производительность Node.js с помощью панели «Производительность».
• Анализ количества кадров в секунду (FPS)
• Ссылка на событие на временной шкале

Повысьте производительность с помощью этих панелей.

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

• Маяк: Оптимизация скорости загрузки сайта
• Память: Обзор панели памяти
• Рендеринг: Выявление проблем с производительностью рендеринга
• Проблемы: Выявление и устранение неполадок.
• Производительность: Просмотр информации о слоях