Что такое Core Web Vitals и как его оптимизировать

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

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

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

Что такое Core Web Vitals

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

Давайте далее сломаем это для лучшего понимания.

1. LCP (наибольшая содержательная краска)

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

Хороший LCP составляет 2,5 секунды, в то время как все, что составляет от 2,5 до 4 секунд, нуждается в улучшении, а более 4 секунд считается Google плохим.

САМАЯ БОЛЬШАЯ СОДЕРЖИМАЯ СТАТИСТИКА КРАСКИ

1. На самую большую Contentful Paint приходится 25% вашей оценки производительности Google Lighthouse.
2. 43 % мобильных и 44 % десктопных URL-адресов проходят тест Largest Contentful Paint за 2,5 секунды.
3. Согласно исследованиям, среднестатистический веб-сайт B2B имеет показатель «Самое большое содержание» для мобильных устройств 7,05 балла, что намного выше 2,5 балла, необходимых для получения проходного балла.
4. Согласно исследованиям, средний розничный веб-сайт имеет показатель «Самое большое содержание» для мобильных устройств 9,17 балла, что намного выше 2,5 балла, необходимых для получения проходного балла.

2. FID (задержка первого входа)

FID страницы — это количество времени, которое требуется браузеру для начала обработки обработчиков событий в ответ на первое взаимодействие пользователя со страницей, например щелчок, касание.

Хороший FID ниже 100 мс, в то время как все, что находится между 100-300 мс, нуждается в улучшении, а выше 300 мс считается плохим.

СТАТИСТИКА ЗАДЕРЖКИ ПЕРВОГО ВХОДА

1. Задержка первого ввода составляет 25% вашей оценки производительности Google Lighthouse.
2. 89 % мобильных и 99 % URL-адресов для настольных компьютеров соответствуют эталону 100 миллисекунд для первой задержки ввода.

3. CLS (кумулятивный сдвиг макета)

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

Хороший CLS ниже 0,1, в то время как все, что находится между 0,1 и 0,25, нуждается в улучшении, а выше 0,25 считается плохим.

КУМУЛЯТИВНАЯ СТАТИСТИКА СМЕН РАСПОЛОЖЕНИЯ

1. Совокупное смещение макета составляет 5% от вашей оценки производительности Google Lighthouse.
2. 46% URL-адресов для мобильных устройств и 47% URL-адресов для настольных компьютеров проходят контрольный показатель совокупного смещения макета 0,1.

Теперь, почему Core Web Vitals важен

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

Core Web Vitals, несомненно, повышают значимость UX как элемента ранжирования.

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

Что Джон Мюллер из Google может сказать о Core Web Vitals

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

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

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

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

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

Наиболее важными из них являются:

• оценка Core Web Vitals от PageSpeed ​​Insights;
• Отчет Core Web Vitals в Google Search Console;
• Расширение Core Web Vitals для Chrome.

1. Оценка Core Web Vitals в PageSpeed ​​Insights

Google PageSpeed ​​Insights (PSI) состоит из двух разделов:

• Определите, с чем сталкиваются ваши реальные пользователи (оценка Core Web Vitals)
• Выявление проблем с производительностью (лабораторные данные, оценка PSI).

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

Раздел «Диагностика» PSI также является хорошим ресурсом для получения дополнительной информации о факторах, которые могут изменить любую из трех метрик:

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

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

PSI не всегда предоставляет сводку по полю.

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

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

В Google Search Console (GSC) добавлены два новых отчета Core Web Vitals, один для мобильных и один для настольных компьютеров.

В каждом отчете содержится информация о полевых данных и производительности групп URL-адресов.

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

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

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

3. Использование отчета об опыте использования Chrome (CrUX) для получения полевых данных.

Доступ к набору данных CrUX можно получить двумя способами:

• API-интерфейс Chrome UX Report. Чтобы получить доступ к этому разработчику, разработчик должен быть знаком с JavaScript и JSON.
• BigQuery — требуется проект Google Cloud и навыки работы с SQL.

Вам нужно будет приложить больше усилий, чем просто передать страницу через PSI или GSC. Но они предлагают больше возможностей для упорядочивания и визуализации данных. BigQuery, например, имеет функции для нарезки данных и объединения с другими наборами данных.

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

Некоторые важные статистические данные о Core Web Vitals

1. 56% из 100 лучших доменов для настольных компьютеров проходят тест Core Web Vitals
2. Эффект сильного бренда — крупные бренды занимают высокие позиции даже при низкой эффективности.
3. 61% из 100 лучших мобильных устройств прошли Core Web Vitals в феврале 2022 г.
4. В феврале 2022 года среднее время загрузки 100 лучших доменов в США составляло 2,38 секунды на настольных компьютерах и 2,32 секунды на мобильных устройствах, что ниже разумного порога Google в 2,5 секунды.
5. В феврале 2022 года средний показатель CLS для настольных компьютеров и мобильных устройств составлял 0,11 и 0,08 соответственно — это первый раз, когда средний показатель CLS для мобильных устройств для 100 лучших сайтов опустился ниже подходящего порога Google в 0,1.
6. В январе 2020 года только 22% настольных и 27% мобильных доменов из 100 лучших прошли Core Web Vitals соответственно. Перенесемся в февраль 2022 года, и эта доля увеличилась более чем вдвое до 56% на настольных компьютерах и 62% на мобильных устройствах. Это показывает, что самые эффективные домены добились значительного повышения производительности сети.
7. Топ-100, B2B, здравоохранение и Dict/справочные сайты имеют среднюю LCP 2,5 секунды или меньше на обоих устройствах.
8. В среднем мобильный LCP для Travel в 1,6 раза хуже, чем для сайтов-словарей/справочников.
9. В среднем десктопный LCP для Travel в 1,5 раза хуже, чем для доменов B2B.
10. URL-адреса на позиции 1 имеют на 10 % больше шансов пройти оценку Core Web Vitals, чем URL-адреса на позиции 9.
11. При переходе с позиции 1 на позицию 5 процент сдачи теста Core Web Vitals снижается на 2 % для каждой позиции.

Как оптимизировать основные веб-жизненные показатели

Теперь, когда у нас есть четкое представление о Core Web Vitals и о том, как они работают, мы можем обратить внимание на некоторые рекомендуемые шаги по улучшению Core Web Vitals. Помните, что результаты теста будут определять шаги, которые вам необходимо предпринять, чтобы повысить свои баллы. Поэтому важно учитывать советы и предложения, сделанные PageSpeed ​​Insights (или другими инструментами тестирования, которые вы используете).

Ниже приведены проверенные основные стратегии для повышения ваших показателей Core Web Vitals.

1. Используйте сеть доставки контента

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

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

Используя CDN, вы можете сократить время загрузки LCP пользователями. Время до первого байта также может быть уменьшено с его использованием (TTFB).

2. Оптимизируйте изображения

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

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

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

Внося изменения в исходный код, вы можете изменить свойства ширины и высоты ваших медиафайлов.

3. Реализуйте ленивую загрузку

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

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

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

4. Оптимизируйте шрифты вашего сайта

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

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

С другой стороны, если соответствующий веб-шрифт еще не загружен, браузер может не отображать текстовые компоненты автоматически. Однако переключение на альтернативные шрифты может привести к нежелательным изменениям макета, что снизит ваш балл CLS.

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

5. Обновите свой хостинг WordPress

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

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

Для хостинга Читать: Обзор Bluehost

6. Устранение ресурсов, блокирующих рендеринг

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

Однако вы можете предотвратить негативное влияние этих скриптов на ваш UX (и, в свою очередь, помочь повысить Core Web Vitals), удалив блокирующие рендеринг ресурсы и любые ненужные CSS или скрипты.

Для этого существует множество методов. Во-первых, удалите все лишние пробелы или комментарии из вашего JavaScript и CSS. Кроме того, вы можете уменьшить размер вашего JavaScript и CSS, объединив файлы.

7. Отложите загрузку JavaScript

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

Это ускоряет загрузку веб-страниц, блокируя загрузку файлов JavaScript.

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

8. Реализуйте кэширование контента.

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

Кэширование очень помогает улучшить Core Web Vital Scores.

9. Предварительно загрузите главные изображения

Главные изображения обычно являются наиболее важным элементом, который появляется над содержимым сгиба. Таким образом, если они загружаются быстрее, общий UX значительно улучшается. LCP можно значительно уменьшить, используя атрибут ссылки «rel=preload» , который особенно полезен для основных изображений, загруженных с помощью CSS или JavaScript.

10. Не отдавайте предпочтение рекламе или всплывающим окнам над другим контентом.

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

Выделите место для рекламы, фреймов и других форм динамического контента.

Не выделять для них определенное место — это верный способ нарушить макет, как и в случае с изображениями и видео. Чтобы избежать переполнения контейнера содержимым, используйте свойство overflow: hidden и выберите контейнер подходящего размера.

11. Разбивайте длинные задачи

Это должно быть вашим главным приоритетом. Когда длинные задачи задерживают основной поток, он не может оперативно реагировать на запросы пользователя. Производительность веб-сайта можно значительно повысить, разбив их. Это уменьшает FID и улучшает UX

12. Остановите или отложите запуск любых ненужных сторонних скриптов.

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

Как обстоят дела у 10 лучших доменов США с точки зрения основных веб-показателей на основе SEO-видимости Searchmetrics.

Все показатели, а также сведения о том, соответствует ли домен требованиям Core Web Vitals, предоставляются ежемесячно на уровне домена. В феврале 2022 года 75% всех загрузок страниц Википедии на рабочем столе занимали менее 1,1 секунды, а домен получил 0 баллов как в FID (указано в миллисекундах), так и в CLS, пропустив Core Web Vitals.

Топ-10 CWV для мобильных устройств на основе метрики SEO-видимости Searchmetrics .

По возможности использовалась мобильная версия домена. Однако это в основном зависит от сбора данных CrUX. Более высокая доля мобильных сайтов проходит Core Web Vitals, чем настольных компьютеров.

Заключение

Core Web Vitals меняет правила игры для улучшения работы в Интернете для всех. Эти измерения будут по-прежнему включены в систему ранжирования Google.

Вот почему очень важно следить за ними, даже если вы не видите ничего плохого.

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