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

В 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-стратегию, вы сможете улучшить её сигналы, относящиеся к пользовательскому опыту. 

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

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