С июня нынешнего (2021) года важным фактором ранжирования стали поведенческие метрики, позволяющие оценить, с какой скоростью идет загрузка ресурса; насколько посетителю удобно пользоваться сайтом. Данные собраны в основных веб-показателях — Core Web Vitals.

Это стало определяющим фактором для обязательного включения CWV в систематические аудиты СЕО-специалистов.

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

В приоритете Google — удобство страниц

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

Важно понять:

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

С этим легко справиться, используя инструменты Core Web Vitals:

• Largest Contentful Paint — самый большой фрагмент контента;
• Cumulative Layout Shift — совокупное смещение верстки;
• First Input Delay — отставание первого введения.

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

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

Google относит к числу опасных ресурсы, которые используют соединение HTTP или содержат элементы, открывающиеся с помощью этого протокола. Такие сайты получают низкие позиции при ранжировании. Установите защищенный HTTPS протокол.

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

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

Самый большой фрагмент контента на странице

Скорость загрузки оценивает Largest Contentful Paint (LCP). Однако ее интересует на вся страница, а лишь находящийся на первом экране самый большой фрагмент. К таковым относятся: видео, текст, изображение и подобные.

Во время загрузки первым появляется заголовок либо шапка, а затем открывается расположенное под ним изображение. Вот этот промежуток (задержку) и фиксирует Largest Contentful Paint.

На это способны повлиять разные обстоятельства:

1. Зависимость времени ответа сервера от системы управления содержанием, от разворотливости провайдера, особенностей баз данных, которые были подключены и прочее.
2. Перегружают браузер и замедляют процесс наполнения вплоть до временной остановки файлы JavaScript и CSS, которые блокируют визуализацию сайта.
3. Ресурс будет открываться медленно, если используются большие по размеру картинки и видеоматериалы.
4. Медленно будет проявляться изображение, если загрузку осуществляет сервер. Быстрее процесс движется, если за рендеринг берется браузер. Однако следует учитывать, что при проведении поисковой оптимизации лучше работает рендеринг сервера, поскольку поисковику так проще разобраться с содержанием страницы.

Как проверять LCP

Чтобы проверить, что накопал на ваш веб-ресурс CWV, нужно обратиться к Google Search Console. Откройте «Качество», затем совершите переход в «Основные веб-показатели». Данный инструмент распределяет страницы по трем уровням показателей загрузки: критические, требуют доработки/улучшения, удовлетворительные. Кликнув на проблемные URL-адреса, получите график оценки загрузки LCP на мобильном и десктопном устройстве. Это поможет вовремя увидеть проблему и внести коррективы.

Серьезным подспорьем в работе станут инструменты SEO. Можно воспользоваться программой SE Ranking, у которой доступен обзор всех параметров CWV. Сможете сразу увидеть полную картину: общее время ответа от сервера, число возможных редиректов и иные показатели, которые существенно влияют на загрузку самого большого контента (LCP); оценить общее состояние веб-ресурса, увидеть проблемы, требующие немедленного устранения.

Что поможет улучшить LCP

Решать проблему следует комплексно. Чтобы успешно справиться с задачей и ускорить загрузку самого большого объекта:

• начните с хостинга. Лучший вариант — выделенный сервер или VPN — виртуальный приватный сервер;
• если ведете торговлю в разных государствах, подключите CDN — сеть доставки контента. Это даст возможность распределить нагрузку на несколько серверов. В результате загрузка пойдет быстрее;
• ведите четкий контроль переадресовки. Если редиректов избыточное количество, задержки неизбежны;
• оптимизируйте фото- и видеоконтент. Решить задачу можно с помощью инструментов компрессии. Не забудьте обозначить пропорции с учетом разных экранов;
• ускорить загрузку поможет уменьшение кода (можно воспользоваться автоматической минификацией, например, UglifyJS);
• регулярно проводите аудит плагинов. Устаревшие версии замедляют доступ к ресурсу;
• изучайте и анализируйте трафик с разных устройств.

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

Что такое задержка первого ввода

Задержка первого введения или First Input Delay (FID) определяет, насколько быстро с ресурсом можно начать взаимодействовать: заполнять формы, активировать клавиши и тому подобное. Если приходится томиться в ожидании активности, значит первый ввод явно тормозит.

Проверить FID можно здесь

Для этого можно воспользоваться данными JavaScript-библиотек или RUN (мониторинг реальных пользователей).

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

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

Используйте статистику Chrome User Experience. Ее можно получить через PageSpeed Insights, Search Console, Data Studio. Интересна тем, что содержит информацию о реальных людях, которые дали согласие на сбор статистики и синхронизировали историю поисков на всех устройствах.

Другой не менее удобный источник SE Ranking. Здесь можно получить и дополнительные сведения: Time To Interactive расскажет, как быстро страница приходит в состояние интерактивности; Total Blocking Time поведает, что загрузился первый элемент, но осуществлять действия на странице невозможно.

Что делать, чтобы откорректировать FID

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

Ответ найдете в Chrome DevTools. Сервис продемонстрирует полный процесс загрузки ресурса. Во вкладке Lighthouse создайте отчет Performance и кликните View Original Trace. Узнаете сколько времени в миллисекундах уходит на воспроизведение, например, анимации. Так сможете оценить, можно ли упустить какой-то элемент, чтобы увеличить скорость загрузки.

Вот этими атрибутами можно воспользоваться для асинхронной загрузки: script, defer, async.

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

Что такое смещение верстки

Пользователь начинает работать с ресурсом и вдруг всплывает рекламное объявление. Все на странице начинает прыгать и смещаться. Этот процесс называют смещением макета страницы. Понять, насколько это катастрофично, позволяет последний инструмент CWV — Cumulative Layout Shift (совокупное смещение верстки).

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

Формула для проверки смещения

Рассчитать Cumulative Layout Shift возможно по такой формуле:

Разберемся в ее составляющих. Узнать объем смещения (а это та часть экрана, которая двигается из-за всплывающего окна или до загруженного блока) получится, если разделить площадь всех нестабильных объектов на площадь всего экрана.

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

Возможно ли улучшить CLS?

Безусловно — да! Но сначала следует определить весь динамический контент, который меняет свое место пребывания. Следующая задача — не отходить от правил:

• обязательно вписывать габариты фото- и видеоматериалов, картинок и анимации. Для этого подойдет атрибут srcset;
• для мультипликации пользоваться CSS-свойство transform. Позволит избежать смещения верстки;
• прописывать четкие размеры рекламных объявлений;
• проводить предварительную загрузку шрифтов, чтобы рендеринг ускорился. Можно также взять на вооружение font:display дескриптор, чтобы браузер смог быстро определить шрифт или подгрузить из резерва.

И в заключении

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

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

Если пойдете навстречу требованиям Google, он вам точно отплатит взаимностью.