Поиск возможностей для улучшения пользовательского опыта с помощью веб-инструментов Chrome.
Опубликовано: 11 мая 2021 г.
Сегодня мы расскажем о новых функциях Lighthouse, PageSpeed и DevTools, которые помогут вам определить, как улучшить показатели Web Vitals на вашем сайте.
Напомним, что Lighthouse – это автоматизированный инструмент с открытым исходным кодом, который позволяет повышать качество веб-страниц. Он входит в набор инструментов отладки Chrome DevTools и может использоваться для проверки любых веб-страниц, как общедоступных, так и требующих аутентификации. Lighthouse также можно найти в PageSpeed Insights, CI и WebPageTest.
Lighthouse 7.x включает новые функции, такие как скриншоты элементов, для упрощения визуального контроля частей вашего пользовательского интерфейса, влияющих на показатели пользовательского опыта (например, какие узлы способствуют сдвигу макета).
Мы также добавили в PageSpeed Insights поддержку скриншотов элементов, чтобы упростить выявление проблем при разовых проверках производительности страниц.
Как измерить показатели Core Web Vitals
Lighthouse может синтетически измерять Core Web Vitals, включая Largest Contentful Paint, Cumulative Layout Shift и Total Blocking Time (лабораторный прокси-сервер для First Input Delay). Эти показатели отражают скорость загрузки, стабильность макета и готовность к взаимодействию. Также доступны и другие показатели, например First Contentful Paint, которая в будущем станет частью Core Web Vitals.
В разделе "Показатели" отчета Lighthouse содержатся лабораторные версии этих показателей. Это сводка по аспектам удобства использования, требующим вашего внимания.
Полевые показатели, например те, которые представлены в Chrome UX Report или RUM, не имеют этого ограничения и являются ценным дополнением к лабораторным данным, поскольку отражают опыт реальных пользователей. Полевые данные не могут предоставить такую диагностическую информацию, которую вы получаете в лаборатории, поэтому они идут рука об руку.
Определите, какие показатели Web Vitals можно улучшить
Как определить элемент, который относится к показателю Largest Contentful Paint
LCP – это показатель, который позволяет определить, насколько быстрой пользователям кажется загрузка тех или иных страниц. Он отмечает момент во время загрузки страницы, когда основной (или самый крупный) контент загрузился и стал виден пользователю.
В Lighthouse есть проверка "Элемент Largest Contentful Paint", которая позволяет определить, какой элемент был самым крупным. При наведении указателя мыши на элемент он будет выделен в основном окне браузера.
Если это изображение, то вам может потребоваться оптимизировать его загрузку. Lighthouse включает ряд проверок оптимизации изображений, которые помогут вам понять, можно ли лучше сжать ваши изображения, изменить их размер или предоставить их в более оптимальном современном графическом формате.
Также может быть полезен букмарклет LCP, созданный Энни Салливан. Он позволяет быстро найти элемент LCP, который будет выделен красным прямоугольником.
Настройте предзагрузку изображений, которые обнаруживаются поздно, чтобы улучшить показатель LCP
Чтобы улучшить показатель Largest Contentful Paint, предварительно загружайте важные главные изображения, если браузер обнаруживает их слишком поздно. Позднее обнаружение может произойти, если перед тем, как изображение станет видимым, необходимо загрузить пакет 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. В этом вам поможет проверка Отложите загрузку скрытых изображений.
Для важных изображений в видимой части страницы, например для Largest Contentful Paint, не следует использовать отложенную загрузку. Это может замедлить загрузку изображения, определяющего LCP. Lighthouse выделит изображение LCP, если оно неправильно загружается с помощью отложенной загрузки, в разделе "Изображение Largest Contentful Paint было загружено с помощью отложенной загрузки":
Как определить, что влияет на CLS
Cumulative Layout Shift – это показатель визуальной стабильности. Он позволяет оценить, насколько сильно смещается контент на странице. В Lighthouse есть аудит для отладки CLS под названием "Избегайте больших сдвигов макета".
В ходе этой проверки выявляются элементы DOM, которые больше всего влияют на смещение макета страницы. В столбце "Элемент" слева вы увидите список этих элементов DOM, а справа – их общий вклад в CLS.
Благодаря новой функции Lighthouse Element Screenshots мы можем как увидеть визуальный предварительный просмотр ключевых элементов, отмеченных в аудите, так и щелкнуть, чтобы увеличить масштаб для более четкого просмотра:
Для CLS после загрузки может быть полезно постоянно визуализировать с помощью прямоугольников, какие элементы внесли наибольший вклад в CLS. Эта функция есть в сторонних инструментах, например в панели Core Web Vitals от SpeedCurve. Мне нравится использовать для этого генератор GIF-файлов со смещением макета от Defaced.
Чтобы получить представление о проблемах со смещением макета на всех страницах сайта, я использую отчет об основных интернет-показателях в Search Console. Это позволяет мне увидеть, какие страницы на моем сайте имеют высокий CLS (в данном случае это помогает определить, на какие части шаблона мне нужно потратить свое время):
Как выявить CLS, вызванное изображениями без указанных размеров
Чтобы ограничить Cumulative Layout Shift, вызванный изображениями без размеров, добавьте атрибуты ширины и высоты для изображений и видеоэлементов. Это позволяет браузеру выделить правильный объем пространства в документе во время загрузки изображения.
Подробнее о том, почему важно учитывать размеры и соотношение сторон изображений, рассказывается в статье Setting Height And Width On Images Is Important Again (Почему важно задавать высоту и ширину изображений).
Как выявить CLS, вызванное рекламой
Publisher Ads для Lighthouse позволяет находить возможности для улучшения загрузки объявлений на странице, в том числе за счет уменьшения сдвига макета и сокращения длительных задач, которые могут задерживать доступ пользователей к странице. В Lighthouse это можно сделать с помощью плагинов сообщества.
Помните, что реклама – это один из основных факторов, вызывающих сдвиг макета на сайтах. Важно:
- Будьте осторожны при размещении незакрепленных объявлений в верхней части области просмотра
- Как зарезервировать для рекламного места максимально возможный размер, чтобы избежать сдвигов
Избегайте некомпозитных анимаций
Некомбинированные анимации могут пропускать кадры на устройствах с низкой производительностью, если основной поток занят выполнением сложных задач JavaScript. Такие анимации могут вызывать сдвиги макета.
Если Chrome обнаруживает, что анимация не может быть скомпонована, он сообщает об этом в трассировке DevTools, которую считывает Lighthouse, что позволяет ему перечислить, какие элементы с анимацией не были скомпонованы и по какой причине. Их можно найти в аудите Не используйте некомпозитные анимации.
Как отлаживать показатели First Input Delay, Total Blocking Time и длительные задачи
Задержка после первого ввода – это время между первым взаимодействием пользователя со страницей (нажатием на ссылку, кнопку и т.д.) и ответом браузера. На этот показатель и его прокси-метрику, Total Blocking Time, могут влиять длительные задачи JavaScript.
В Lighthouse есть проверка Избегайте длительных задач в основном потоке, которая позволяет выявить самые длительные задачи в основном потоке. Это позволяет выявлять главные факторы, которые приводят к задержкам после ввода. В левом столбце указаны URL скриптов, которые отвечают за длительные задачи в основном потоке.
Справа мы видим продолжительность этих задач. Напомним, что длительными задачами считаются задачи, выполнение которых занимает более 50 миллисекунд. Это считается блокировкой основного потока, достаточной для того, чтобы повлиять на частоту кадров или задержку ввода.
Если вы рассматриваете сторонние сервисы для мониторинга, мне также нравится временная шкала выполнения основного потока, которую Calibre использует для визуализации этих затрат, которая выделяет как родительские, так и дочерние задачи, способствующие длительным задачам, влияющим на интерактивность.
Блокируйте сетевые запросы, чтобы увидеть, как они влияют на показатели Lighthouse
Инструменты разработчика Chrome поддерживают блокировку сетевых запросов, чтобы вы могли оценить влияние отдельных ресурсов, которые были удалены или недоступны. Это может быть полезно для понимания того, как отдельные скрипты (например, сторонние вставки или трекеры) влияют на такие показатели, как Total Blocking Time (TBT) и Time to Interactive.
Блокировка сетевых запросов также работает с Lighthouse. Давайте кратко рассмотрим отчет Lighthouse для сайта. Оценка эффективности – 63/100, а общее время блокировки – 400 мс. Изучив код, мы обнаружили, что этот сайт загружает полифил Intersection Observer в Chrome, что не является необходимым. Заблокируем его!
Для этого на панели "Сеть" в Инструментах разработчика нажмите правой кнопкой мыши на скрипт и выберите Block Request URL. В нашем примере это будет полифил Intersection Observer.
Теперь мы можем снова запустить Lighthouse. На этот раз мы видим, что показатель эффективности улучшился (70/100), как и общее время блокировки (400 мс => 300 мс).
Замените ресурсоемкие сторонние встроенные объекты фасадами
Для встраивания видео, виджетов или записей из социальных сетей на страницы часто используются сторонние ресурсы. По умолчанию большинство встроенных объектов загружаются сразу и могут содержать тяжелые полезные нагрузки, которые негативно влияют на удобство пользователей. Это неэффективно, если сторонний ресурс не является критически важным (например, если пользователю нужно прокрутить страницу, чтобы увидеть его).
Чтобы повысить производительность таких виджетов, можно использовать отложенную загрузку при взаимодействии с пользователем. Для этого можно отобразить упрощенную предварительную версию виджета (фасад) и загрузить полную версию, только если пользователь взаимодействует с ней. В Lighthouse есть аудит, который рекомендует сторонние ресурсы, которые можно загружать с помощью фасада, например встроенные видео YouTube.
Напоминаем, что Lighthouse выделяет сторонний код, который блокирует основной поток более чем на 250 мс. Это позволяет выявить все сторонние скрипты (в том числе созданные Google), которые лучше отложить или использовать отложенную загрузку, если для просмотра отрисовываемого ими контента требуется прокрутка.
Помимо Core Web Vitals
Помимо Core Web Vitals, в последних версиях Lighthouse и PageSpeed Insights также приводятся конкретные рекомендации по ускорению загрузки веб-приложений с большим количеством кода JavaScript, если у вас включены файлы исходного кода.
В частности, в нем есть постоянно пополняемый набор проверок, которые позволяют снизить стоимость JavaScript на странице, например за счет уменьшения зависимости от полифилов и дубликатов, которые могут быть не нужны для удобства пользователей.
Чтобы узнать больше об инструментах Core Web Vitals, следите за аккаунтом команды Lighthouse в Твиттере и за новостями DevTools.