7 советов, как улучшить Core Web Vitals и другие сигналы Page Experience

Автор: Рэйчел Костелло (Rachel Costello) – консультант по техническому SEO, Builtvisible. 

В 2021 году Google обновит свой алгоритм, чтобы встроить в него новый сигнал ранжирования – Page Experience (Удобство страницы). 

Цель этого изменения – учесть тот пользовательский опыт, который обеспечивают страницы, возвращаемые в результатах поиска, а не только традиционные и более объективные сигналы, такие как Page Rank и on-page таргетинг, используемые исторически. 

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

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

  • Core Web Vitals. Это комбинация трёх основных показателей загрузки: Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS), которые измеряют визуальную загрузку, интерактивность и визуальную стабильность страниц. 
  • Оптимизация для мобильных устройств. Этот сигнал показывает, насколько удобно использовать сайт на мобильных устройствах, включая читабельность контента, кликабельность ссылок и других on-page элементов, а также доступность. 
  • Безопасный просмотр. Определяет такие проблемы безопасности, как вредоносное ПО, фишинг и взломанный контент, чтобы пользователи могли без риска просматривать контент. 
  • HTTPS. Использует ли сайт защищённый протокол HTTPS, как рекомендуется, или нет. 
  • Межстраничные объявления. Не мешают ли они пользователям потреблять основной контент страницы, не закрывают ли его. 


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

1. Используйте предварительную загрузку основных ресурсов для ускорения визуальной загрузки 

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

Именно здесь измеряется Largest Contentful Paint (LCP) – первая метрика в составе Core Web Vitals. Она показывает, насколько быстро загружается основной элемент на странице. 

Чтобы определить, что представляет собой этот элемент, проверьте страницу в Chrome DevTools, и он отобразится на каскадной диаграмме на вкладке Performance. 


Выберите пункт Screenshots и начните профилирование страницы во время её загрузки, нажав кнопку записи. 

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

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


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


2. Оптимизируйте активность основного потока путём минимизации длинных задач 

Существует множество скрытых проблем, из-за которых пользователю приходится ждать, пока браузер отреагирует на нажатие или клик по странице. И это то, что измеряет вторая метрика Core Web Vitals – First Input Delay (FID). 

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

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

В Chrome DevTools длинные задачи можно найти в верхней части каскадной диаграммы на вкладке Main. Они будут выделены красным треугольником. 


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


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

3. Резервируйте место для изображений и встраиваемых файлов 

Третья метрика из набора Core Web Vitals, Cumulative Layout Shift (CLS), оценивает смещения визуального макета страницы при загрузке. Это нужно для того, чтобы измерить фрустрирующую область UX, с которой, вероятно, сталкивались все.

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

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

Например, используя функцию Screenshots на вкладке Performance в Chrome DevTools, мы видим, что у баннера согласия на сбор cookie-файлов на сайте BBC Weather нет выделенного места для его загрузки. 

Поэтому после загрузки он сдвигает видимый контент в области просмотра вниз. Это происходит примерно на 3-секундной отметке. 


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


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

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

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

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


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

Во-первых, это отчёт “Удобство просмотра на мобильных устройствах” в Google Search Console. Этот отчёт показывает такие проблемы, как непомещающийся на экране контент или слишком мелкий текст, а также список URL для каждой проблемы.

 

Второй метод – это использование инструмента “Проверка оптимизации для мобильных” от Google. Это хороший способ для выборочной проверки отдельных страниц. 


5. Проверяйте сайт на предмет проблем безопасности 

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

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

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

Простой способ проверить, есть ли на сайте проблемы, которые могут поставить под угрозу пользователей, – просмотреть отчёт о проблемах безопасности в Search Console.  


6. Убедитесь, что формы и встроенные ресурсы загружаются через HTTPS 

Включение HTTPS в один из сигналов Page Experience – ещё один способ, с помощью которого Google пытается обеспечить безопасность пользователей во время просмотра. 

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

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


Один из способов проверить наличие этих проблем – использовать отчёт о безопасности в Screaming Frog.  

В этом отчёте можно увидеть количество экземпляров форм на HTTPS, а также проблемы со смешанным содержимым, когда  часть ресурсов страницы загружается через HTTPS, а часть – через HTTP. 


Чтобы пользователи могли безопасно просматривать сайт, убедитесь, что на нём установлен актуальный SSL-сертификат, и перенесите все URL-адреса и ресурсы на HTTPS. 

7. Убедитесь, что межстраничные объявления не закрывают важный контент 

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


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

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

Заключение 

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

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

Оптимизация удобства страницы – это не про соответствие определённым критериям поисковых систем. Речь идёт о предоставлении наилучшего опыта для реальных пользователей. 

И это та конечная цель, к которой все мы должны стремиться. 

Источник: Search Engine Journal
subscribe

Подпишитесь на рассылку SearchEngines

— Статьи мировых экспертов

— Аналитические обзоры

— Важные новости

— Горячие темы с нашего форума

preview Сайрус Шепард: 21 совет по SEO в Google на 2021 год

Сайрус Шепард: 21 совет по SEO в Google на 2021 год

На что делать упор в новом году
preview Как новый фильтр за накрутку ПФ сказался на SEO в 2020 году

Как новый фильтр за накрутку ПФ сказался на SEO в 2020 году

Возможно ли улучшение кликовых ПФ белыми методами
preview 6 основных SEO-трендов на 2021 год

6 основных SEO-трендов на 2021 год

Активное использование ИИ, структурированных данных и формирование собственных графов знаний
preview Обзор основных апдейтов в поиске Google за 2020 год

Обзор основных апдейтов в поиске Google за 2020 год

Core Updates, Passage Indexing и Page Experience
preview Как собрать семантику для нового рынка, если не знаешь иностранных языков

Как собрать семантику для нового рынка, если не знаешь иностранных языков

Простая пошаговая схема, которую любой сможет повторить
preview Google December 2020 Core Update: наблюдения и рекомендации от Мари Хейнс

Google December 2020 Core Update: наблюдения и рекомендации от Мари Хейнс

Основные изменения в выдаче и что в связи с этим делать