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

Дейл Сент-Март
Dale St. Marthe
LinkedIn
Софья Емельянова
Sofia Emelianova
GitHub

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

Обзор

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

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

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

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

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

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

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

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

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

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

Если вы взаимодействуете со своей страницей, панель «Производительность» также фиксирует локальное взаимодействие со следующей отрисовкой (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, и снова сравните показатели метрик.

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

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

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

Собирайте и анализируйте отчет об эффективности

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

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

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

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

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

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

Анализ отчета об эффективности

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

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

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

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

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

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

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

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

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