Разработка
Интернет-маркетинг
С июня нынешнего (2021) года важным фактором ранжирования стали
поведенческие метрики, позволяющие оценить, с какой скоростью идет
загрузка ресурса; насколько посетителю удобно пользоваться сайтом.
Данные собраны в основных веб-показателях — Core Web Vitals.
Это стало определяющим фактором для обязательного включения CWV в систематические аудиты СЕО-специалистов.
Давайте разберемся, как Core Web Vitals срывает покров таинственности, раскрывает допущенные ошибки и изменяет результаты ранжирования.
Хотя поисковик заверяет, что эти алгоритмы в полную силу начнут действовать спустя несколько месяцев, подготовиться к неизбежным изменениям стоит уже сейчас. Проанализируйте свой ресурс с точки зрения пользовательского опыта (UX).
Важно понять:
С этим легко справиться, используя инструменты Core Web Vitals:
Придется пересмотреть ряд моментов. Прежде всего заняться оптимизацией ресурса под мобильные гаджеты. Гугл отдает предпочтение именно тем веб-ресурсам, которые уже адаптировались под новые требования.
Наличие обманчивого контента или опасного для пользователя тоже сдвинет позиции онлайн-магазина или информационного сайта. Алгоритм Safe Browsing выискивает любую потенциальную угрозу, поэтому позаботьтесь о безопасности просмотра.
Google относит к числу опасных ресурсы, которые используют соединение HTTP или содержат элементы, открывающиеся с помощью этого протокола. Такие сайты получают низкие позиции при ранжировании. Установите защищенный HTTPS протокол.
Всплывающие рекламные объявления должны быть созданы в соответствии с требованиями. Несанкционированное появление рекламы или слишком большое всплывающее окно негативно влияет на мнение поисковика. Поэтому решительно избавляемся от навязчивых рекламных блоков.
Нам предстоит разобраться, в чем же состоит новизна Core Web Vitals, каким образом эти данные измеряются, можно ли их исправить, как сделать это.
Скорость загрузки оценивает Largest Contentful Paint (LCP). Однако ее интересует на вся страница, а лишь находящийся на первом экране самый большой фрагмент. К таковым относятся: видео, текст, изображение и подобные.
Во время загрузки первым появляется заголовок либо шапка, а затем открывается расположенное под ним изображение. Вот этот промежуток (задержку) и фиксирует Largest Contentful Paint.
На это способны повлиять разные обстоятельства:
Чтобы проверить, что накопал на ваш веб-ресурс CWV, нужно обратиться к Google Search Console. Откройте «Качество», затем совершите переход в «Основные веб-показатели». Данный инструмент распределяет страницы по трем уровням показателей загрузки: критические, требуют доработки/улучшения, удовлетворительные. Кликнув на проблемные URL-адреса, получите график оценки загрузки LCP на мобильном и десктопном устройстве. Это поможет вовремя увидеть проблему и внести коррективы.
Серьезным подспорьем в работе станут инструменты SEO. Можно воспользоваться программой SE Ranking, у которой доступен обзор всех параметров CWV. Сможете сразу увидеть полную картину: общее время ответа от сервера, число возможных редиректов и иные показатели, которые существенно влияют на загрузку самого большого контента (LCP); оценить общее состояние веб-ресурса, увидеть проблемы, требующие немедленного устранения.
Решать проблему следует комплексно. Чтобы успешно справиться с задачей и ускорить загрузку самого большого объекта:
Проделанная работа принесет плоды не только в борьбе за лучшие показатели LCP. Сможете подкорректировать юзабилити сайта, разобраться с различными поведенческими факторами.
Задержка первого введения или First Input Delay (FID) определяет, насколько быстро с ресурсом можно начать взаимодействовать: заполнять формы, активировать клавиши и тому подобное. Если приходится томиться в ожидании активности, значит первый ввод явно тормозит.
Для этого можно воспользоваться данными JavaScript-библиотек или RUN (мониторинг реальных пользователей).
Гугл тоже ведет учет, стремясь охватить пользователей разных категорий, поэтому принимает к сведению даже плохонькие онлайн-соединения.
Нужно понимать, что информация по первому вводу на конкретной странице может отличаться, в зависимости от используемого гаджета и поведения пользователя.
Используйте статистику Chrome User Experience. Ее можно получить через PageSpeed Insights, Search Console, Data Studio. Интересна тем, что содержит информацию о реальных людях, которые дали согласие на сбор статистики и синхронизировали историю поисков на всех устройствах.
Другой не менее удобный источник SE Ranking. Здесь можно получить и дополнительные сведения: Time To Interactive расскажет, как быстро страница приходит в состояние интерактивности; Total Blocking Time поведает, что загрузился первый элемент, но осуществлять действия на странице невозможно.
Для улучшения показателей FID используют все те инструменты, что и для улучшения времени загрузки самого большого объекта (LCP). Можно добавить асинхронную загрузку. Для этого нужно посмотреть, можно ли запрашиваемые сервером блоки подгружать позже.
Ответ найдете в Chrome DevTools. Сервис продемонстрирует полный процесс загрузки ресурса. Во вкладке Lighthouse создайте отчет Performance и кликните View Original Trace. Узнаете сколько времени в миллисекундах уходит на воспроизведение, например, анимации. Так сможете оценить, можно ли упустить какой-то элемент, чтобы увеличить скорость загрузки.
Вот этими атрибутами можно воспользоваться для асинхронной загрузки: script, defer, async.
Используйте технику так называемой «ленивой загрузки» для более быстрого считывания страниц HTML. Не помешает проверить указанные в плейсхолдерах размеры картинки, это поможет избежать смещения.
Пользователь начинает работать с ресурсом и вдруг всплывает рекламное объявление. Все на странице начинает прыгать и смещаться. Этот процесс называют смещением макета страницы. Понять, насколько это катастрофично, позволяет последний инструмент CWV — Cumulative Layout Shift (совокупное смещение верстки).
Суть ошибки в том, что не были заданы четкие размеры для всех элементов страницы; другая причина — динамическое изменение расположения объектов.
Рассчитать Cumulative Layout Shift возможно по такой формуле:
Разберемся в ее составляющих. Узнать объем смещения (а это та часть экрана, которая двигается из-за всплывающего окна или до загруженного блока) получится, если разделить площадь всех нестабильных объектов на площадь всего экрана.
Расстояние, на которое перемещается содержание странички, называют расстоянием смещения. Измеряется путем деления длинной части смещения на высоту экрана (выбираем самую высокую точку).
Безусловно — да! Но сначала следует определить весь динамический контент, который меняет свое место пребывания. Следующая задача — не отходить от правил:
Обновление заработает в полную силу уже в августе, так что есть время на глубокий аудит и доработку ресурса с учетом новых алгоритмов Гугла.
Делайте ставку на удобство сайта для пользователя, отсутствие сдвигов и быструю загрузку страниц. Все эти моменты играют важную роль в продвижении онлайн-магазина в органическом поиске.
Если пойдете навстречу требованиям Google, он вам точно отплатит взаимностью.