Средство повышения производительности. Анализ производительности веб-сайта

Используйте средство производительности для анализа производительности веб-сайта. Существует два main представления:

• На домашней странице отображаются локальные метрики при взаимодействии с текущей веб-страницей.
• Запишите профиль и просмотрите временная шкала производительности.

Подробное содержимое:

• Обзор

  • Откройте средство "Производительность"

    • Использование меню "Команда"

  • Локальные метрики для взаимодействия со страницами

  • Записанные временная шкала профиля

  • Переключение на просмотр локальных метрик или другого профиля

• Мониторинг метрик Core Web Vitals

  • Терминология
  • Использование демонстрационной страницы
  • Вкладка "Взаимодействия"
  • Вкладка "Сдвиги макета"

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

  • Запись профиля производительности
  • Изменение параметров записи
  • Анализ отчета о производительности

• Повышение производительности с помощью этих средств —>

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

Обзор

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

Откройте средство "Производительность"

Чтобы открыть средство производительности , выполните следующие действия:

1. Перейдите на веб-страницу, например демонстрацию "Изучение вселенной ", в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

3. На панели действий в верхней части щелкните инструмент Производительность.

   Если инструмент Производительность не отображается на панели действий, нажмите кнопку Дополнительные инструменты (") и выберите средство Производительность.

Использование меню "Команда"

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

1. Перейдите на веб-страницу, например демонстрацию "Изучение вселенной ", в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

3. В правом верхнем углу devTools щелкните Настройка и управление Средствами разработки, а затем команду Выполнить.

   Или нажмите:

   • macOS: Command+SHIFT+P
   • Windows, Linux, ChromeOS: Control+SHIFT+P

   Откроется меню "Команда " с текстом Выполнить >команду.

4. Начните вводить производительность, выберите Показать производительность [панель], а затем нажмите клавишу ВВОД.

   

Локальные метрики для взаимодействия со страницами

Используйте средство "Производительность ", чтобы просмотреть метрики Core Web Vitals в начальном представлении Локальные метрики . На домашней странице средства производительности отображаются локальные метрики, то есть метрики производительности для отрисоваемой веб-страницы:

• Наибольший объем содержимого (LCP) — как быстро загружается main содержимое страницы.
• Накопительный сдвиг макета (CLS) — мера последнего неожиданного сдвига макета страницы.
• Взаимодействие с next Paint (INP) — скорость реагирования последнего взаимодействия пользователя на странице.

При первоначальном открытии средства производительности метрики Core Web Vitals отображаются в трех карточках в разделе Локальные метрики :

Записанные временная шкала профиля

Кроме того, используйте средство "Производительность " для просмотра записанной трассировки производительности, в том числе:

• Запишите профиль производительности.
• Изменение параметров записи.
• Анализ отчета о производительности. Показывает сведения о производительности страницы за период времени, в котором была выполнена запись, например:
  • Взаимодействие с пользователем, которое произошло во время записи.
  • Запущенный код JavaScript.
  • Выполненные операции оформления и макета.
  • Другие метрики производительности с течением времени, такие как сетевые запросы и сдвиги макета.

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

Переключение на просмотр локальных метрик или другого профиля

Чтобы переключиться на отображение начального представления локальных метрик, нажмите кнопку Назад на странице динамических метрик ().

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

Мониторинг метрик Core Web Vitals

Используйте средство "Производительность ", чтобы просмотреть метрики Core Web Vitals в начальном представлении Локальные метрики . На домашней странице средства производительности отображаются локальные метрики, которые представляют собой метрики производительности для отображаемой веб-страницы:

• Наибольший объем содержимого (LCP) — как быстро main содержимое страницы загружено.
• Накопительный сдвиг макета (CLS) — мера последнего неожиданного сдвига макета страницы.
• Взаимодействие с next Paint (INP) — скорость реагирования последнего взаимодействия пользователя на странице.

Терминология

Термин	Описание	Docs
Web Vitals	Большой набор метрик, обеспечивающих единое руководство по обеспечению удобного взаимодействия с пользователем в Интернете.	Web Vitals
Core Web Vitals	Подмножество web Vitals, которое применяется ко всем веб-страницам и должно измеряться всеми владельцами сайтов. Каждый из core Web Vitals представляет собой отдельный аспект взаимодействия с пользователем, измерим в этой области и отражает реальный опыт критического результата, ориентированного на пользователей.	Core Web Vitals in Web Vitals
Наибольшее содержимое paint (LCP)	Измеряет производительность загрузки . Чтобы обеспечить хороший пользовательский интерфейс, LCP должен выполняться в течение 2,5 секунд после начала загрузки страницы. Время отрисовки самого большого изображения, текстового блока или видео, видимого в окне просмотра, относительно того, когда пользователь впервые переходил на страницу.	Наибольший объем содержимого краски (LCP),оптимизация LCP
Совокупный сдвиг макета (CLS)	Измеряет стабильность визуального элемента. Чтобы обеспечить хороший пользовательский интерфейс, страницы должны поддерживать CLS 0.1. или меньше. Наибольшее число показателей сдвига макета для каждого непредвиденного смещения макета, которое происходит в течение всего жизненного цикла страницы.	Совокупный сдвиг макета (CLS),оптимизация CLS
Взаимодействие с next Paint (INP)	Измеряет интерактивность. Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны иметь inp 200 миллисекунда или меньше. Общая скорость реагирования страницы на взаимодействие с пользователем в зависимости от задержки всех операций щелчка, касания и с клавиатуры, которые происходят на протяжении всего времени посещения страницы пользователем.	Взаимодействие с next Paint (INP)и оптимизация INP
локальные метрики, локальные данные	Метрики LCP, CLS и INP. Они записываются локально на проверяемой веб-странице и обновляются при взаимодействии со страницей.

Использование демонстрационной страницы

Чтобы создать плохую или требуемую метрику улучшения на картах LCP, CLS и INP в средстве производительности :

1. Откройте веб-страницу, например демонстрацию "Изучение вселенной ", в новом окне или вкладке.

   Демонстрационная страница "Изучение вселенной " предназначена для медленной загрузки и обработки взаимодействий, чтобы продемонстрировать, как метрики LCP, CLS и INP можно использовать в средстве производительности для выявления и устранения проблем с производительностью.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

3. На панели действий в верхней части щелкните инструмент Производительность.

   Если инструмент Производительность не отображается на панели действий, нажмите кнопку Дополнительные инструменты (") и выберите средство Производительность.

4. Разверните окно и сделайте область демонстрационной страницы широкой, например 60 % от ширины окна.

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

5. Выберите Область >Дальнейшие действияПараметры среды карта > раскрывающемся списке >Регулирования ЦП выберите 4x замедление — рекомендуется.

   Или выберите Параметры захвата () > Регулирование ЦП в раскрывающемся списке >4x замедление — рекомендуется.

6. Выберите Область >Дальнейшие действияПараметры среды карта > раскрывающемся списке >Регулирование сети выберите Медленный 4G.

7. Выберите Область >Дальнейшие действияПараметры среды карта > установите флажок Отключить сетевой кэш.

   

8. Щелкните правой кнопкой мыши (или долго щелкните) кнопку Обновить слева от адресной строки, а затем выберите Пустой кэш и жесткое обновление.

   Это гарантирует, что образ снова загружается с сервера, а не из локального кэша.

   Карточки LCP и CLS показывают оранжевое значение и нуждается в улучшении, или красное значение и плохое, а не зеленое значение и хорошее.

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

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

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

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

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

12. После завершения отрисовки изображения галактики на отрисовке демонстрационной страницы щелкните один из заголовков в столбце Обнаружения справа, например гелиоцентрическая теория (1543).

    INP карта изменения с не отображаемого значения на оранжевое значение и нуждается в улучшении, или красное значение и плохое значение. Отобразится значение INP .

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

14. В карта INP щелкните значение INP.

    На демонстрационной странице карточки Обнаружения предназначены для медленного развертывания и повторной отрисовки, поэтому между щелчком заголовка и отображением развернутого карта содержимого требуется много времени. Задержка является случайным значением от 100 мс до 1000 мс, что приводит к высокому значению INP.

    Под карточками Локальные метрики заполняются вкладки Взаимодействия и Сдвиги макета .

Вкладка "Взаимодействия"

На вкладке Взаимодействия отображаются сведения о взаимодействии с веб-страницей:

Вкладка Взаимодействия включает:

• Этапов.
• Азы.
• Таймингов.

Чтобы очистить вкладку Взаимодействия , нажмите кнопку Очистить текущий журнал () справа от вкладки Взаимодействия .

Вкладка "Сдвиги макета"

На вкладке Смены макета отображаются сведения о сменах макета:

Вкладка Смены макета включает:

• Отзывов.
• Азы.

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

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

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

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

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

Изменение параметров записи

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

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

• Установите флажок Отключить примеры JavaScript : отключает запись стеков вызовов JavaScript, отображаемых в основной дорожке, вызываемой во время записи. Снижает нагрузку на производительность. См . раздел Отключение примеров JavaScript в справочнике по функциям производительности.

• Установите флажок Включить расширенное инструментирование отрисовки (медленная работа): Захватывает расширенное инструментирование краски. Значительно ухудшает производительность. См . статью Включение расширенного инструментирования краски в справочнике по функциям производительности.

• Установите флажок Включить статистику селектора CSS (медленная работа): Записывает статистику селектора CSS. Значительно ухудшает производительность. См. раздел Просмотр затрат на селектор CSS на боковой панели средства производительностив разделе Новые возможности в средствах разработки (Microsoft Edge 131).

• Регулирование ЦП: имитация более низкой скорости ЦП. См. раздел Регулирование ЦП во время записи в справочнике по функциям производительности.

• Регулирование сети. Имитируйте более низкую скорость сети. См . раздел Регулирование сети во время записи в справочнике по функциям производительности.

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

Полное руководство по использованию средства производительности см. в статье Анализ записи производительности в справочнике по функциям производительности.

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

• См . раздел Навигация по записи в справочнике по функциям производительности.

• См . статью Поиск действий в справочнике по функциям производительности.

• См . раздел Отслеживание инициаторов событий в справочнике по функциям производительности.

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

• Изменение порядка дорожек и их скрытие

• Скрытие функций и их дочерних элементов в диаграмме пламени

• Увеличение масштаба частей записи и переключение между уровнями масштабирования в справочнике по функциям производительности.

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

• Просмотр действий в таблице в справочнике по функциям производительности.

Чтобы проанализировать отчет о производительности, выполните приведенные далее действия.

• Просмотрите действия потока main в справочнике по функциям производительности.
• Ознакомьтесь с диаграммой пламени в справочнике по функциям производительности.
• Просмотрите снимок экрана в справочнике по функциям производительности.
• Просмотрите метрики памяти в справочнике по функциям производительности.
• Просмотрите длительность части записи в справочнике по функциям производительности.
• Анализ производительности селектора CSS во время событий recalculate Style.
• Анализ кадров в секунду (FPS) в справочнике по функциям производительности.
• Справочник по событиям записи производительности

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

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

Средство	Статья
Инструмент Lighthouse	Оптимизация скорости веб-сайта с помощью Lighthouse
Средство "Память "	Устранение проблем с памятью
Вкладка "Аналитика" средства >повышения производительности	Получите полезные сведения в справочнике по функциям производительности.
Средство отрисовки	Средство отрисовки, чтобы увидеть, как выглядит веб-страница с разными параметрами отображения или недостатками зрения
Средство "Проблемы "	Поиск и устранение проблем с помощью средства "Проблемы"
Средство повышения производительности	Просмотр сведений о слоях в справочнике по функциям производительности

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинал страницы находится здесь и авторами Дейл Санкт Марта и София Емельянова.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.