Core Web Vitals: определение, введение в LCP, FID и CLS и советы по оптимизации Core Web Vitals

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

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

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

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

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

Источник изображения: web.dev

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

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

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

Почему Core Web Vitals важен?

Core Web Vitals — это сигналы ранжирования, которые являются частью оценки «опыта страницы» Google. Это важно, потому что Google делает качество страницы официальным фактором ранжирования в Google.
Источник изображения: backlinko.com

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

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

Учитывая все вышесказанное, важно помнить, что показатель качества страницы — это лишь один из примерно 200 факторов ранжирования, которые Google использует для ранжирования веб-сайтов.

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

Три сигнала Core Web Vitals:

Источник изображения: web.dev

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

• Самая большая содержательная краска (LCP)
• Задержка первого ввода (FID)
• Совокупный сдвиг макета (CLS)

Сигнал 1: Самая крупная отрисовка содержимого (LCP): проверяет производительность загрузки

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

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

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

Чтобы проверить свой балл LCP, используйте Google Page Speed ​​Insights. Все, что вам нужно сделать, это:

• Посетите инструмент Google Page Speed ​​Insights .
• Введите свой веб-сайт в поле поиска.
• Щелкните Анализировать.

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

Вы также можете напрямую просмотреть данные LCP в Google Search Console (GSC). Мы рекомендуем его вместо использования Google Page Speed ​​Insights по следующим причинам:

• В PageSpeed ​​Insights вы получите отчет об одной веб-странице, которую вы ввели в строку поиска для анализа. В поисковой консоли вы увидите данные LCP всего вашего сайта.
• Через консоль поиска Google вы получите полный список URL-адресов на вашем веб-сайте, которые являются хорошими, плохими или где-то посередине.
• В рекомендациях Google LCP классифицируется LCP вашего веб-сайта как «хороший», «плохой» и «требует улучшения».

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

Сигнал 2: Задержка первого ввода (FID): проверяет интерактивность/отзывчивость

Первая задержка ввода — это вторая важная веб-служба Google. Он измеряет интерактивность.

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

Идеальное измерение FID составляет менее 100 мс.

Вот несколько примеров взаимодействий на странице, которые рассчитываются для оценки FID:

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

Для бизнес-сайтов, которые собирают пользовательские данные или запрашивают данные для входа, оценка FID невероятно важна.

Сигнал 3: кумулятивный сдвиг макета (CLS): проверяет визуальную стабильность

Кумулятивное смещение макета (CLS) — это основной веб-важный показатель, который измеряет визуальную стабильность. Это метрика, которая вычисляет все изменения макета, которые не вызваны взаимодействием с пользователем. Другими словами, можно сказать, что эта метрика учитывает визуальную стабильность страницы при ее загрузке.

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

Чем ниже ваш CLS, тем выше эффективность вашей страницы.

Оценка CLS менее 0,1 считается идеальной для веб-страницы, поэтому убедитесь, что вы ориентируетесь на нее при оптимизации веб-сайта для оптимального взаимодействия со страницей.

Как оптимизировать три важных веб-элемента (LCP, FID, CLS)

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

Вот список того, что вы можете сделать, чтобы улучшить LCP вашего веб-сайта:

• Минимизируйте свой CSS: чем меньше CSS, тем быстрее ваш LCP.
• Удалите большие элементы страницы. К счастью, Google Page Speed ​​Insights покажет вам, есть ли на вашем веб-сайте элемент, который замедляет LCP вашей страницы. Как только вы определите, что это такое, вы сможете быстро решить эту проблему. Например, анализ оценки LCP Techmagnate в Google Page Speed ​​Insights показывает, что этот элемент неисправен:
• Обновите свой веб-хостинг: лучший хостинг обеспечивает более высокую скорость загрузки (включая LCP).
• Удалите ненужные сторонние скрипты: по возможности избегайте сторонних скриптов.
• Настройте ленивую загрузку: ленивая загрузка означает, что изображения загружаются только тогда, когда пользователь достигает той точки на вашей веб-странице, где есть изображение. Настроив ленивую загрузку, вы сможете быстрее достичь LCP.

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

Как оптимизировать задержку первого ввода (FID):

Вот несколько шагов, которые вы можете сделать, чтобы улучшить показатели FID вашего сайта:

• Минимизируйте (или отложите) Javascript: минимизация или отсрочка JS на вашей странице может помочь вам повысить скорость FID вашей веб-страницы, поскольку потребность вашего браузера в загрузке JS уменьшается или устраняется.
• Удалите некритические сторонние скрипты. Сторонние скрипты, такие как Google Analytics и тепловые карты, могут негативно повлиять на FID и скорость загрузки контента. Определите те, которые не имеют решающего значения для вашего веб-сайта, и удалите их, если они не имеют решающего значения для вашей веб-страницы.
• Поддерживайте небольшое количество запросов и небольшие размеры передачи: оптимизируйте код, чтобы ограничить количество запросов и свести к минимуму размер передаваемых файлов HTML, мультимедиа, изображений и т. д.

Как оптимизировать совокупное смещение макета (CLS):

Вот несколько простых действий, которые вы можете предпринять, чтобы улучшить свой CLS:

• Назначьте рекламным элементам зарезервированное место на вашей веб-странице: выполнение этой простой задачи гарантирует, что ваш контент останется там, где он должен быть. Веб-страницы, на которых нет выделенного места для рекламы, имеют тенденцию нарушать структуру контента и позиционирование, иногда толкая его вверх и вниз по странице, что приводит к высокому CLS и плохой оценке качества страницы.
• Добавьте новые элементы пользовательского интерфейса в нижнюю часть страницы: когда пользователь просматривает страницу вашего веб-сайта, он ожидает, что элементы останутся там, где они есть. Добавляя элементы пользовательского интерфейса, вы можете гарантировать, что это произойдет, и структура содержимого страницы останется неизменной.
• Используйте атрибуты заданного размера для мультимедиа. Использование атрибута заданного размера для таких мультимедиа, как видео, изображения, GIF-файлы, инфографика или другие элементы мультимедиа, очень важно. Это покажет вам, сколько места этот элемент будет занимать на этой странице, что поможет вам защитить вашу веб-страницу от беспрецедентного неправильного размещения контента.

Наши услуги по дизайну и разработке веб-сайтов помогают оптимизировать показатель Core Web Vitals Score.

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

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

• Консоль поиска Google. Еще одним мощным и чрезвычайно удобным инструментом для анализа основных веб-показателей является консоль поиска Google. Он поставляется с уникальным основным отчетом о веб-жизненных показателях в разделе улучшений, который вы можете проверять каждый раз, когда проводите аудит веб-сайта. Самое приятное: вместо того, чтобы демонстрировать производительность отдельной веб-страницы, консоль поиска показывает вам все данные о производительности веб-страницы за один раз.
• PageSpeed ​​Insight: Google PageSpeed ​​Insight — это мощный инструмент, который показывает вам основные веб-жизненные показатели вашей веб-страницы, а также ценные советы по улучшениям, которые вы можете внести.
• Lighthouse: Lighthouse — это еще один инструмент Google, который вы можете использовать для измерения своих основных веб-жизненных показателей. Ранее предназначенный для аудита PWA, теперь он превратился в мощный инструмент для мониторинга производительности. Вооруженный дополнительными функциями и SEO-проверками, маяк можно охарактеризовать как мощный инструмент для анализа данных о скорости вашей веб-страницы и опыте работы с ней.
• GT Metrix: GT Metrix — это веб-сайт для тестирования и мониторинга производительности веб-сайта. Это бесплатный инструмент, который вы можете использовать для оценки своих показателей LCP, TBT и CLS.

Как провести аудит Core Web Vitals с помощью Screaming Frog:

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

Вот что вам понадобится:

• Платная версия Screaming Frog.
• Ключ API PageSpeed ​​Insights.
• Домен веб-сайтов, которые вы хотите проверить.

Давайте начнем.

Шаг 1. Подключите ключ API PageSpeed ​​Insights к Screaming Frog

Первый шаг к использованию Screaming Frog для оптимизации основных веб-ресурсов включает подключение к нему ключа PageSpeed ​​Insights API. Когда вы подключаете их, вы можете получить доступ к данным и рекомендациям PageSpeed ​​Insights постранично на своей панели инструментов Screaming Frog.

Вот шаги, которые вы должны выполнить:

• Откройте Screaming Frog → Конфигурация → Доступ к API → PageSpeed ​​Insights.
• Вставьте свой ключ API из PageSpeed ​​Insights в поле «Секретный ключ».
• Нажмите « Подключиться ».
• После нажатия «Подключиться» нажмите « Метрики ».
• Выберите показатели, которые вы хотите проверить, и нажмите « ОК ».

Шаг 2: Просканируйте веб-сайт.

Следующий шаг включает в себя сканирование вашего сайта.

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

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

Шаг 3: Сообщите о проблеме в соответствующие органы.

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

Вот несколько шагов, которые вы можете выполнить:

• Нажмите на верхнюю панель навигации.
• Щелкните Разбиение на страницы .
• Нажмите « Скорость страницы » в раскрывающемся меню.
• Щелкните Экспорт .

После экспорта данных заполните следующие столбцы:

• Наибольшее время отрисовки содержимого (мс): установите фильтр для поиска страниц с LCP 4000 мс или более.
• Общее время блокировки (мс): установите фильтр для поиска страниц с TBT 300 мс и более.
• Совокупное смещение макета: установите фильтр, чтобы найти страницы с 0,25 CLS или более.

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

Шаг 4. Сообщите о проблемах, связанных со страницами, с рекомендациями.

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

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

• В правой части вкладки «Обзор» прокрутите вниз до PageSpeed.
• Здесь вы найдете проблемы и рекомендации, связанные со скоростью страницы вашего веб-сайта, включая потенциальные решения для улучшения ваших основных веб-жизненных функций.
• Раскрывающийся список скорости страницы будет включать в себя различные показатели, такие как:
  • Устранение ресурсов, блокирующих рендеринг (влияет на LCP)
  • Минимизировать CSS (влияет на LCP)
  • Минимизировать JavaScript (влияет на FID)
  • Удалить неиспользуемый CSS (влияет на LCP)
  • Удален неиспользуемый Javascript (влияет на FID)
  • (и многое другое)
• Нажмите на проблему, чтобы увидеть количество затронутых страниц и экспортировать эти данные в свой рабочий лист. Это поможет вам экспортировать все URL-адреса с соответствующими проблемами.
• На основе данных вы можете принять решение относительно удаления или отсрочки этих элементов с вашей веб-страницы.

Дополнительное чтение: что такое Page Speed ​​SEO

Шаг 5: После аудита и оптимизации снова просканируйте сайт и сравните.

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

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

Другие факторы качества страницы, которые вы должны учитывать:

Вот список главных дополнительных факторов, которые Google считает необходимыми для взаимодействия с пользователем:

• Безопасный просмотр: если ваш веб-сайт не допускает безопасный просмотр, это будет расцениваться как нарушение стандартов взаимодействия с страницей, и вы получите низкую оценку удобства просмотра страницы. Поэтому убедитесь, что ваш веб-сайт не содержит вредоносного или вводящего в заблуждение контента, такого как вредоносное ПО. Вы можете проверить соответствие стандартам безопасности вашего веб-сайта в отчете о проблемах безопасности Google.
• HTTPS: Веб-сайты, которые начинаются с HTTPS, с большей вероятностью будут иметь безопасное соединение. Если у вас нет веб-сайта, который начинается с HTTPS, узнайте, как защитить свой веб-сайт с помощью HTTPS, здесь.
• Удобство для мобильных устройств: проверьте, подходит ли ваша веб-страница для мобильных устройств, с помощью теста Google для мобильных устройств. Если ваша веб-страница не отображается в этой быстрой оценке как «удобная для мобильных устройств», примените стратегии для оптимизации своего веб-сайта для мобильных телефонов и планшетов. Помимо прочего, может помочь улучшение UX и UI и совершенствование навигации вне холста.
• Никаких навязчивых межстраничных объявлений: контент на вашей веб-странице должен быть легко доступен для пользователя. Его отсутствие может привести к низкой оценке опыта страницы. Вот основные вещи, которых следует избегать, чтобы сделать содержимое веб-страницы более доступным для ваших пользователей:
  • Избегайте использования всплывающих окон, которые блокируют большую часть контента вашего сайта.
  • Избегайте показа отдельного межстраничного объявления, которое занимает весь экран. Это навязчиво, так как пользователь должен закрыть его, прежде чем он сможет получить доступ к основному контенту.

Вывод:

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

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

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

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

Мы были бы рады получить известия от вас.