Используйте инструменты Google, чтобы эффективно проверять, улучшать и отслеживать свой сайт.
Дата публикации: 28 мая 2020 г.
Основные интернет-показатели – это набор показателей, позволяющих оценить удобство сайта для пользователей по таким критериям, как скорость загрузки, время отклика на действия пользователя и стабильность макета.
В этом руководстве мы рассмотрим рабочий процесс, который поможет вам улучшить показатели Core Web Vitals для вашего сайта. Однако то, с чего вы начнете, зависит от того, собираете ли вы собственные данные о поведении пользователей. а где закончится – зависит от того, какие инструменты Google вы будете использовать для диагностики и устранения проблем с удобством использования.
Core Web Vitals лучше всего измерять в полевых условиях
Core Web Vitals разработаны специально для того, чтобы оценивать удобство сайта для пользователей. Это пользовательские показатели. Инструменты для лабораторных данных, такие как Lighthouse, предназначены для диагностики. Они позволяют выявлять потенциальные проблемы с производительностью и получать рекомендации по их устранению. Лабораторные инструменты работают в определенных, заранее заданных условиях и могут не отражать реальные значения Core Web Vitals, которые наблюдаются у ваших пользователей.
Например, Lighthouse – это лабораторный инструмент, который выполняет тесты с имитацией регулирования в имитируемой среде компьютера или мобильного устройства. Хотя такое моделирование медленной сети и устройства полезно при попытке диагностировать проблемы с производительностью, это лишь один срез большого разнообразия условий сети и возможностей устройств, и поэтому может не отражать то, с чем сталкиваются пользователи на ваших сайтах.
Инструменты для лабораторных испытаний, такие как Lighthouse, обычно выполняют "холодную загрузку" веб-страницы, как если бы ее открыл новый посетитель. Обычно это самая медленная загрузка, но в реальной жизни у посетителей могут быть кэшированы некоторые объекты, если они уже заходили на сайт или просматривали его. Новые посетители и инструменты также могут видеть сайт по-другому, если им показываются уведомления о файлах cookie или другой контент.
Иными словами, хотя лабораторные инструменты могут указывать на потенциальные проблемы с производительностью и помогать в отладке и итерации, они могут не отражать то, как многие из ваших посетителей на самом деле воспринимают ваш сайт. Используйте данные о сеансах реальных посетителей, чтобы оценивать эффективность сайта, и инструменты на основе лабораторных данных, такие как Lighthouse, чтобы диагностировать проблемы и улучшать сайт. Также ознакомьтесь с разделом Когда использовать Lighthouse.
Google измеряет Core Web Vitals с помощью Chrome User Experience Report (CrUX). Это общедоступный набор данных, собранных у реальных пользователей Chrome. На его основе работают многие инструменты Google и сторонних разработчиков, которые создают отчеты о Core Web Vitals сайтов.
Однако у CrUX есть свои ограничения. Оно может сообщить вам, когда возникла проблема, но у него часто недостаточно данных, чтобы объяснить, почему.
По возможности собирайте собственные данные
Лучший набор данных для улучшения производительности сайта – это тот, который вы создаете сами. Для этого нужно собрать данные о посещениях вашего сайта. Способ зависит от размера организации и от того, хотите ли вы платить за стороннее решение или создать собственное.
Платные решения почти наверняка будут измерять Core Web Vitals (и другие показатели эффективности) и обычно предоставляют различные инструменты для изучения полученных данных. Этот метод подходит для крупных организаций с большими ресурсами.
Однако не все компании могут позволить себе сторонние решения. В таких случаях библиотека web-vitals от Google поможет вам собрать все показатели Web Vitals. Однако вы будете нести ответственность за то, как эти данные передаются, хранятся и анализируются.
Если вы уже используете Google Аналитику, но ещё не начали собирать собственные данные полей, вы можете использовать библиотеку web-vitals, чтобы отправлять собранные Web Vitals в Google Аналитику и использовать BigQuery Export в GA4 для создания отчетов по этим данным.
Инструменты Google
Независимо от того, собираете ли вы собственные данные, вы можете использовать инструменты Google для анализа Core Web Vitals. Прежде чем выстраивать рабочий процесс, ознакомьтесь с общими сведениями о каждом инструменте. Это поможет вам понять, какие из них лучше всего подходят для ваших задач.
Отчет об удобстве пользования браузером Chrome (CrUX)
Как упоминалось ранее, CrUX – это общедоступный набор данных, собранных у сегмента реальных пользователей Google Chrome на миллионах сайтов. В нем содержатся Core Web Vitals и другие показатели для сайтов с достаточным объемом трафика.
CrUX доступен в виде ежемесячного набора данных BigQuery на уровне источника или в виде ежедневного API на уровне URL или источника, если URL или источник имеет достаточно выборок в наборе данных CrUX. Данные CrUX доступны в различных инструментах CrUX, которые позволяют получать информацию как программным путем, так и с помощью визуальных средств.
Когда использовать CrUX
Даже если вы собираете собственные данные, CrUX все равно может быть полезен. Хотя CrUX представляет собой подмножество пользователей Chrome, полезно сравнить полевые данные вашего сайта, чтобы увидеть, как они согласуются с данными CrUX. У каждого из них есть свои преимущества и недостатки, которые могут привести к расхождениям. Если вы не собираете никакие данные полей для своего сайта, CrUX будет особенно полезен для получения общего представления – при условии, что ваш сайт представлен в его наборе данных.
Вы можете использовать CrUX напрямую или с помощью другого инструмента (в том числе упомянутых ниже). Набор данных CrUX, используемый напрямую через BigQuery или API, позволяет получить данные, которые не показываются в других инструментах, например данные на уровне страны или дополнительные показатели CrUX.
Когда не следует использовать CrUX
В отчете об удобстве пользования браузером Chrome представлены данные только о пользователях Chrome, причем не обо всех. Полноценное решение RUM может включать больше данных из Chrome и других браузеров, поддерживающих показатели Web Vitals.
Сайты, которые не получают достаточного объема трафика, не представлены в наборе данных CrUX. В этом случае вам нужно будет самостоятельно собрать данные о работе сайта, поскольку CrUX не будет доступен. В противном случае вам придется полагаться на лабораторные данные, которые, как мы уже говорили, могут быть нерепрезентативными.
Поскольку CrUX предоставляет скользящее среднее за предыдущие 28 дней, это не идеальный инструмент для разработки, так как для отражения улучшений в наборе данных CrUX потребуется значительное количество времени.
Наконец, поскольку CrUX – это общедоступный набор данных, объем информации, которую он может предоставить, и способы ее запроса ограничены. Сбор собственных данных RUM позволяет получить больше информации (например, об элементе LCP) и сегментировать данные, чтобы выявить проблемы. Отличаются ли Core Web Vitals для пользователей, вошедших в аккаунт, от показателей для тех, кто этого не сделал? Есть ли у пользователей с медленной отрисовкой самого крупного контента определенный элемент LCP? Какие взаимодействия приводят к высоким значениям FID и INP?
PageSpeed Insights (PSI)
PSI – это инструмент, который позволяет получить данные об удобстве пользования браузером Chrome и имитации загрузки страницы в Lighthouse. Подробную информацию вы найдете в соответствующих разделах.
Когда использовать PSI
PSI отлично подходит для оценки производительности CrUX на уровне страницы или источника как для мобильных, так и для настольных пользователей. Это хороший выбор для первоначального обзора Core Web Vitals для страницы или сайта. Кроме того, вы можете просматривать данные Core Web Vitals для других сайтов, например конкурентов.
PSI также предоставляет данные Lighthouse, которые содержат полезные рекомендации по улучшению Core Web Vitals (если показатели совпадают). Если они не совпадают, рекомендации Lighthouse могут быть менее релевантными.
Поскольку Lighthouse запускается с сервера, он может сформировать более согласованный базовый уровень, чем при запуске Lighthouse из DevTools.
Когда не следует использовать PSI
Инструмент PSI работает только с общедоступными URL. Его нельзя использовать на сайтах, находящихся в разработке и недоступных для всех пользователей.
Данные CrUX доступны только для сайтов, которые соответствуют определенным критериям допуска, в том числе пороговым значениям популярности. Если для страницы или источника недоступны данные CrUX, то PSI менее полезен, поскольку в этом случае он может показывать только лабораторные данные Lighthouse.
Аналогично, если у вас есть только данные CrUX на уровне источника, а не конкретного тестируемого URL, это также ограничивает полезность сопоставления полевых данных на уровне источника с лабораторной диагностикой на уровне страницы. В этом случае вам по-прежнему будут доступны данные на уровне источника, которые позволяют получить общее представление об эффективности сайта, а также результаты проверок Lighthouse. Однако при анализе этих сведений следует проявлять осторожность.
Наконец, если в CrUX доступны данные на уровне страницы, но они отличаются от лабораторных данных Lighthouse, рекомендации Lighthouse могут быть не очень полезны. Это особенно часто происходит при проблемах с CLS после загрузки и при проверке показателей Core Web Vitals, связанных с интерактивностью (FID и INP), когда лабораторные аудиты менее полезны.
Search Console
Search Console позволяет оценивать поисковый трафик и эффективность сайта, в том числе Core Web Vitals. Он доступен только владельцам сайтов, которые подтвердили право собственности на них.
Полезная функция Search Console – группировка похожих страниц (например, использующих один и тот же шаблон) в единую группу для оценки. В Search Console также есть отчет Core Web Vitals, основанный на данных CrUX.
Когда использовать Search Console
Search Console подходит как для разработчиков, так и для других специалистов, которые хотят оценить эффективность поиска и страниц способами, недоступными в других инструментах Google. Представление данных CrUX и группировка страниц по сходству позволяют по-новому взглянуть на то, как повышение производительности влияет на целые категории страниц.
Когда не нужно использовать Search Console
Search Console может не подойти для проектов, в которых используются сторонние инструменты, группирующие страницы по сходству, или если сайт не представлен в наборе данных CrUX.
Группировка страниц также может вызывать путаницу, если примеры страниц в группе имеют характеристики, отличные от остальных страниц в группе. Например, если группа в целом не соответствует определенным Core Web Vitals, но все примеры страниц соответствуют этим Core Web Vitals. Это может произойти, если в группу входят редко посещаемые страницы, которые могут загружаться медленнее, поскольку они с меньшей вероятностью будут кешироваться. Если таких страниц много, они могут повлиять на общий показатель группы.
Lighthouse
Lighthouse – это лабораторный инструмент, который предлагает конкретные способы повышения эффективности страницы. Пути пользователей в Lighthouse также позволяют разработчикам создавать скрипты для тестирования производительности за пределами загрузки страницы.
Lighthouse-CI – это связанный инструмент, который запускает Lighthouse во время сборки и развертывания проекта, чтобы помочь с регрессионным тестированием производительности. Он представляет отчет Lighthouse вместе с pull-запросами и отслеживает показатели эффективности с течением времени.
Когда использовать Lighthouse
Lighthouse отлично подходит для поиска возможностей повышения производительности во время разработки как в локальной, так и в промежуточной среде. Lighthouse CI также полезен на этапах сборки и развертывания в промежуточных и рабочих средах, где необходимо регрессионное тестирование производительности для сохранения хорошего пользовательского опыта.
Когда не следует использовать Lighthouse
Lighthouse (или Lighthouse CI) не заменяет данные наблюдений. Lighthouse – это в первую очередь инструмент диагностики, который выявляет потенциальные проблемы и предлагает рекомендации на основе данных о загрузке страницы. Рекомендации, которые вы получаете, не всегда соответствуют реальному опыту пользователей.
Хотя Lighthouse можно использовать для диагностики рабочих сайтов с помощью таких инструментов, как PageSpeed Insights, в идеале Lighthouse следует использовать в средах разработки и непрерывной интеграции для решения проблем с производительностью до того, как они попадут в рабочую среду.
Результаты проверок Lighthouse также доступны в разделе "Статистика" на панели "Производительность" в инструментах разработчика Chrome. Там можно найти более подробный анализ производительности страницы.
Панель "Производительность" в инструментах разработчика Chrome
Инструменты разработчика Chrome – это набор встроенных в браузер инструментов разработчика, в том числе панель "Производительность". Панель "Производительность" – это экспериментальный инструмент, который работает в двух режимах:
При первом открытии панели "Производительность" на экране "Текущие показатели" отображаются текущие показатели Core Web Vitals с возможностью импорта данных полей из CrUX. Это полезно для просмотра производительности в реальном времени при взаимодействии со страницей, чтобы попытаться выявить проблемы с производительностью, особенно проблемы после загрузки, которые вы можете увидеть с помощью показателей CLS и INP.
Во-вторых, на панели "Производительность" разработчики могут получить профиль (или трассировку) всех действий на странице во время загрузки страницы или в течение определенного периода времени. В этом представлении содержится подробная статистика обо всем, что происходит на странице, включая сеть, рендеринг, отрисовку и скрипты, а также Core Web Vitals страницы. Кроме того, в нем есть статистика, похожая на ту, которую предоставляет Lighthouse.
Когда использовать панель "Эффективность"
Панель "Производительность" предназначена для разработчиков, которым нужны подробные сведения о производительности определенной страницы.
Режим текущих показателей позволяет быстро оценить эффективность страницы и выявить потенциальные проблемы при взаимодействии с ней.
Режим трассировки особенно полезен для отладки проблем с отзывчивостью, влияющих на INP. После того как вы выявите плохо реагирующее взаимодействие и сможете его воспроизвести, на панели "Производительность" можно будет найти множество данных о том, что происходит в браузере, чтобы понять проблему: от блокировки основного потока до стеков вызовов JavaScript и работы по рендерингу.
Когда не нужно использовать панель "Производительность"
Панель "Производительность" – это инструмент разработчика, который в основном предоставляет лабораторные данные, хотя и с некоторым контекстом поля из CrUX. Они не заменяют полевые данные.
В режиме трассировки содержится много сведений для отладки, поэтому начинающим разработчикам или специалистам, не связанным с разработкой, может быть сложно в ней разобраться. Однако в режиме текущих показателей, который открывается по умолчанию, интерфейс проще и удобнее для тех, кому не нужны подробные данные.
Три шага, которые помогут вам поддерживать показатели Core Web Vitals на высоком уровне
Работу над улучшением пользовательского опыта лучше всего рассматривать как непрерывный цикл. Чтобы улучшить показатели Core Web Vitals и другие показатели эффективности, можно сделать следующее:
- Оценивать состояние сайта и выявлять проблемы.
- Отладка и оптимизация.
- Используйте инструменты непрерывной интеграции, чтобы отслеживать и предотвращать регрессии.
Шаг 1. Оцените состояние сайта и определите, что можно улучшить
Для оценки состояния сайта лучше всего начать с полевых данных.
- Используйте PageSpeed Insights, чтобы посмотреть общие показатели Core Web Vitals для источника и конкретную информацию по отдельному URL.
- Search Console может помочь вам выявить страницы, которые нуждаются в улучшении, если на вашем сайте хорошо работает функция группировки страниц.
- Если у вас есть данные RUM, то это часто лучший вариант для выявления конкретных страниц или сегментов трафика с проблемами.
Независимо от того, анализируете ли вы данные, собранные самостоятельно, или данные CrUX, этот первый шаг имеет жизненно важное значение. Если вы не собираете данные полей, то можете использовать данные CrUX, если ваш сайт представлен в наборе данных.
Как анализировать эффективность сайта с помощью PageSpeed Insights
В PageSpeed Insights показываются данные CrUX, которые охватывают последние 28 дней взаимодействия пользователей с сайтом на уровне 75-го процентиля. Это означает, что если 75 % пользовательских взаимодействий соответствуют пороговому значению, заданному для определенного показателя, то взаимодействие считается "хорошим".
Если вы хотите посмотреть эффективность определенной страницы, используйте ее. Для начала оптимизации сайта лучше всего выбрать главную страницу, поскольку она обычно является одной из самых популярных.
В первую очередь обратите внимание на раздел Что видят ваши пользователи. Вы увидите до четырех представлений данных: для мобильных устройств и компьютеров, а также для введенного URL и всего источника. Сравните их и посмотрите, чем они отличаются. Мобильные устройства обычно менее производительны, чем компьютеры, поскольку у них меньше ресурсов и они могут работать в менее стабильных сетевых условиях. Если данные для URL и источника значительно различаются, попробуйте понять, почему это происходит. Главные страницы часто посещаются первыми (то есть являются целевыми страницами), поэтому они могут загружаться медленнее, чем источник, поскольку пользователи сталкиваются с проблемой незаполненного кеша браузера. Последующие страницы, скорее всего, будут загружаться быстрее, поскольку общие объекты будут кешироваться, что приведет к снижению совокупных данных на уровне источника.
В PageSpeed Insights также представлены все три показателя Core Web Vitals (LCP, CLS и INP), а также диагностические показатели TTFB и FCP. Какие из Core Web Vitals не соответствуют норме и насколько? Это поможет вам понять, на чем следует сосредоточить усилия.
Поймите, как связаны эти показатели, особенно LCP. Если LCP низкий, как в этом примере, посмотрите на TTFB и FCP, которые являются контрольными точками для этого показателя. В этом примере TTFB составляет 1,8 секунды, поэтому будет очень сложно уложиться в рекомендуемое пороговое значение 2,5 секунды для хорошего LCP. Это может быть связано с медленной работой бэкенда (проблемы с сервером или отсутствие CDN), медленным подключением к сети или переадресацией, задерживающей первые байты HTML. Подробную информацию вы найдете в руководстве по оптимизации TTFB. FCP занимает ещё одну секунду, что также может указывать на медленное подключение к сети. В этом примере LCP происходит вскоре после FCP, что говорит о хорошей оптимизации ресурса LCP после загрузки страницы. Кроме того, в CrUX теперь доступно больше диагностической информации о типах ресурсов и подразделах, что также помогает выявлять проблемы с LCP.
Чтобы понять, связана ли проблема с CLS с загрузкой (в этом случае Lighthouse обнаружит ее и предложит решение) или с периодом после загрузки (в этом случае Lighthouse не обнаружит ее), посмотрите оценки CLS в CrUX и Lighthouse. Подробнее об оптимизации CLS…
Чтобы оценить отзывчивость, посмотрите на показатели INP. Проверьте аудит TBT в Lighthouse, чтобы узнать, выполняется ли обработка большого объема кода JavaScript во время начальной загрузки страницы. Это может повлиять на INP. Повысить показатель INP может быть непросто. Подробную информацию вы найдете в руководстве по оптимизации INP.
Как выявить в Search Console страницы с низкой эффективностью
PageSpeed Insights – полезный инструмент, если вы хотите проверить определенный URL или сайт в целом, но Search Console позволяет сосредоточить усилия на определенных типах страниц. Это особенно полезно, если у многих страниц есть общие темы или технологии и Search Console может их идентифицировать.
Отчет об основных интернет-показателях в Search Console позволяет получить общее представление об эффективности сайта, но вы также можете изучить данные по отдельным страницам, которые требуют внимания. Кроме того, в Search Console можно:
- Определите, какие группы страниц нуждаются в улучшении, а какие удобны для пользователей.
- Получайте подробные данные об эффективности URL, сгруппированные по статусу, показателю и группам похожих веб-страниц (например, страниц товаров на сайте электронной торговли).
- Получайте подробные отчеты, в которых URL распределены по категориям качества взаимодействия с пользователями на мобильных устройствах и компьютерах.
Выбрав страницы, вы можете использовать PSI, как описано выше, чтобы получить более подробную информацию о проблемах на них.
Шаг 2. Отладка и оптимизация
На первом шаге вы должны были определить, какие страницы требуют улучшения производительности, а также какие из показателей Core Web Vitals вы хотите улучшить. Чтобы получить дополнительную информацию и понять основную причину проблемы, вы можете использовать инструменты Google.
- Ознакомьтесь с результатами аудита Lighthouse, чтобы получить общие рекомендации по улучшению страницы.
- Используйте представление текущих показателей на панели "Производительность", чтобы анализировать Core Web Vitals в реальном времени.
- Используйте трассировку на панели "Производительность", чтобы отлаживать проблемы производительности и тестировать изменения кода.
Более подробные инструкции приведены в следующих руководствах:
Как выявить возможности для улучшения с помощью Lighthouse
PageSpeed Insights запускает Lighthouse за вас. Lighthouse также можно запустить из инструментов разработчика в Chrome, чтобы проверить исправления локально. Однако для выявления и устранения проблем с производительностью на локальном уровне лучше использовать панель "Производительность" (о ней рассказывается ниже).
Важно убедиться, что аудит Lighthouse воспроизводит проблемы, которые вы пытаетесь решить (например, медленный LCP или проблемы с CLS). По умолчанию Lighthouse оценивает удобство использования только во время загрузки страницы. Поскольку это лабораторный инструмент, он также исключает INP в пользу TBT.
Если показатели Lighthouse указывают на проблему, похожую на ту, которую вы пытаетесь решить, то подробная информация в аудитах может помочь выявить проблемы и предложить решения.
Вы можете отфильтровать проверки по интересующим вас показателям Core Web Vitals, чтобы сосредоточиться на устранении проблем, связанных с определенным показателем:
Для INP используйте проверки TBT, чтобы выявить проблемы, которые могут повлиять на эти показатели. Но помните, что без взаимодействий возможности диагностики Lighthouse ограничены.
Как анализировать показатели в реальном времени с помощью экрана текущих показателей в Инструментах разработчика в Chrome
На экране текущих показателей в инструментах разработчика Chrome на панели "Производительность" можно в реальном времени отслеживать Core Web Vitals во время загрузки страницы и просмотра. Поэтому он может фиксировать INP, а также сдвиги макета, которые происходят после загрузки. Вы также можете посмотреть подробную информацию о каждом показателе:
В этом представлении содержится много полезной информации, которая помогает выявлять проблемы производительности. Кроме того, в него можно добавлять данные полей из CrUX. Чтобы получить ещё больше информации, вы можете выполнить трассировку.
Как получить подробные данные на панели "Производительность"
На панели "Производительность" в Инструментах разработчика Chrome можно записать профиль (или трассировку) всех действий на странице за определенный период времени.
Статистика по эффективности доступна на боковой панели Статистика. Также здесь приводятся показатели Core Web Vitals и их наблюдаемые значения, если они доступны.
На дорожке Смещения макета выделены смещения макета. Нажав на них, вы увидите подробные сведения об элементах, которые сместились. Это поможет вам отладить CLS.
Ключевые временные показатели, такие как LCP, можно посмотреть в разделе Timings (Временные показатели) в нижней части трассировки. Нажмите на них, чтобы узнать больше.
Длительные задачи, которые могут привести к проблемам с INP, также выделены красными треугольниками на флейм-графе.
Эти функции, а также информация в других разделах панели "Производительность", помогут вам определить, влияют ли исправления на Core Web Vitals страницы.
Как отлаживать Core Web Vitals на основе полевых данных
Лабораторные инструменты не всегда могут выявить причину всех проблем с Core Web Vitals, которые влияют на пользователей. Это одна из причин, по которой так важно собирать собственные полевые данные, поскольку они учитывают факторы, которые не могут быть учтены лабораторными данными.
Подробнее об отладке производительности на основе полевых данных…
Шаг 3. Отслеживайте изменения
После устранения проблем необходимо убедиться, что это принесло желаемый результат и что новые проблемы не влияют на Core Web Vitals. Для этого требуется мониторинг проблем производительности в рамках рабочего процесса разработчика, чтобы предотвратить их выпуск в рабочую среду, и регулярная проверка данных полей, чтобы убедиться, что это так.
Отслеживайте требования к производительности в средах непрерывной интеграции (CI).
Lighthouse-CI позволяет автоматически запускать аудит Lighthouse при фиксации кода, чтобы предотвратить снижение производительности. Это позволяет проверить время загрузки (которое может варьироваться) или просто провести аудит производительности, чтобы выявить ошибки в коде.
Как отслеживать тенденции в работе сайта с помощью полевых данных
Хотя вы должны стремиться выявлять и устранять все проблемы производительности до того, как они попадут в рабочую версию, мониторинг ваших полевых данных с помощью RUM необходим для обнаружения любых проблем, которые ускользают. Для этого можно использовать различные коммерческие продукты. Библиотека JavaScript web-vitals позволяет автоматизировать сбор данных о полях сайта и использовать их для работы специальных панелей управления и систем оповещения.
Если на сайте не используется решение RUM, вы можете использовать различные инструменты CrUX для базового анализа тенденций на основе полевых данных.
Заключение
Чтобы обеспечить быструю и приятную работу пользователей, необходимо в первую очередь ориентироваться на производительность и внедрять рабочий процесс, обеспечивающий прогресс. Используя подходящие инструменты и процессы для аудита, отладки и мониторинга, вы сможете создавать удобные сайты и поддерживать показатели Core Web Vitals на хорошем уровне.