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

Дейл Сент-Март
Dale St. Marthe
LinkedIn

Используйте панель «Производительность» для анализа производительности вашего сайта.

Обзор

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

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

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

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

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

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

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

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

Наблюдайте за основными веб-жизненными показателями в реальном времени

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

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

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

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

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

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

Чтобы добавить данные поля:

  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, и снова сравните показатели метрик.

    Среда настроена так, чтобы соответствовать реальному пользовательскому опыту.

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

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

Соберите и проанализируйте отчет о производительности

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

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

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

Изменить настройки захвата

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

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

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

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

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

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

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

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

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

Улучшите производительность с помощью этих панелей

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