Поиск возможностей улучшения пользовательского опыта с помощью веб-инструментов Chrome.
Опубликовано: 11 мая 2021 г.
Сегодня мы рассмотрим новые функции инструментов в Lighthouse, PageSpeed и DevTools, которые помогут определить, как ваш сайт может улучшить показатели Web Vitals .
В качестве освежения в инструментах Lighthouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Вы можете найти его в наборе инструментов отладки Chrome DevTools и запустить на любой веб-странице, общедоступной или требующей аутентификации. Вы также можете найти Lighthouse в PageSpeed Insights , CI и WebPageTest .
Lighthouse 7.x включает в себя новые функции, такие как снимки экрана элементов, для упрощения визуального контроля частей вашего пользовательского интерфейса, влияющих на показатели взаимодействия с пользователем (например, какие узлы способствуют сдвигу макета).
Мы также добавили поддержку снимков экрана элементов в PageSpeed Insights, что позволяет легче выявлять проблемы при однократном запуске страниц.
Измерьте основные веб-показатели
Lighthouse может синтетически измерять показатели Core Web Vitals, включая «Наибольшую отрисовку контента» , «Совокупный сдвиг макета» и «Общее время блокировки» (лабораторный прокси-сервер для задержки первого ввода ). Эти метрики отражают загрузку, стабильность макета и готовность к взаимодействию. Другие метрики, такие как First Contentful Paint, выделенные в будущем Core Web Vitals, также присутствуют.
Раздел «Метрики» отчета Lighthouse включает лабораторные версии этих показателей. Вы можете использовать это как сводное представление о том, какие аспекты пользовательского опыта требуют вашего внимания.
Полевые метрики , такие как те, которые можно найти в отчете Chrome UX Report или RUM , не имеют этого ограничения и являются ценным дополнением к лабораторным данным, поскольку они отражают опыт реальных пользователей. Полевые данные не могут предоставить ту диагностическую информацию, которую вы получаете в лаборатории, поэтому они идут рука об руку.
Определите, где вы можете улучшить Web Vitals
Определите самый большой элемент Paint с содержимым
LCP — это измерение воспринимаемого опыта загрузки. Во время загрузки страницы он отмечает точку, когда основной или «самый большой» контент загружен и виден пользователю.
В Lighthouse есть аудит «Наибольший содержательный элемент отрисовки», который определяет, какой элемент был самым большим содержательным отрисовкой. Наведение курсора на элемент выделит его в главном окне браузера.
Если этот элемент является изображением, эта информация является полезной подсказкой о том, что вы можете оптимизировать загрузку этого изображения. Lighthouse включает в себя ряд проверок оптимизации изображений, которые помогут вам понять, можно ли лучше сжать ваши изображения, изменить их размер или представить их в более оптимальном современном формате.
Вы также можете найти LCP Bookmarklet от Энни Салливан полезным для быстрой идентификации элемента LCP с помощью красного прямоугольника всего одним щелчком мыши.
Предварительная загрузка поздно обнаруженных изображений для улучшения LCP
Чтобы улучшить самую большую содержательную отрисовку, предварительно загрузите важные изображения героев, если они поздно обнаруживаются браузером. Позднее обнаружение может произойти, если пакет JavaScript необходимо загрузить до того, как изображение станет доступным для обнаружения.
Нам задают несколько распространенных вопросов о предварительной загрузке образов LCP, которые, возможно, стоит кратко рассмотреть.
Можете ли вы предварительно загрузить адаптивные изображения? Да . Допустим, у нас есть адаптивное главное изображение, указанное с использованием srcset и sizes ниже:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Благодаря атрибутам imagesrcset и imagesizes , добавленным к атрибуту link , мы можем предварительно загрузить адаптивное изображение, используя ту же логику выбора изображения, что и srcset sizes :
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
Будет ли аудит также выявлять возможности предварительной загрузки, если изображение LCP определяется с помощью фона CSS? Да.
Любое изображение, помеченное как изображение LCP, будь то с помощью фона CSS или <img> является кандидатом, если оно обнаружено на глубине водопада три или более.
Ленивая загрузка закадровых изображений и избегание этого для LCP
Закадровые изображения, которые не имеют решающего значения для первоначального взаимодействия с пользователем, могут загружаться с отложенной загрузкой . Это метод, который откладывает загрузку изображения до тех пор, пока пользователь не прокрутит его рядом, что может уменьшить конкуренцию в сети за критически важные ресурсы и в некоторых случаях улучшить LCP. Здесь может помочь аудит «Отложить закадровые изображения» :
Важные изображения, расположенные над сгибом, такие как самое большое изображение Contentful Paint, не должны загружаться отложенно. Это может привести к задержке загрузки образа LCP . Lighthouse подсветит, если изображение LCP неправильно загружается с помощью ленивой загрузки с помощью аудита «Самое большое изображение Contentful Paint было лениво загружено»:
Определить вклад CLS
Совокупный сдвиг макета — это показатель визуальной стабильности. Он определяет, насколько визуально смещается содержимое страницы. В Lighthouse есть аудит для отладки CLS под названием «Избегайте больших изменений макета».
Этот аудит выделяет элементы DOM, которые больше всего способствуют смещению страницы. В столбце «Элемент» слева вы увидите список этих элементов DOM, а справа — их общий вклад в CLS.
Благодаря новой функции «Снимки экрана элементов Lighthouse» мы можем видеть как предварительный просмотр ключевых элементов, отмеченных в ходе аудита, так и масштабировать их для более четкого просмотра:
Для CLS после загрузки может быть полезно постоянно визуализировать с помощью прямоугольников, какие элементы внесли наибольший вклад в CLS. Эту функцию вы найдете в сторонних инструментах, таких как панель инструментов Core Web Vitals от SpeedCurve, и которую мне нравится использовать в Defaced’s Layout Shift GIF Generator :
Чтобы получить представление о проблемах смещения макета в масштабе всего сайта, я использую отчет Core Web Vitals в Search Console . Это позволяет мне видеть типы страниц на моем сайте с высоким CLS (в данном случае помогает самостоятельно определить, на какие части шаблона мне нужно потратить свое время):
Идентификация CLS по изображениям без размеров
Чтобы ограничить совокупный сдвиг макета, вызванный изображениями без размеров, включите атрибуты размера ширины и высоты в изображения и видеоэлементы. Такой подход гарантирует, что браузер сможет выделить правильное количество места в документе во время загрузки изображения.
См . «Настройка высоты и ширины изображений снова важна», чтобы получить хорошее описание важности учета размеров изображения и соотношения сторон.
Идентификация CLS по рекламе
Publisher Ads for Lighthouse позволяет вам найти возможности улучшить процесс загрузки рекламы на вашей странице, включая вклад в изменение макета и выполнение длительных задач, которые могут повлиять на то, как скоро ваша страница станет доступной для использования пользователями. В Lighthouse вы можете включить это с помощью плагинов сообщества.
Помните, что реклама является одним из крупнейших факторов изменения макета в Интернете. Важно:
- Будьте осторожны при размещении нелипкой рекламы в верхней части области просмотра.
- Устраните сдвиги, зарезервировав для рекламного места максимально возможный размер.
Избегайте некомпозитной анимации
Некомпозитная анимация может выглядеть неэффективной на устройствах более низкого уровня, если тяжелые задачи JavaScript задерживают основной поток. Такая анимация может привести к изменению макета.
Если Chrome обнаруживает, что анимацию невозможно скомпоновать, он сообщает об этом в трассировку DevTools, которую читает Lighthouse, позволяя ему перечислить, какие элементы с анимацией не были скомпонованы и по какой причине. Их можно найти в аудите «Избегайте некомпозитной анимации» .
Задержка первого ввода отладки / общее время блокировки / длительные задачи
Первый ввод измеряет время с момента, когда пользователь впервые взаимодействует со страницей (например, когда он нажимает ссылку, нажимает кнопку или использует собственный элемент управления на основе JavaScript) до момента, когда браузер фактически может начать обработку события. обработчики в ответ на это взаимодействие. Длинные задачи JavaScript могут повлиять на этот показатель и его прокси-значение — общее время блокировки.
Lighthouse включает аудит «Избегайте длинных задач основного потока» , в котором перечислены самые длинные задачи в основном потоке. Это может быть полезно для выявления наихудших факторов, способствующих задержке ввода. В левом столбце мы видим URL-адреса скриптов, отвечающих за длинные задачи основного потока.
Справа мы можем увидеть продолжительность выполнения этих задач. Напоминаем, что длинные задачи — это задачи, которые выполняются дольше 50 миллисекунд. Считается, что это блокирует основной поток на время, достаточное для того, чтобы повлиять на частоту кадров или задержку ввода.
Если рассматривать сторонние сервисы для мониторинга, мне также очень нравится визуальная шкала времени выполнения основного потока , которую Caliber имеет для визуализации этих затрат, которая выделяет как родительские, так и дочерние задачи, способствующие длительным задачам, влияющим на интерактивность.
Заблокируйте сетевые запросы, чтобы увидеть влияние до и после в Lighthouse.
Chrome DevTools поддерживает блокировку сетевых запросов , чтобы увидеть влияние удаления или недоступности отдельных ресурсов. Это может быть полезно для понимания стоимости отдельных сценариев (например, таких как сторонние внедрения или трекеры) по таким показателям, как общее время блокировки (TBT) и время взаимодействия.
Блокировка сетевых запросов также работает с Lighthouse! Давайте кратко рассмотрим отчет Lighthouse для сайта. Оценка производительности составляет 63/100 с TBT 400 мс. Копаясь в коде, мы обнаружили, что этот сайт загружает в Chrome полифил Intersection Observer, который не является необходимым. Давайте заблокируем это!
Мы можем щелкнуть правой кнопкой мыши сценарий на панели DevTools Network и выбрать Block Request URL чтобы заблокировать его. Здесь мы сделаем это для полифилла Intersection Observer.
Далее мы можем повторно запустить Lighthouse. На этот раз мы видим, что наш показатель производительности улучшился (70/100), как и общее время блокировки (400 мс => 300 мс).
Замените дорогостоящие сторонние вставки фасадом
Сторонние ресурсы часто используются для встраивания в страницы видео, публикаций в социальных сетях или виджетов. По умолчанию большинство встраиваемых систем загружаются сразу же и могут содержать дорогостоящие полезные данные, которые негативно влияют на взаимодействие с пользователем. Это расточительно, если сторонняя сторона не имеет решающего значения (например, если пользователю нужно прокрутить страницу, прежде чем он увидит это).
Одним из способов повышения производительности таких виджетов является их отложенная загрузка при взаимодействии с пользователем . Это можно сделать, отрисовав облегченный предварительный просмотр виджета (фасад) и загрузив полную версию только в том случае, если пользователь взаимодействует с ней. У Lighthouse есть аудит, который рекомендует сторонние ресурсы, которые можно лениво загружать с помощью фасада , например встраивание видео на YouTube.
Напоминаем, что Lighthouse будет выделять сторонний код , который блокирует основной поток более чем на 250 мс. Это может привести к появлению всех видов сторонних скриптов (в том числе созданных Google), которые, возможно, стоит отложить или отложить загрузку, если то, что они отображают, требует прокрутки для просмотра.
За пределами основных веб-жизненных показателей
Помимо выделения основных веб-показателей, последние версии Lighthouse и PageSpeed Insights также пытаются предоставить конкретные рекомендации, которым вы можете следовать, чтобы улучшить скорость загрузки веб-приложений с большим количеством JavaScript, если у вас включены карты исходного кода.
К ним относятся растущая коллекция проверок для снижения стоимости JavaScript на вашей странице, например, уменьшение зависимости от полифилов и дубликатов, которые могут быть не нужны для удобства пользователя.
Для получения дополнительной информации об инструментах Core Web Vitals следите за учетной записью Twitter команды Lighthouse и разделом «Что нового в DevTools» .