Перейти к публикации
IPS Invision Community
  • Как улучшить Core Web Vitals и другие сигналы Page Experience


    Sipsb
     Поделиться
    Подписчики 1

    В 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, как рекомендуется, или нет. 
    • Межстраничные объявления. Не мешают ли они пользователям потреблять основной контент страницы, не закрывают ли его. 

    seo1.jpg

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

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

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

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

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

    seo2.png

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

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

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

    seo3.png

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

    00.png

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

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

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

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

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

    seo4.png

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

    seo5.png

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

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

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

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

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

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

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

    seo6.png

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

    seo7.png

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

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

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

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

    seo9.png

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

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

    seo10.png

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

    seo11.png

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

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

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

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

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

    seo12.png

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

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

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

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

    seo13.png

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

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

    seo14.png

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

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

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

    seo15.png

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

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

    Заключение 

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

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

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

    • Нравится 1
     Поделиться

    Отзывы пользователей

    Рекомендованные комментарии

    Нет комментариев для отображения



    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

×
×
  • Создать...
Вверх
Вверх