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

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

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

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

Все новости


Создание сайта-визитки

Создание корпоративного сайта

Создание интернет-магазина

Создание Landing page

Изготовление сайтов в Москве

Изготовление сайтов в Краснодаре

Разработка сайтов в Санкт-Петербурге

Разработка сайтов в Ростове-на-Дону

IT-компания DonbassWeb предлагает свои услуги не только для Донецка (ДНР) и Луганска (ЛНР), но и для многих городов России: в Москве, Санкт-Петербурге, Новосибирске, Екатеринбурге, Нижнем Новгороде, Казани, Самаре, Челябинске, Омске, Ростове, Уфе, Красноярске, Перми, Волгограде, Воронеже, Саратове, Краснодаре, Тольятти, Тюмени, Ижевске, Барнауле, Ульяновске, Иркутске, Владивостоке, Ярославле, Хабаровске, Махачкале, Оренбурге, Томске, Новокузнецке, Кемерово, Астрахани, Рязани, Набережных Челнах, Пензе, Липецке, Туле, Кирове, Чебоксарах, Калининграде, Брянске, Иваново, Магнитогорске, Твери, Курске, Нижнем Тагиле, Ставрополе, Архангельске, Улан-Удэ, Белгороде, Владимире, Кургане, Сочи, Калуге, Орле, Мурманске, Смоленске, Владикавказе, Волжском, Череповце, Чите, Саранске, Сургуте, Вологде, Тамбове, Костроме, Комсомольске-на-Амуре, Нальчике, Таганроге, Стерлитамаке, Петрозаводске, Братске, Дзержинске, Йошкар-Оле, Шахтах, Орске, Ангарске, Нижневартовске, Якутске, Новороссийске. Кроме того, мы работаем не только в Украине, России, Белоруссии, Казахстане, Болгарии, Румынии, Сербии, Польше, Германии, Италии, Франции, Испании, Португалии, Англии, Шотландии, Уэльсе, Ирландии, США, Австралии, но и по всему миру!

Донецк, ДНР, Луганск, ЛНР

ABC-анализAppStoreCall-центрExperience marketingFMCGGoogleInside salesOpenCartPOS материалPPC-специалистSales promotionSEO-услугиSMMUp-saleWordPressАктивные продажиАкцияАнализ клиентовАнализ конкурентовАнализ продажАнтимерчандайзингАссортиментная политикаБелгородБизнес идеи (стартапы)БрендБукингВендорВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВоронежДебиторкаДебиторская задолженностьДезинтермедитацияДивизионная система управленияДизайнДирект-маркетингДисконтДистрибьюторДистрибьюцияЕкатеринбургИжевскКазаньКалининградКопирайтингКраснодарМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМедиаМенеджментМерчандайзерМерчандайзингМоскваНижний НовгородНишевой маркетингНовосибирскНумерическая дистрибьюцияОмскОтдел маркетингаПартизанский маркетингПравило ПаретоПрогнозирование продажПродвижение сайтов в ДонецкеПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРостов-на-ДонуСамараСанкт-ПетербургСаратовСейлз промоушнСинергияСколковоСоздание сайтов в ДонецкеСоциальные сетиСочиСтимулирование сбытаТелемаркетингТорговый представительТрейд маркетингТрейд промоушнТюменьХабаровскЦелевая аудиторияЧелябинскЮжно-СахалинскЯндекс