Core Web Vitals: кратко о техническом SEO - 5.0 out of 5 based on 2 votes

 

Техническое SEO - Core Web Vitals

 

core web vitals техническое SEO

 

Как улучшить CWV?

Согласно исследованиям Google, пользователи мобильного Интернета удерживают свое внимание на экране только 4-8 секунд за раз.
Т.е. у вас есть менее 8 секунд, чтобы заинтересовать пользователя своим сайтом.

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

Ожидаемое обновление Page Experience

CWV предположительно станет элементом ранжирования.
Page Experience Ranking, которое, вероятно, будет постепенно внедряться с середины июня по август 2021 года, будет включать:

  1. Core Web Vitals.Largest Contentful Paint (LCP).First Input Delay (FID).Visual Stability.
  2. Удобство для мобильных.
  3. Безопасный просмотр.
  4. HTTPS.
  5. Никакой навязчивой рекламы на страницах.

Новый отчет о сайте в Search Console

 

Search Console теперь включает отчет о качестве страницы. Включает данные за последние 90 дней.

Чтобы URL-адрес считался «хорошим», он должен соответствовать следующим критериям:

  • URL-адрес имеет статус "Хороший" в отчете Core Web Vitals.
  • Согласно отчету о мобильности, URL-адрес не имеет проблем с удобством использования мобильных устройств.
  • На сайте нет проблем с безопасностью.
  • URL-адрес обслуживается по HTTPS.
  • На сайте нет проблем с рекламой, или сайт не оценивался на качество рекламы.

Новый отчет предлагает виджеты со ссылками на отчеты по каждому из пяти критериев «Хорошо».

 

Largest Contentful Paint (LCP)

 

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

3/4 страниц должны достигать LCP менее чем за 2,5 секунды.

 

Чем может быть LCP?

 

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

  • Элементы img.
  • Элементы image внутри тега svg.
  • Изображения элементов video.
  • Фоновые изображения загружаются через функцию CSS url ().
  • Текстовые узлы внутри блочных элементов.

Ожидаются дополнительные элементы, такие как svg и video в будущем.

 

Что может быть причиной плохого LCP?

 

Плохое LCP вызывает четырьмя типичными проблемами:

  1. Медленное время ответа сервера.
  2. JavaScript и CSS с блокировкой рендеринга.
  3. Медленное время загрузки ресурсов.
  4. Рендеринг на стороне клиента.

 

Диагностика плохого LCP из-за медленного времени отклика сервера

 

Время до первого байта (TTFB)

 

ЕСЛИ вы постоянно видите плохой TTFB в ваших данных, значит, это медленное время отклика сервера.

Как исправить медленное время отклика сервера

Время отклика сервера зависит от множества факторов, зависящих от технологического стека сайта.

Вот несколько возможных способов улучшить TTFB:

  • Оптимизируйте сервер.
  • Используйте CDN.
  • Кэширование.

 

Диагностика плохой LCP из-за блокировки рендеринга JavaScript и CSS

 

Как исправить CSS, блокирующий рендеринг

 

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

Уменьшите CSS.

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

Отложите некритичный CSS.

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

Встроенный критический CSS.

Включите CSS критического пути, используемый для содержимого в верхней части страницы (как указано в отчете о покрытии кода), непосредственно в head.

Используйте запросы динамического мультимедиа.

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

 

Как исправить JavaScript, блокирующий рендеринг

 

Минимизируйте и сжимайте файлы JavaScript.

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

Сжатие включает в себя алгоритмическое изменение формата данных для эффективного взаимодействия с сервером и клиентом.

Отложите неиспользуемый JavaScript.

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

Сведите к минимуму неиспользуемые полифиллы.

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

 

Как исправить сторонние скрипты, блокирующие рендеринг

 

Отложить выполнение скриптов.

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

Убрать скрипты.

Если сценарий использует (iframe) в заголовке, удалите его.

Консолидируйте скрипты.

И проанализируйте ценность сторонних скриптов – насколько их наличие важнее производительности сайта?

 

Диагностика некачественной LCP из-за медленной загрузки ресурсов

 

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

  1. Оптимизируйте и сожмите изображения.
    Никому не нужен png-файл размером 10 МБ.
  2. Предварительная загрузка важных ресурсов.
    Если ресурс является частью критического пути, простой атрибут rel = "preload" указывает браузеру получить его как можно быстрее.
  3. Сжимайте текстовые файлы.
  4. Адаптивная верстка на основе способа сетевого подключения.
    Мобильное устройство в сети 4G вряд ли будет нуждаться в загрузке ресурсов, ориентированных для просмотра на мониторе Ultra 4K.
  5. Кэшируйте ресурсы

Core Web Vitals - это способ измерения эффективности стратегий рендеринга.

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


Как исправить рендеринг на стороне клиента

 

  1. Сведите к минимуму критический JavaScript.
    Используйте разделение кода и встроенные функции в заголовке для функциональности, расположенной выше. Встроенные скрипты должны быть <1 КБ.
  2. Используйте рендеринг на стороне сервера.
    Если на ваших серверах выполняются элементы JS, вы можете вернуть полностью визуализированный HTML. Обратите внимание, что это увеличит ваш TTFB, поскольку сценарии выполняются до того, как ваш сервер ответит.
  3. Используйте предварительный рендеринг.
    Во время сборки выполните свои сценарии и подготовьте HTML-код для входящих запросов. Этот вариант обеспечивает лучшее время отклика сервера, но не работает для сайтов с часто меняющимся товарами или ценами.
    Чтобы было ясно: динамический рендеринг не является решением для рендеринга на стороне клиента. Это даже может стать проблемой на стороне клиента.

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

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

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

3/4 страниц должны иметь FID за <= 100 миллисекунд.

Используйте общее время блокировки (TBT) для тестов

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

TBT измеряется общим временем, в течение которого основной поток занят задачами, выполнение которых превышает 50 мс.

Надо уложиться в <= 300 миллисекунд.

Что вызывает плохой FID?

Плохой FID может возникнуть из-за того, что JS занимает основной поток, что означает, что для взаимодействия с пользователем надо ждать.

На какие элементы страницы влияет FID?

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

1. Текстовые поля.
2. Флажки.
3. Радиокнопки (input и textarea).
4. Раскрывающиеся списки (выбрать).
5. Ссылки

Как исправить плохой FID

Прекратить загружать много сторонних скриптов.

Сторонний код ставит вашу эффективность в зависимость от кого-то.

Вы зависите от их скриптов и от их эффективности.

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

Например, вы отправляете один массивный пакет JS для каждой страницы, в этом пакете есть много функций, которые не влияют на страницу.

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

Разделив этот большой пакет на более мелкие и отправив только те, которые используются, вы освободите основной поток.

Проверьте свой менеджер тегов.

Менеджеры тегов могут быть долгими обработчиками ввода, блокирующими загрузку.

Выполняйте пакеты JS в нужном порядке.

Используйте rel = preload.

Недостаточно? Добавьте атрибут async.

Мало? Отложите выполнение скриптов с помощью атрибута defer.

 

Cumulative Layout Shift (CLS) накопительный сдвиг разметки

 

Отвечает за визуальную стабильность.

Измерение основано на количестве кадров, в которых элемент(ы) визуально перемещается, и на общем расстоянии в пикселях, на которое перемещается элемент(ы).

CLS - единственный Core Web Vital, не измеряемый во времени. Вместо этого CLS - это рассчитываемая метрика.

¾ страниц должны иметь расчетный показатель CLS> 0,10.

 

Диагностика плохого CLS

 

Что можно посчитать в CLS?

Если элемент появляется в исходном окне просмотра, он становится частью расчета метрики.

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

Что вызывает плохой CLS?

Это вполне может быть ваше уведомление о файлах cookie

Как исправить плохой CLS

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

Но в адаптивном веб-дизайне стало меньше деклараций высоты и ширины. Эффектом является перекомпоновка страниц после появления изображения на экране.

Лучше всего использовать таблицы стилей браузера пользователя на основе соотношения сторон изображения.

Сторонняя реклама на сайте точно не влияет положительно на производительность сайта и CLS в частности.

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

Избегайте вставки нового содержимого поверх существующего.

Избегайте рекламы в верхней части страницы.

Предварительно подгружайте шрифты и важные ресурсы.

Поздняя загрузка шрифта вызывает мигание и перезагрузку страницы.

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

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

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

Избегайте document.write ()

Современные браузеры поддерживают опережающий анализ основного потока загрузки.

Они начинают работать заранее, пока скрипты загружаются и выполняются – но появляется document.write () и объявляет, что все , что сделано заранее, было бесполезно.

 

Будущее показателей CWV

 

Google намерен ежегодно обновлять компоненты Page Experience. Будущие показатели CWV будут точно также открыты для использования, как и при первоначальном их появлении.

Это позволит SEO специалистам более тщательно подходить к вопросу оптимизации сайты и предвидеть изменения в ранжировании сайтов заранее

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

 

 

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна