Опубликовано: 4 апреля 2025 г.
Устранение проблем с производительностью в реальном мире означает устранение разрыва между вашей средой разработки и разнообразным опытом производительности ваших пользователей. В этом посте мы рассмотрим новые функции Chrome DevTools, которые помогут вам в большей степени принимать решения по отладке производительности на реальных данных, а не на догадках.
Калибровка ожиданий
Начиная с Chrome 134, DevTools включает в себя калибровку регулирования ЦП — новый инструмент, позволяющий устранить неопределенность при выборе правильного уровня регулирования ЦП. Запустите калибровку один раз, и DevTools сгенерирует для вас настройки регулирования «мобильных устройств низкого уровня» и «мобильных устройств среднего уровня», специфичные для вашей машины разработки.
Распространенное несоответствие в работе над веб-производительностью заключается в том, что мы, разработчики, часто создаем сайты на быстрых настольных устройствах, в то время как многие из наших пользователей используют более скромные мобильные устройства. Отследить проблему с производительностью может быть сложно, если она возникает только на устройстве с гораздо более медленным процессором.
Золотым стандартом является удаленная отладка на реальном мобильном устройстве , но уже почти десять лет Chrome также поддерживает регулирование ЦП для быстрых и облегченных циклов итерации во время разработки.
Но какой уровень регулирования процессора выбрать? 4х? 20х ? Как узнать, какое из устройств лучше всего соответствует типу известных вам устройств, посещающих ваш сайт? И как скорость вашего компьютера влияет на это решение, независимо от того, используете ли вы высокопроизводительную рабочую станцию или Chromebook 8-летней давности в дороге?
Процесс калибровки дросселирования
Когда панель «Производительность» открыта, в настройках среды есть раскрывающийся список, позволяющий установить уровень регулирования ЦП. Если вы еще не запускали калибровку, вы увидите две отключенные опции в раскрывающемся списке «Калиброванные настройки» и опцию «Калибровать…» в самом низу.
Выбор этого пункта приведет вас к настройкам регулирования ЦП в настройках (вы также можете перейти туда напрямую).
- Нажмите кнопку «Калибровать».
- Нажмите «Продолжить» , когда он предупредит вас, что он ненадолго уйдет с текущей страницы.
- Будет запущен быстрый тест для измерения скорости вашей текущей машины, и калибровка завершена.
Параметры регулирования теперь будут заполнены откалиброванными пресетами для устройств низкого и среднего уровня.
Этих двух предустановок должно быть достаточно для большинства случаев использования при разработке, и мы обычно рекомендуем предустановку «среднего уровня», соответствующую «типичному» мобильному устройству, которое можно увидеть в Интернете. Если вы знаете, что многие из ваших пользователей имеют еще более медленные устройства или проблемы с производительностью обычно возникают только у этих пользователей, параметр «низкий уровень» должен быть достаточно медленным, чтобы охватить даже длинный хвост устройств начального уровня.
Наконец, если вы считаете, что с калибровкой что-то пошло не так или ваш локальный компьютер каким-то образом изменился, вы всегда можете выполнить повторную калибровку через раскрывающийся список регулирования или в настройках, что приведет к повторному запуску теста и обновлению предустановок.
Как работает регулирование ЦП в DevTools
Если вам когда-либо было интересно, как работает регулирование ЦП в DevTools, идея относительно проста. Когда вы включаете регулирование для вкладки, Chrome запускает отдельный поток регулирования, который прерывает и приостанавливает основной поток вкладки для частых коротких всплесков. Цель состоит в том, чтобы приостановить основной поток на достаточно долгое время, чтобы продолжительность любой заданной задачи увеличилась на коэффициент регулирования.
Например, при 4-кратном регулировании ЦП основной поток будет приостановлен примерно в 75% случаев, в результате чего выполнение любой работы основного потока займет в четыре раза больше времени.
Преимущество этого подхода в том, что он практически прозрачен для остальной части Chrome; нет необходимости в специальном коде для замедления JavaScript, макетирования или любого другого типа работы, которую должен выполнять браузер. Вся работа в основном потоке занимает больше времени, поскольку самому потоку разрешено выполняться лишь часть времени.
Когда регулирование ЦП действует как настоящее мобильное устройство
В результате многие типы мобильных операций, связанных с процессором, хорошо моделируются с помощью регулирования процессора. Например, если взаимодействие запускает JavaScript и макет, оно с большой вероятностью приведет к выполнению, очень похожему на то, как оно выполнялось бы на мобильном устройстве.
Рассмотрим задачу, запускаемую нажатием кнопки: запуск Javascript для добавления новых элементов в DOM, который затем требует от браузера выполнения вычислений стиля и макета для позиционирования нового контента:
С калиброванной предустановкой регулирования ЦП «среднего уровня для мобильных устройств» (3,7x на этой машине разработки) взаимодействие выглядит очень похоже, но продолжительность значительно увеличивается, что становится длительной задачей:
Тестирование того же взаимодействия на реальном устройстве среднего уровня с использованием удаленной отладки дает удивительно похожий результат как по форме, так и по продолжительности трассировки взаимодействия. Поскольку эта задача в основном связана с процессором в основном потоке (выполнение кода JavaScript страницы, а также кода стиля и макета Chrome), калиброванное регулирование точно воссоздает реальную производительность мобильных устройств:
Когда вам все же может понадобиться протестировать на реальном мобильном устройстве
Хотя регулирование ЦП очень полезно, оно не может моделировать все аспекты мобильного оборудования. На телефоне скорость диска ниже, пропускная способность памяти более ограничена, а термическое регулирование может сработать в любой момент, чтобы снизить скорость выполнения.
Распространенное ограничение регулирования связано с интенсивной работой графического процессора. Мобильные и настольные графические процессоры различаются по архитектуре, и Chrome выполняет операции с графическим процессором в отдельном процессе от основного потока страницы. В результате регулирование ЦП DevTools не затрагивает процесс графического процессора (и это к лучшему, поскольку это повлияет на скорость реагирования самого DevTools и остальной части браузера).
Сложная отрисовка, композитинг и стилизация с большим количеством эффектов — распространенные проблемы с производительностью, которые могут показаться нормальными на машине разработки, но неожиданно медленными на мобильных устройствах. И может быть сложно осознать, что проблема вообще существует, пытаясь воссоздать проблему на вашей машине разработки.
Рассмотрим то же взаимодействие, что и раньше (щелкните и добавьте множество элементов в DOM), только на этот раз новые элементы стилизуются с чрезмерным количеством ресурсоемких графических теней и фильтров размытия .
Начальная форма и продолжительность взаимодействия выглядят одинаково, но в конце есть длинная новая краска основного потока для дополнительных эффектов:
На реальном телефоне среднего уровня часть взаимодействия с основным потоком выглядит очень похожей на смоделированную, включая дополнительную отрисовку, но затем кажется, что дикий процесс графического процессора выполняет огромный объем работы, прежде чем результат взаимодействия сможет появиться на экране:
Работа графического процессора удлиняет взаимодействие еще на 300 миллисекунд, и эта работа практически не существует для графического процессора ноутбука, даже с включенным регулированием процессора (основного потока).
Есть еще несколько случаев, которые также имеют существенные недостатки эмуляции, например, загрузка страниц с глубокими зависимостями, когда существует взаимодействие между имитацией регулирования сети, межпроцессным взаимодействием и доступом к кэшам диска и памяти.
Всегда обязательно в какой-то момент тестируйте на реальных мобильных устройствах. И если вы не можете воссоздать в лаборатории проблему на своем настольном компьютере, которая, как показывают ваши полевые данные, затрагивает мобильных пользователей, обязательно попробуйте удаленную отладку на реальном устройстве, чтобы увидеть, есть ли разница, которую вы упускаете.
Дополнительные улучшения отладки на основе данных
Недавно появились и другие новые функции, которые помогут упростить настройку параметров и решений отладки на основе реальных пользователей.
Если у вас включены полевые данные , на панели «Производительность» будут предлагаться рекомендации по регулированию на основе ваших 75-го процентиля пользователей, измеренных с помощью отчета об опыте пользователей Chrome (CrUX) , а представление показателей в реальном времени предупредит вас, если ваши локально измеренные показатели будут отличаться от полевых данных. Это было подробно описано в более ранней публикации о переносе реальных данных Core Web Vitals в DevTools .
Одним из новых дополнений является то, что информация на панели «Производительность» на боковой панели теперь также будет предупреждать вас, если метрики, измеренные в трассировке, не соответствуют тому, что ваши пользователи испытывают в реальном мире.
Включение полевых данных также позволит вам использовать ваши 75-й процентиль Core Web Vitals, чтобы помочь ранжировать порядок, в котором информация отображается на боковой панели. Если, например, у ваших пользователей обычно отличная наибольшая отрисовка контента (LCP), но плохое взаимодействие с следующей отрисовкой (INP) , идеи, которые помогут улучшить INP, будут иметь тенденцию оказаться в верхней части списка.
И, наконец, если вы когда-либо переключались между несколькими трассировками или загружали трассировки с диска, вам может быть сложно точно вспомнить, какие настройки мобильной эмуляции и регулирования вы использовали в каждой трассировке. В раскрывающемся списке выбора в верхней части панели «Производительность» теперь отображается информация об эмуляции для каждой трассировки.
Остановитесь, откалибруйте и послушайте
В конечном итоге нам необходимо основывать наши решения по отладке на реальном мире: начиная с полевых данных аналитики и пользовательских отчетов для поиска проблем, а затем воссоздавая этот пользовательский опыт в лаборатории для диагностики. Эти новые дополнения DevTools должны помочь сделать этот процесс немного проще.
Калибровка регулирования ЦП и оповещения о различиях в полевых и лабораторных условиях помогают снизить неопределенность в отношении того, находитесь ли вы на правильном пути, и обеспечивают более последовательное приближение к реальной производительности. Избавляясь от догадок в конфигурации и выявляя потенциальные несоответствия, DevTools стремится помочь вам уделять больше времени устранению реальных проблем с производительностью, влияющих на ваших пользователей.
Есть идеи по дополнительным улучшениям или предложения по новым функциям? Дайте нам знать!