Полное руководство по Core Web Vitals

Core Web Vitals — это важные реальные веб-показатели, которые измеряют взаимодействие пользователей с Интернетом. Три метрики, из которых они состоят, — это самая большая содержательная отрисовка (LCP), первая задержка ввода (FID) и кумулятивное смещение макета (CLS).

В мае 2020 года Google объявил, что Core Web Vitals станет частью обновления Page Experience и станет фактором ранжирования. Сигналы опыта мобильных страниц используются в ранжировании с мая 2021 года, а десктопная версия стала его частью в феврале 2022 года.

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

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

Что такое Core Web Vitals?

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

• Наибольшая отрисовка содержимого измеряет производительность загрузки — LCP определяет точку во время загрузки страницы, когда наиболее вероятно загрузилось основное содержимое.
• Задержка первого ввода измеряет интерактивность — FID оценивает, как долго пользователи должны ждать, прежде чем они смогут взаимодействовать со страницей.
• Совокупный сдвиг макета измеряет визуальную стабильность — CLS суммирует неожиданные сдвиги в макете видимого содержимого страницы.

Для каждой из этих метрик Google определил соответствующие пороговые значения, соответствующие разным оценкам:

• Хороший,
• Требуется улучшение,
• Бедный.

Чтобы повысить вероятность достижения поставленной цели для большинства пользователей, вы должны стремиться к тому, чтобы не менее 75 % просмотров страниц соответствовали порогу «хорошо» по каждому из трех показателей . Это измерение было выбрано для того, чтобы страницы были удобны для большинства пользователей, независимо от используемого устройства и условий сети.

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

Ahrefs провела исследование Core Web Vitals и проанализировала оценки для большого количества сайтов. Он показал, что в 2022 г. ок. 33% сайтов проходят метрику CWV, что на 10 п. п. выше, чем годом ранее.

Работа над улучшением показателей CWV, безусловно, является аспектом SEO, которым нельзя пренебрегать. Давайте рассмотрим каждую метрику, ее характеристики и способы ее оптимизации.

Самая большая содержательная краска (LCP)

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

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

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

Связанная с этим метрика — First Contentful Paint (FCP) , относящаяся к времени, которое требуется браузеру для отображения первого элемента содержимого DOM после того, как пользователь посещает вашу страницу .

Посмотрите на изображение ниже, чтобы увидеть связь между тем, когда происходит FCP, и когда запускается LCP.

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

В Google установлены следующие пороговые значения для LCP :

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

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

Согласно исследованию Ahrefs , LCP представляется наиболее сложной и трудной для улучшения метрикой по сравнению с FID (с которой сайты борются меньше всего) и CLS. Показатели LCP особенно неблагоприятны для мобильных устройств, вероятно, из-за более медленных соединений и ограничений ЦП.

Как улучшить ЛКП

Вот несколько рекомендаций по оптимизации оценки LCP :

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

Для более глубокого анализа того, как измерять и улучшать LCP, следуйте нашему руководству Largest Contentful Paint .

Задержка первого ввода (FID)

FID измеряет, сколько времени требуется пользователю для взаимодействия со страницей. Эти взаимодействия могут включать такие действия, как:

• Щелкнув ссылку в навигации,
• Ввод адреса электронной почты в поле формы регистрации,
• Выбор опции из выпадающего меню.

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

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

Сосредоточение внимания на первом вводе актуально, потому что:

• Первые впечатления имеют решающее значение для определения общего впечатления пользователя от веб-сайта.
• Наиболее серьезные проблемы с интерактивностью возникают во время загрузки страницы, поэтому сосредоточение внимания на первом взаимодействии пользователя может положительно повлиять на общую интерактивность сайтов в Интернете.

Google установил следующие пороговые значения для FID :

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

Превышение этого времени может помешать пользователям быстро взаимодействовать со страницей.

Как улучшить ФИД

Вот как вы можете оптимизировать свою первую задержку ввода:

• Уменьшить количество запросов к серверу во время загрузки,
• Работайте над оптимизацией вашего JavaScript, минимизируя или откладывая его,
• Удалите ненужные сторонние скрипты,
• Используйте кеш браузера.

Для более глубокого анализа того, как измерять и улучшать FID, следуйте нашему руководству по задержке первого входа .

Совокупный сдвиг макета (CLS)

CLS определяет, сколько элементов на странице смещается во время загрузки страницы.

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

У Google есть следующие пороговые значения для CLS :

Вы должны стремиться к показателю CLS 0,1. или менее.

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

Как улучшить КЛС

Вот как вы можете оптимизировать свой кумулятивный показатель сдвига макета:

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

Для более глубокого анализа того, как измерять и улучшать CLS, следуйте нашему руководству Cumulative Layout Shift .

Как Core Web Vitals влияет на SEO?

Core Web Vitals — это метрики, определяющие пользовательский опыт конкретными измеримыми способами. Улучшенный пользовательский интерфейс означает, что пользователи могут легко найти то, что искали , посещая ваш сайт, и они с большей вероятностью вернутся на ваш сайт.

Мы знаем, что Core Web Vitals являются подтвержденным фактором ранжирования Google , но их влияние на ранжирование не совсем ясно.

Вот ответ Джона Мюллера от 26 февраля 2021 года на вопрос о влиянии Core Web Vitals на результаты поиска:

[…] Актуальность по-прежнему намного важнее. Так что только потому, что ваш веб-сайт быстрее в отношении Core Web Vitals, чем у некоторых конкурентов, не обязательно означает, что в мае вы подниметесь на первую позицию в результатах поиска. […] Для нас должно иметь смысл показывать сайт в результатах поиска. Потому что, как вы понимаете, действительно быстрый веб-сайт может быть совершенно пустым. Но это не очень полезно для пользователей. Поэтому полезно помнить об этом, когда речь заходит о Core Web Vitals. Это то, что замечают пользователи. Это то, что мы начнем использовать для ранжирования. Но это не изменит все полностью. Так что он не уничтожит ваш сайт и не удалит его из индекса, если вы ошиблись. Это не поднимет вас со страницы 10 на позицию номер один, если вы все сделаете правильно.

источник: Джон Мюллер

В сообщении в Твиттере Джон попытался более подробно показать влияние результатов CWV:

Подумайте об этом так. Графика не в масштабе. pic.twitter.com/6lLUYNM53A

— johnmu.xml (личное) (@JohnMu) 21 мая 2021 г.

Измерение влияния Core Web Vitals на ранжирование было трудным для членов SEO-сообщества. Когда было выпущено обновление интерфейса страницы, в поиске появилось много других обновлений, таких как спам-обновления и основное обновление в июле 2021 года .

Это затрудняет отделение влияния CWV от других изменений.  

Кроме того, как вообще можно выделить CWV как непосредственную причину изменения рейтинга, учитывая все остальные внешние факторы, настройки алгоритма и сколько времени Google обрабатывает изменения?

— Лили Рэй (@lilyraynyc) 25 октября 2021 г.

По данным SISTRIX , страницы, соответствующие всем пороговым значениям, рекомендованным Google для показателей CWV, ранжируются на один процентный пункт выше, чем в среднем , что соответствует улучшению на 37%. Между тем, страницы, которые не прошли хотя бы одну метрику CWV, оценивались на 3,7% хуже в индексе видимости SISTRIX.

Moz обнаружил, что наиболее значительное влияние метрик CWV оказали URL-адреса, которые не прошли тесты по всем трем метрикам, которые упали на 1,15 позиции:

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

Джон резюмировал это в ответ на сообщение Reddit:

Еще одна вещь, которую следует иметь в виду в отношении основных веб-жизненных показателей, заключается в том, что это больше, чем случайный фактор ранжирования, это также то, что влияет на удобство использования вашего сайта после того, как он ранжируется (когда люди действительно посещают). Если вы получаете больше трафика (от других усилий SEO) и ваш коэффициент конверсии низок, этот трафик не будет таким полезным, как если бы у вас был более высокий коэффициент конверсии (при условии, что UX/скорость влияет на ваш коэффициент конверсии, что обычно и происходит). . CWV — отличный способ распознать и количественно оценить частые раздражающие факторы пользователей.

источник: Джон Мюллер

Как измерить Core Web Vitals?

Вы можете использовать несколько инструментов для измерения Core Web Vitals . Убедитесь, что вы знаете, какие данные используют инструменты:

• полевые данные, взятые у реальных пользователей, или
• лабораторные данные – собраны из предопределенных условий.

Чтобы понять варианты использования обоих типов данных, убедитесь, что вы знакомы с нашей статьей об измерении веб-производительности с помощью лабораторных и полевых данных .

Отчет об удобстве использования Chrome

Отчет о пользовательском опыте Chrome (CrUX) содержит общедоступные анонимные данные о Core Web Vitals от реальных пользователей на миллионах веб-сайтов. Этот набор данных также включает информацию об устройстве и типах подключения, что позволяет проводить более полную оценку и сравнение взаимодействия с пользователем при использовании различных технологий и сайтов.

CrUX имеет огромную ценность для владельцев сайтов и разработчиков , помогая им оценивать производительность страниц в Интернете.

Данные из отчета Chrome UX можно найти в PageSpeed ​​Insights и отчете Core Web Vitals в GSC.

Кроме того, ознакомьтесь с некоторыми другими вариантами использования данных CrUX .

Маяк

Вы можете получить доступ к Lighthouse в Chrome DevTools:

Важно отметить, что Lighthouse содержит лабораторные данные.

Для анализа Core Web Vitals в Lighthouse используйте режим инкогнито, так как любые плагины или расширения, добавленные в Chrome, могут повлиять на загрузку страницы и отображать неточные результаты.

После выбора «Создать отчет» на странице, которую вы хотите проанализировать, вы увидите результаты оценки и некоторые дополнительные практические сведения, такие как рекомендации и SEO-проверки.

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

Отчет Core Web Vitals в Google Search Console

Вы можете найти отчет, посвященный Core Web Vitals, в Google Search Console. В главном представлении GSC вы найдете его в разделе «Опыт»:

Открыв один из отчетов, вы можете увидеть обзор URL-адресов с соответствующими статусами, включая существующие проблемы, которые привели к этим статусам:

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

Данные для отчета Google Search Console поступают из отчета Chrome UX и отражают опыт реальных пользователей, посетивших URL-адреса.

Статистика PageSpeed

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

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

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

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

Общие SEO-инструменты

Некоторые популярные SEO-инструменты включают функции проверки CWV.

Одним из таких инструментов является Screaming Frog — его платная версия позволяет анализировать метрики CWV после подключения к PageSpeed ​​Insights API. Вы можете экспортировать полученные данные в формате .csv, чтобы использовать их для дальнейшего анализа.

Другой вариант — использовать WebSite Auditor , предлагающий возможность анализировать и сегментировать метрики CWV в пакетном режиме для всех ваших страниц, чтобы упростить процесс их улучшения.

Другие показатели, связанные с Core Web Vitals

Давайте обсудим другие ценные показатели веб-производительности, которые могут помочь оценить работу пользователей в Интернете.

Другие веб-жизненные показатели

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

Помимо метрики First Contentful Paint (FCP), о которой я упоминал в контексте LCP, существуют следующие метрики, о которых следует знать:

• Время до первого байта (TTFB) фиксирует, сколько времени требуется для запроса ресурса и когда начинает поступать первый байт ответа. TTFB полезен для диагностики проблем с LCP, таких как медленное время отклика сервера.
• Время до взаимодействия (TTI) — это время окончания последней длительной задачи, возникшей перед окном молчания, что означает отсутствие длинных задач и не более двух текущих сетевых GET-запросов, или, если длинных задач нет — это стоимость ФЦП.
• Общее время блокировки (TBT) определяет время между FCP (FCP) и TTI, фиксируя, как долго основной поток был заблокирован длительной задачей, которая выполняется более 50 мс и может привести к заметной задержке для пользователя. Общее время блокировки относится к сумме времени блокировки для каждой длительной задачи, происходящей между FCP и TTI.

TTI и TBT — это лабораторные показатели, и, поскольку их нельзя измерить в полевых условиях, они не считаются основными веб-показателями. Но их можно использовать для диагностики проблем, связанных с интерактивностью, которые могут повлиять на FID.

Метрики-кандидаты для Core Web Vitals

Во время Chrome Dev Summit 2021 компания Chrome объявила, что для Core Web Vitals рассматриваются два дополнительных показателя производительности — отзывчивость и плавность.

В настоящее время First Input Delay измеряет задержку ввода. Однако он определяет время, которое требуется браузеру для подготовки к обработке запроса, но не оценивает общую продолжительность события с момента первоначального ввода пользователем на протяжении всего времени жизни страницы. Это то, что будет фиксировать новая метрика « Отзывчивость ».

Узнайте, как можно измерить эту метрику, в публикации web.dev об Отзывчивости .

Между тем, Smoothness будет измерять «заикания» или «зависания» в анимации или во время прокрутки, чтобы помочь понять, какое количество пропущенных кадров анимации может повлиять на пользователей. Оценка покажет, насколько плавной является анимация для пользователя.

Чтобы узнать больше о концепции метрики Smoothness и плане ее измерения, ознакомьтесь с постом на web.dev .

Подведение итогов

Нам не нужно проводить дополнительные исследования или тесты, чтобы определить, что Core Web Vitals никуда не денется . Это ваши пользователи, которые придут на ваш сайт и получат удовлетворительный опыт, если вы потратите время на работу над этими показателями.

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