Удобство использования сайта - Page Experience от Google

Обновление Google Page Experience направлено на оценку сайтов с учётом того, как пользователи взаимодействуют с ним. Часть факторов, которые сказываются на взаимодействии пользователей со страницей и влияют на внутрисайтовые поведенческие факторы, становятся подтвержденными сигналами ранжирования.

Цель этого обновления – сделать так, чтобы user-friendly сайты занимали более высокие строчки рейтинга, чем те, которые не заботятся о своих пользователях.

Если вкратце, обновится набор метрик, по которым Google определяет качество сайта. Они существовали и раньше, но теперь алгоритм будет проверять их еще жестче. Вот эти метрики:

• Отрисовка основного контента.
• Время задержки после первого действия.
• Совокупная оценка сдвига макета.
• Адаптивность.
• Безопасность.
• Наличие HTTPS.
• Отсутствие навязчивой рекламы.

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

Под удобством страницы понимается набор признаков, определяющих, насколько пользователям просто и комфортно взаимодействовать с ней. Информационная ценность страницы при этом не учитывается. Удобство оценивается по основным интернет-показателям, таким как скорость загрузки, интерактивность и визуальная стабильность. Кроме того, учитываются и другие сигналы: оптимизация для мобильных устройств, использование HTTPS и соблюдение правил в отношении назойливых межстраничных объявлений.

Полное русское описание здесь: https://developers.google.com/search/docs/advanced/experience/page-experience?hl=ru

Сигналы Google Page Experience показывают, как пользователи сайта воспринимают взаимодействие со страницей. В настоящее время удобство страницы включает в себя Core Web Vitals (LCP, FID, CLS), оптимизацию для мобильных устройств, HTTPS, Безопасный просмотр и следование рекомендациям в отношении навязчивых межстраничных объявлений.

Все эти сигналы, кроме Core Web Vitals, уже учитываются при ранжировании сайтов в Google. Обновление также добавит CWV в число факторов удобства страницы.

Если вы хотите, чтобы ваш сайт успешно ранжировался в 2021-2022 годах, то вам нужно знать:

• Как у него дела с точки зрения сигналов Google Page Experience;
• Почему у сайта есть проблемы в любой из этих областей;
• Как проводить оптимизацию для Page Experience.

Инструменты для аудита Google Page Experience:

• Google Search Console
• Google PageSpeed Insights
• Chrome DevTools
• Lighthouse
• WebPageTest
• Проверка оптимизации для мобильных
• Другие, в том числе коммерческие (смотрите наш раздел Полезные ссылки)

Core Web Vitals

Вспомним вкратце, что представляют собой так называемые «основные интернет-показатели» (Core Web Vitals).

Web Vitals – это инициатива Google, направленная на предоставление помощи и рекомендаций по самым важным сигналам качества, которые определяют пользовательский опыт в интернете.

Core Web Vitals, которые являются подгруппой Web Vitals, включают три метрики:

• LCP (отрисовка самого крупного контента);
• FID (задержка после первого ввода);
• CLS (совокупное смещение макета).

Каждый из этих показателей измеряет разный аспект пользовательского опыта: загрузку (LCP), интерактивность (FID) и визуальную стабильность (CLS). Core Web Vitals оцениваются на постраничной основе.

Как провести аудит сайта с точки зрения Core Web Vitals?

Отрисовка самого крупного контента (LCP)

1. Проходит ли страница проверку по LCP?

Показатель «Отрисовка самого крупного контента» связан со скоростью загрузки сайта. LCP измеряет время визуализации самого крупного элемента (текстового блока или изображения) в области просмотра.

Сайт пройдет проверку по LCP, если отрисовка самого крупного контента происходит в течение первых 2,5 секунд с начала загрузки страницы.

Как узнать LCP

• Запустите проверку главной страницы и еще нескольких страниц, используя PageSpeed Insights

Это даст хорошее представление о работе сайта с точки зрения LCP – при условии, что отчет Chrome User Experience содержит достаточно данных по тестируемой странице.

• Отчет об основных интернет-показателях в Google Search Console (рекомендуется)

Находясь в GSC, перейдите в раздел «Улучшения», выберите «Core Web Vitals», а затем – «Mobile».

Это определенно самый лучший способ аудита LCP, поскольку данные поступают из Chrome User Experience Report, в котором собрана информация по реальным посетителям.

• Получите отчет по странице в Lighthouse

Откройте сайт в браузере Chrome, нажмите на иконку Lighthouse и выберите пункт «Generate report».

• Проверьте сайт с помощью инструмента WebPageTest

Выберите более медленное соединение (3G) и более старую модель смартфона.

Среди типов элементов, учитываемых при оценке LCP, значатся <img>, <image> внутри <svg>, <video>, а также элементы с фоном, загружаемым через url (), и текстовыми элементами встроенного уровня.

Если сайт не проходит проверку по LCP, обратите внимание на следующие факторы:

• Длительное время ответа сервера;
• Время загрузки ресурсов;
• Блокирующие рендеринг JavaScript и CSS;
• Рендеринг на стороне клиента.

Что можно сделать, чтобы улучшить CLS:

• Сократите время ответа сервера (для его измерения можно использовать показатель Time to First Byte);
• Используйте сеть доставки контента (CDN) – например, Cloudflare;
• Внедрите серверное кеширование, используйте сервис-воркеры;
• Используйте rel=”preconnect” для раннего установления сторонних подключений;
• Сократите время блокировки JS и минимизируйте критический JavaScript;
• Минимизируйте CSS, отложите загрузку некритического CSS и встройте критический CSS;
• Минимизируйте JavaScript и неиспользуемые полифиллы, отложите загрузку неиспользуемого JS;
• Оптимизируйте изображения и уменьшите их размер;
• Реализуйте предварительную загрузку важных ресурсов;
• Уменьшите размер текстовых файлов;
• Используйте серверный рендеринг или пререндеринг.

Задержка после ввода (FID)

2. Проходит ли страница проверку по этому показателю?

FID – это показатель, оценивающий интерактивность сайта. Он измеряет время между первым взаимодействием со страницей и ответом на это действие.

Сайт имеет достаточно хорошую интерактивность, если FID меньше 100 мсек.

Как узнать FID

• Проверьте главную страницу и самые важные страницы сайта, используя PageSpeed Insights

Это даст представление о работе сайта с точки зрения интерактивности – если в Chrome User Experience Report достаточно данных о пользовательском опыте посетителей тестируемого URL.

Если данных недостаточно, то самый лучший способ оценить FID – использовать Google Search Console.

• Проверьте отчет об основных интернет-показателях в GSC (рекомендуется)

Перейдите в раздел «Улучшения» и кликните по «Core Web Vitals». После этого откройте отчет «Mobile», чтобы просмотреть детали.

Это самый лучший способ проверки FID.

Если сайт имеет плохой показатель FID, то обычно это связано c выполнением «тяжелого» JavaScript.

Основные факторы, влияющие на FID:

• Выполнение пользовательских скриптов (раздувание размера JavaScript, неэффективное разбиение на фрагменты, большое время выполнения скриптов);
• Dafa Fetching;
• Выполнение сторонних скриптов (например, сторонних тегов).

Как улучшить FID:

• Разбивайте длинные задачи на более мелкие асинхронные.
• Оптимизируйте готовность к взаимодействию (например, используя прогрессивную загрузку кода).
• Изучите сторонний код и расставьте приоритеты при загрузке.
• Используйте веб-воркеры (Comlink, Workway, Workerize).
• Уменьшите время выполнения JS (отложите неиспользуемый JS, минимизируйте неиспользуемые полифиллы).

Совокупное смещение макета (CLS)

3. Проходит ли сайт проверку по этому показателю?

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

Сайт имеет достаточно хорошую визуальную стабильность, если CLS меньше 0,1.

Как узнать CLS

• Проверьте главную страницу и несколько других страниц сайта в PageSpeed Insights

Это даст вам представление о том, как дела у сайта с точки зрения визуальной стабильности, если в Chrome User Experience Report достаточно данных о посетителях тех URL, которые вы тестируете.

Если данных недостаточно, следует обратиться к отчету об основных интернет-показателях в Google Search Console.

• Проверьте отчет по Core Web Vitals в Search Console (рекомендуется)

Как и в случае с LCP и FID, это оптимальный способ проверки CLS.

• Получите отчет Lighthouse для страницы

Откройте сайт в Chrome, нажмите на иконку Lighthouse и выберите «Generate report».

• Проверьте сайт с помощью инструмента WebPageTest

Это еще один инструмент, который позволяет проверять Core Web Vitals, используя разные параметры, такие как устройство, браузер или тип интернет-соединения.

Проверьте сайт, используя медленное соединение (например, 3G) и старую модель смартфона.

• Проверка CLS и других Core Web Vitals в Chrome DevTools

Отройте Chrome DevTools и выберите устройство. Перейдите на вкладку «Performance», поставьте галочку возле «Core Web Vitals» и перезагрузите страницу.

Если у сайта плохой CLS, то это обычно связано с одним или несколькими из следующих факторов:

• Рекламные блоки, встроенный контент и iframes без прописанных параметров;
• Изображения без прописанных параметров;
• Динамическая вставка контента;
• Веб-шрифты, вызывающие FOIT/FOUT.

Как улучшить CLS:

• Зарезервируйте место для рекламных объявлений, встроенного контента и iframe;
• Не размещайте рекламу близко к верхней части области просмотра;
• Не вставляйте новый контент над существующим;
• Используйте атрибут font-display, Font Loading API или <link rel=”preload”> для основных веб-шрифтов.

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

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

4. Оптимизирован ли сайт для мобильных устройств?

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

Чтобы проверить сайт, используйте инструмент «Проверка оптимизации для мобильных» (Mobile-Friendly Test) от Google. Откройте инструмент, введите URL и нажмите «Проверить страницу».

Как сделать сайт дружественным к мобильным устройствам:

• Донесите клиенту, насколько важно, чтобы сайт был оптимизирован для мобильных.
• Мы часто советуем перестроить сайт с нуля и перенести его на WordPress. Однако рекомендации будут зависеть от конкретного случая, и такой вариант не всегда возможен.

5. Есть ли у сайта проблемы с загрузкой?

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

Для проверки этого параметра также можно использовать Mobile-Friendly Test от Google.

Запустите проверку страницы и посмотрите, есть ли отметка о проблемах с загрузкой сразу под заголовком «Результаты проверки».

Что можно сделать, чтобы устранить проблемы с загрузкой:

• Просмотрите список проблем;
• Выясните, это внутренние или внешние ресурсы;
• Внесите все эти проблемы в отчет по результатам аудита и рекомендуйте исправление или удаление этих ресурсов.

Безопасный просмотр

Безопасный просмотр – это сервис Google, который вносит в черный список URL-адреса с вредоносным ПО и фишинговым контентом. Технология помогает защищать более 4 млрд устройств по всему миру, показывая предупреждения об опасных сайтах или загрузках. Это определенно делает интернет более безопасным местом.

6. Есть ли у сайта проблемы, связанные с Безопасным просмотром?

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

Лучший способ проверить, есть ли на сайте проблемы безопасности – использовать Google Search Console.

• Откройте отчет «Проблемы безопасности» в GSC.

Что делать, если на сайте есть проблемы безопасности:

• Проанализируйте детали проблемы.
• Просканируйте все файлы сайта, чтобы найти и удалить вредоносное ПО. Пометьте этот пункт в результатах аудита как приоритетный и выделите его красным.
• Обратитьтся к нам: Удаление вирусов и защита сайта на CMS Joomla. Лечение сайта Joomla от вирусов.

7. Убедитесь, что сайта нет в черном списке Безопасного просмотра

Если у вас нет доступа к Search Console, то есть лишь один способ проверить, чист ли сайт в глазах Google:

Откройте инструмент проверки статуса сайта в Безопасном просмотре в отчете о прозрачности сервисов и данных Google.

Если сайт не пройдет проверку, то вы можете:

• Изучить подробнее возможные причины.
• Сделать решение этой проблемы основным приоритетом.

8. Внедрены ли на сайте хотя бы базовые защиты?

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

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

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

• SSL-сертификат;
• Сильные пароли, имена пользователей, отличающиеся от «admin»;
• Безопасный брандмауэр хоста и веб-приложения (например, Sucuri);
• Регулярное резервное копирование всех файлов и базы данных;
• Отключенный просмотр каталогов;
• В случае использования CMS Joomla, WordPress и других систем управления контентом важно, чтобы CMS, темы и плагины были обновлены до последней версии.

HTTPS

Этот пункт тесно связан с предыдущими двумя.

9. Используется ли на сайте HTTPS?

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

Как проверить, является ли соединение с сайтом защищенным:

• Введите URL сайта в адресную строку Chrome или Firefox;
• Если соединение защищенное, вы увидите значок в виде закрытого замка
• Если на сайте не используется HTTPS, то вы увидите предупреждение «Не защищено».

Что делать, если сайт незащищен:

• Сделайте переход на HTTPS абсолютным приоритетом;
• Если возможно, добавьте на сайт SSL-сертификат. Не забудьте настроить 301 редиректы с HTTP на HTTPS.
• Просканируйте сайт, чтобы убедиться, что все переадресации работают.

10. Есть ли у сайта проблемы с SSL-сертификатом?

Наличие SSL-сертификата необязательно означает, что у сайта нет проблем в этой области.

Как проверить, есть ли такие проблемы:

• Откройте инструмент для проверки SSL-сертификатов SSL Shopper.
• Введите название сайта и нажмите «Check SSL».
• Просмотрите информацию и убедитесь, что проблем нет.

Если проблемы все же есть, то можно сделать следующее:

В зависимости от типа проблем с SSL-сертификатом устраните их или рекомендуйте их устранение. Следуйте статье, посвященной этому типу проблем, от Google.

11. Есть ли у сайта проблемы со смешанным контентом?

Даже при валидном SSL-сертификате у сайта могут быть проблемы со смешанным контентом. Смешанное содержимое возникает, когда некоторые ресурсы на HTTPS-сайте (такие, как видео, изображения или скрипты) загружаются через HTTP.

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

Как проверить сайт на наличие смешанного контента:

• Просканируйте сайт с помощью SEMrush, Ahrefs или Screaming Frog.
• В результатах сканирования найдите раздел для смешанного контента.
• Или банально посмотрите в строке браузера каждую станицу, обращая внимание на замочек ssl.

Смотрите нашу статью по теме Смешанного содержимого.

Если на сайте все же есть смешанный контент, то вот что можно сделать:

• Выясните, какие HTTP-ресурсы были обнаружены на сайте.
• Если это внутренние ресурсы, проверьте, корректно ли настроена переадресация 301 на HTTPS-версии этих ресурсов.
• Если таких редиректов нет, то нужно их добавить и обновить ссылки на ресурсы, чтобы это были HTTPS-ссылки.
• Внешние незащищенные ресурсы нужно удалить или заменить на HTTPS-версии.

12. Правильно ли настроены редиректы на HTTPS?

Наличия SSL-сертификата недостаточно. На сайте также должна быть настроена переадресация всех незащищенных HTTP-ресурсов на защищенные HTTPS-версии. И это должны быть 301 (постоянные) редиректы.

Как проверить правильность редиректов с HTTP на HTTPS:

• Просканируйте сайт с помощью SEMrush, Ahrefs или Screaming Frog SEO Spider и проверьте список переадресаций.
• Находясь в браузере Chrome, введите URL главной страницы и URL некоторых страниц с HTTP, чтобы проверить, переадресованы ли они на HTTPS. Для этого можно использовать расширение The Link Redirect Trace.

Если у сайта есть проблемы с редиректами на HTTPS-версию, то вот что можно сделать:

• Исправьте некорректные перенаправления или порекомендуйте это сделать.

Отсутствие навязчивых межстраничных элементов

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

13. Есть ли на сайте навязчивые всплывающие окна?

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

Как проверить сайт на наличие назойливых всплывающих окон:

• Откройте сайт в режиме инкогнито и просмотрите его в течение некоторого времени, чтобы увидеть, что появляется.
• Сделайте то же самое на смартфоне. Мобильные поп-апы особенно вредоносны.

Если такие элементы на сайте есть, то мы рекомендуем их удалить.

Примером допустимого поп-апа является запрос на разрешение использовать файлы cookie.

14. Есть ли навязчивые межстраничные объявления на сайте?

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

Как проверить сайт на наличие таких элементов:

• Откройте сайт в режиме инкогнито и просмотрите его в течение некоторого времени, чтобы увидеть, появляются ли такие объявления.
• Сделайте то же самое на смартфоне. Можно использовать разные мобильные браузеры.

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

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

Примером допустимого межстраничного объявления является просьба подтвердить возраст.

15. Есть ли навязчивые рекламные объявления на первом экране страницы?

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

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

Как проверить эту часть сайта:

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

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

Заключение

Список факторов, которые войдут в состав монома «Page Experience» уже сейчас сказывается на качестве взаимодействия пользователей с вашим проектом и том, как успешно сайт решает задачу пользователя.

Это значит, что улучшив «Page Experience» и факторы, которые влияют на оценку, вы сможете поднять значения как внутрисайтовых поведенческих метрик, так и кликовых. Безусловно, важно заботиться об этих показателях и в текущих реалиях.