Опубликовано: 17 сентября 2024 г.
В предыдущем посте мы рассмотрели три новые функции, которые помогут вам настроить рабочие процессы производительности в DevTools. Эти эргономические улучшения были только началом наших многолетних усилий, направленных на то, чтобы сделать DevTools еще проще и эффективнее для оптимизации основных веб-жизненных показателей. Сегодня мы запускаем следующую порцию функций: полностью переработанную целевую страницу панели «Производительность», на которой можно просмотреть в реальном времени производительность локальных основных веб-показателей .
В этой статье мы подробнее рассмотрим каждую из новых функций:
- Производительность локальных Core Web Vitals в режиме реального времени
- Данные о реальном пользовательском опыте
- Рекомендации по настройке локальной среды
- Информация, которая поможет вам воспроизвести проблемы
Производительность локальных Core Web Vitals в режиме реального времени
Возможность измерить эффективность вашего локального опыта является важной частью любого рабочего процесса отладки Core Web Vitals. Это может иметь решающее значение для воспроизведения проблем реальных пользователей или нет. Однако измерить эффективность вашей деятельности на местном уровне не всегда было так просто.
Исторически сложилось так, что панель «Производительность» в DevTools показывает подробную временную шкалу сетевых запросов и активности ЦП, что является очень полезным инструментом для отладки производительности. Однако воспроизвести проблемы с производительностью может быть сложно, поскольку вы не узнаете, плоха ли производительность, пока не закончится запись. Как мы узнали из расширения Web Vitals , доступ к данным о производительности локального Core Web Vitals в DevTools меняет правила игры. Итак, мы взяли все, что узнали из расширения, и решили встроить эти функции непосредственно в панель «Производительность».
Впервые все ваши показатели Core Web Vitals доступны на панели «Производительность». Откройте панель «Производительность», и вы сразу увидите, как работает ваша локальная среда — запись не требуется. Фактически, вам даже не нужно открывать DevTools; метрики собираются в фоновом режиме и доступны в любое время. Это пригодится во всех тех случаях, когда вы, возможно, не пытаетесь активно отладить конкретную проблему, но что-то кажется медленным, и вы хотите понять, почему.
В разделе «Локальные метрики» панели представлены локальные метрики Core Web Vitals в режиме реального времени: «Наибольшая отрисовка контента», «Совокупный сдвиг макета» и «Взаимодействие с следующей отрисовкой». Когда вы загружаете страницу и взаимодействуете с ней, эти показатели будут обновляться в режиме реального времени. Они также имеют цветовую маркировку в соответствии с соответствующими пороговыми значениями хорошей и плохой производительности, что позволяет легче выявлять проблемы с производительностью по мере их возникновения.
Данные о реальном пользовательском опыте
Оптимизация проблем с производительностью, с которыми большинство пользователей никогда не сталкивается, возможно, не будет лучшим использованием вашего времени. Аналогично, если ваш локальный опыт нереально быстр, вы, вероятно, упускаете из виду некоторые реальные проблемы. Поэтому, чтобы принять более обоснованное решение о том, как инвестировать свое время, вам следует сравнить эффективность вашей локальной сети с данными реального опыта пользователей, полученными на местах.
Панель «Производительность» теперь дает вам возможность увидеть данные реальных пользователей рядом с вашим локальным опытом. Данные поступают с помощью общедоступного API CrUX , который представляет собой 28-дневную агрегацию опыта реальных пользователей на определенной веб-странице и в источнике. Чтобы включить его, нажмите «Настроить» в разделе « Данные поля» и следуйте инструкциям в диалоговом окне конфигурации.
Обратите внимание, что отдельные URL-адреса и источники (целые веб-сайты) должны соответствовать определенным критериям для включения в набор данных CrUX. Пользовательский опыт также агрегируется по типам настольных и мобильных устройств, если имеется достаточно данных. DevTools сделает все возможное, чтобы автоматически отображать наиболее актуальные для вашего региона данные, по умолчанию используя тот же URL-адрес и тип устройства, если они доступны. Если данных на уровне настольного компьютера или мобильного устройства недостаточно, он попытается отобразить данные, агрегированные по всем типам устройств.
Помимо значения 75-го процентиля, вы можете навести указатель мыши на любой показатель, чтобы увидеть долю реального пользовательского опыта в каждом рейтинге. В этом примере локальное взаимодействие с крупнейшим контентным рисованием происходит нетипично медленно и соответствует только 12% опыта реальных пользователей.
Обладая этими данными, вы получите гораздо более четкое представление о том, насколько репрезентативен ваш локальный опыт, и сможете точно настроить его , чтобы более точно имитировать типичный пользовательский опыт.
Рекомендации по настройке локальной среды
Существует множество различий между лабораторными и полевыми данными , которые усугубляются всеми способами доступа к странице и взаимодействия с ней. Вы можете учесть некоторые из этих различий и сделать свой локальный опыт более репрезентативным, настроив свою среду.
Когда полевые данные включены и доступны, в разделе «Настройки записи» будет предложено эмулировать наиболее распространенный тип устройства, используемый реальными пользователями. Включив режим устройства, вы можете имитировать размер области просмотра мобильного устройства. В адаптивных интерфейсах может измениться элемент, относящийся к самой большой отрисовке контента, и они могут иметь совершенно другие характеристики производительности. Мобильный макет может также отображать определенные элементы, такие как меню навигации, с которым могут взаимодействовать только мобильные пользователи, или подвергаться уникальным изменениям макета, которые иначе не наблюдаются в больших окнах просмотра.
В этом разделе также может быть рекомендована конкретная конфигурация регулирования сети, например Slow 4G . Рекомендации по сети основаны на показателе времени прохождения туда и обратно 75-го процентиля, агрегированном на основе опыта реальных пользователей на этой странице или веб-сайте. Более низкие скорости сети могут сделать характеристики производительности загрузки страницы более реалистичными — как для реальных пользователей настольных компьютеров, так и для мобильных устройств — что может облегчить поиск возможностей для улучшения. Также учтите, что изменения макета учитываются в показателе совокупного смещения макета только в том случае, если они не происходят в течение 500 мс после взаимодействия. Если изменение макета, инициированное пользователем, является результатом сетевого запроса, регулирование сети может быть единственным способом раскрыть его локально.
Регулирование вашего процессора — это еще один способ заставить ваше локальное устройство работать как настоящие пользователи. Регулирование ЦП лучше имитирует относительно медленную работу мобильных устройств, при этом более быстрые машины требуют еще большего регулирования. DevTools недавно добавил возможность дросселировать ваш процессор в 20 раз , что особенно полезно для производительных настольных компьютеров, которые часто используют разработчики. Регулирование ЦП приводит к замедлению выполнения сценариев, что повышает вероятность того, что они станут длительными задачами , что приведет к проблемам взаимодействия с следующей отрисовкой. По той же причине на другие показатели Core Web Vitals также может повлиять более медленное выполнение скрипта, особенно если оно блокирует рендеринг наибольшего фрагмента контента или элементов, которые смещают макет.
Настройка локальной среды с более реалистичными настройками области просмотра, сети и ЦП должна выявить больше проблем с производительностью, о которых вы иначе могли бы не знать. А благодаря рекомендациям, основанным на данных реальных пользователей, которые избавляют вас от догадок, вы можете больше сосредоточиться на поиске и устранении этих проблем.
Информация, которая поможет вам воспроизвести проблемы
Ваша локальная производительность во многом зависит от того, как настроена ваша среда и как вы взаимодействуете со страницей. Например, на типичной веб-странице самый большой элемент Contentful Paint с меньшей вероятностью будет изображением в размерах области просмотра мобильных устройств. Ввод одного символа в текстовое поле может быть быстрым, но быстрый последовательный ввод многих из них может привести к ухудшению взаимодействия со следующей отрисовкой. Чтобы разобраться в этом и получить более воспроизводимый опыт, доступна дополнительная информация о показателях.
Элемент LCP, связанный с метрикой «Самая большая контентная краска», показывает ссылку на сам элемент. Наведение курсора на ссылку выделяет элемент на странице. Щелкнув ссылку, вы перейдете на панель «Элементы», где сможете увидеть элемент в полном контексте документа.
Раздел «Взаимодействия» представляет собой журнал в реальном времени всех подходящих взаимодействий , которые происходят, когда DevTools открыт. Когда вы вводите текст, касаетесь или щелкаете мышью, каждое взаимодействие добавляется в журнал с дополнительной информацией, которая поможет вам лучше понять, что произошло и как это воспроизвести.
Помимо типа взаимодействия (указатель или событие клавиатуры), вы увидите ссылку на цель взаимодействия. Подобно элементу LCP , цель взаимодействия сама по себе является интерактивной, и вы можете навести на нее курсор, чтобы выделить ее на странице, или щелкнуть ее, чтобы увидеть ее на панели «Элементы». Задержка взаимодействия также отображается с использованием той же цветовой кодировки, что и пороговые значения метрики «Взаимодействие с следующей отрисовкой», что упрощает обнаружение самых медленных из них.
Когда вы сможете воспроизвести проблему с производительностью, которую пытаетесь устранить, вы готовы приступить к профилированию . В разделе «Дальнейшие шаги» используйте кнопку «Записать и перезагрузить», чтобы устранить проблемы с производительностью загрузки, такие как «Самая большая отрисовка контента» и «Совокупный сдвиг макета во время загрузки» . Чтобы отладить проблемы, возникающие в результате взаимодействия с пользователем, используйте кнопку «Запись» , чтобы профилировать страницу, одновременно воспроизводя медленные взаимодействия или изменения макета после загрузки вручную.
Что дальше
Обоснование ваших рабочих процессов производительности на локальных данных в реальном времени и данных реальных пользователей, полученных на местах, может помочь вам решить, стоит ли вкладывать больше или меньше усилий в отладку и оптимизацию показателей. Вам следует использовать эти данные для настройки локальной среды, чтобы более реалистично имитировать типы устройств ваших пользователей, скорость процессора или конфигурации сети, чтобы лучше воспроизводить их проблемы с производительностью.
Любой пользователь расширения Web Vitals, вероятно, узнает многие из этих функций, и поэтому вам может быть интересно, что это означает для расширения. В ближайшие недели мы поделимся дополнительной информацией о том, как эти изменения повлияют на расширение.
Мы все еще только начинаем работу над улучшениями панели «Производительность», и многое еще впереди. Скоро мы опубликуем здесь еще одно обновление, а до тех пор мы рекомендуем вам опробовать все эти новые функции на панели «Производительность» и сообщить нам свое мнение. Если у вас есть отзывы, мы будем рады прочитать ваши комментарии в публичном выпуске .