Core Web Vitals: 7 инструментов и методов для выявления узких мест в производительности

Core Web Vitals (CWV) - горячая тема на данный момент. Здесь мы рассмотрим некоторые инструменты, которые мы можем использовать для выявления проблем с производительностью веб-сайта, в рамках подготовки к предстоящему обновлению рейтинга Google в мае 2021 года.

Хотите узнать больше о Core Web Vitals? Узнайте, что это такое и как оптимизировать для них, в моей статье Core Web Vitals Explained.

Автоматический мониторинг показателей CWV

Если у вас есть несколько веб-сайтов или ключевых страниц, которые вы хотите отслеживать с течением времени, без необходимости вручную запускать тест за тестом, эта электронная таблица от Digital Inspiration может быть для вас. Просто возьмите ключ API Lighthouse PageSpeed, вставьте несколько URL-адресов и готово!

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

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

PageSpeed ​​Insights

Google PageSpeed ​​Insights - это мой незаменимый инструмент для первоначального основного исследования производительности и проблем, связанных с CWV, как для мобильных, так и для настольных устройств. Отчеты содержат «полевые данные»; как реальные пользователи воспринимают веб-сайт вместе с данными Lighthouse «Lab», которые имитируют загрузку страницы, что полезно для повторяемого и последовательного тестирования.

Основные показатели Web Vital четко выделены простыми индикаторами с цветовой кодировкой. Плохие показатели выделены красным, хорошие - зеленым. Эти показатели объединяются, чтобы дать общую оценку скорости, и вам нужно 90% или более для зеленого «паса».

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

Монитор производительности Chrome DevTools

Для более подробного анализа производительности и проблем, связанных с CWV, я часто обращаюсь к монитору производительности Chrome в DevTools, и некоторые из ключевых индикаторов CWV, которые я использую, пронумерованы на снимке экрана ниже.

1. Во-первых, вам нужно убедиться, что вы запускаете монитор производительности с правильным разрешением, поскольку элементы LCP и CLS часто меняются с разными разрешениями. У меня установлен размер 350 x 636 пикселей, чтобы воспроизвести мобильное представление PageSpeed ​​Insights.
2. Перед запуском отчета вы также можете смоделировать возможность подключения и мощность мобильного устройства. Я часто выбираю Fast 3G и 4x замедление процессора.
3. Выбор метрики LCP после создания отчета позволяет определить самый большой элемент. Это должно быть как можно ближе к FCP (First Contentful Paint). Если есть пробел, вы захотите определить и упростить доставку самого большого элемента.
4. Длинные задачи ЦП выделены красными диагоналями на серых полосах. Это часто вызвано более тяжелым JavaScript, представленным желтыми полосами, и влияет на ваши показатели интерактивности (FID, TBT и TTI). Переход вниз по столбцам ниже обычно указывает на нарушающие работу файлы и функции JavaScript.
5. Сдвиги макета выделяются этими красными полосами, и их выбор обычно указывает на то, какой элемент был смещен. Большое их количество приведет к более высоким значениям CLS.
6. Представление фрейма может быть отличным способом визуально выделить то, как отображается контент и макет смещается при загрузке. Для высоких значений CLS часто по фреймам очевидно, в чем причина. В этом примере большой баннер cookie вызывает сдвиг макета по мере выталкивания содержимого.

Расширения Web Vitals для Chrome

Основные показатели поисковой выдачи

Расширение SERP Vitals отображает удобный индикатор для показателей LCP, FID и CLS прямо в результатах поиска. Он отлично подходит для анализа конкурентов и может дать быстрое представление о том, насколько быстрой может быть веб-страница, прежде чем вы ее посетите.

Данные собираются анонимно от реальных пользователей в отчете Chrome User Experience Report (CrUX). Однако он доступен не для всех сайтов, так как новые сайты или сайты с небольшим трафиком не наберут достаточного количества точек данных.

Web Vitals

Удобное расширение Web Vitals измеряет 3 ключевых показателя CWV для пользователей настольных компьютеров в Chrome в режиме реального времени, а его цвет светофора обеспечивает быстрый индикатор при просмотре веб-сайта. Поскольку он не полагается на собранные извне пользовательские данные, он может быть полезен разработчикам, работающим в локальной среде, для своевременного обнаружения любых проблем.

Маяк

Расширения Lighthouse обеспечивают быстрый доступ к той же функции отчетности, которая доступна в Chrome DevTools, и извлекают лабораторные данные с помощью Lighthouse API, а не полевые данные от реальных пользователей через CrUX.

Отчет об эффективности очень похож на мобильный анализ PageSpeed ​​Insights, предлагая аналогичные диагностики и рекомендации. Также создаются дополнительные отчеты для SEO, доступности и передового опыта.

Визуализатор скорости сайта Treo

Визуализатор на https://treo.sh/sitespeed показывает показатели CWV с течением времени, фильтруемые по устройству, подключению и географическому региону. Он обновляется еженедельно и использует данные из отчета CrUX.

В приведенном ниже примере для bbc.co.uk мы можем увидеть, как показатель CLS значительно упал за последние 3 месяца, что дает зеленые результаты «прошел» для всех основных показателей. Это отличный способ проанализировать эффективность показателей CWV с течением времени или провести анализ конкурентов.

Визуализация сторонних запросов

Метрики интерактивности для FID, TTI и TBT часто бывает трудно устранить. PageSpeed ​​Insights может быть полезен с точки зрения идентификации некоторых из самых тяжелых сторонних скриптов, но иногда приличная визуализация может намного легче передать влияние этих скриптов.

Инструмент сопоставления запросов https://requestmap.herokuapp.com/ отлично подходит для этого. Сгенерированные карты содержат узлы для каждого запроса третьей стороны, при этом более крупные узлы представляют сценарии с более высоким воздействием. Если ваши показатели интерактивности плохие, скорее всего, вы увидите много узлов на этой карте.

Вот пример с сайта, у которого есть целых 26 секунд для показателя Time to Interactive TTI. Беглый взгляд на карту показывает виджет живого чата, представленный многочисленными темно-синими узлами вверху, на которые приходится более половины всех запросов.

Инструмент карты запросов также является отличным способом определить, откуда загружаются скрипты или другие ресурсы. Ниже мы видим несколько узлов, поступающих непосредственно из желтого узла Диспетчера тегов Google в этом примере.

Водопады в WebPageTest

Отчеты WebPageTest предоставляют гораздо больше подробностей, чем PageSpeed ​​Insights, и могут быть созданы с различных устройств и мест.

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

Не уверены, как CWV повлияет на ваш сайт, напишите нам сегодня.