Обновление опыта страниц Google: как оптимизировать сайт электронной коммерции

Рейтинг сайта в Google зависит от множества факторов, и по мере развития динамичного мира SEO эти факторы могут меняться. Вводим: обновление опыта страниц в мае 2021 года.  В компании Hedgehog наш подход к цифровому маркетингу основан на SEO. Мы лучше других знаем, что, когда речь идет о силе органического поиска, для получения результатов требуется время. Именно поэтому мы активно готовились к обновлению с момента его анонсирования в прошлом году.

Почему обновление опыта страниц имеет значение для моего бизнеса?

Если ваш бизнес работает преимущественно в Интернете, как и любой сайт электронной коммерции, видимость является приоритетом. И обновление опыта страниц повлияет на эту видимость. Кроме того, факторы пользовательского опыта (UX), которые оно включает, например, время загрузки страницы и плавность навигации, играют решающую роль в путешествии клиента. Если процесс покупки не вызывает затруднений, люди с большей вероятностью завершат покупку и даже вернутся за ней. Идея заключается в том, что сайты, которые соответствуют новым рекомендациям Google, выиграют от обновления, получат более высокий рейтинг и, вероятно, увеличат коэффициент конверсии. Владельцы сайтов электронной коммерции, которые оставят это на потом, могут пострадать от снижения рейтинга, если они не будут соответствовать требованиям к маю 2021 года, когда обновление вступит в силу.

Вот в чем загвоздка

Оптимизация сайта перед обновлением поможет повысить его рейтинг в Google, но полагаться только на это нельзя. Хотя такие переменные, как UX и ключевые слова, существенно влияют на позицию сайта в поисковой выдаче и будут еще больше влиять после обновления, эти сигналы ранжирования должны работать в гармонии с сильным контентом.  Бесполезно оптимизировать и развивать заднюю часть вашего сайта для Google, если контент, который видит посетитель при клике, неактуален или низкого качества. Да, эти сигналы помогут привести людей на ваш сайт, но останутся ли они там, зависит от ценности вашего контента. Вот как об этом говорит наш основатель Алан Сперджен: Отличный показатель впечатлений от страницы не обязательно станет золотым билетом, который позволит вам занять первое место в Google. Однако поощрение владельцев сайтов электронной коммерции к тому, чтобы они уделяли первоочередное внимание UX, скорости и удобству использования своего сайта, является качественным. Посетители получат более качественный и индивидуальный опыт, Google получит еще один способ оценить ценность контента, а владелец сайта выиграет от увеличения органического трафика и конверсий. Поэтому, готовясь к обновлению, не упускайте из виду свой контент.

Понимание основных веб-показателей

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

• При определении Largestgest Contentful Paint (LCP) учитывается время загрузки основного элемента страницы, которое должно быть менее 2,5 секунд.
• Вы слышали о том, что стиль важнее сути. Так вот, первая задержка ввода (First Input Delay, FID) — это время, которое требуется сайту для ответа после того, как пользователь что-то делает на сайте. Иногда, когда визуальных элементов слишком много, это может замедлить работу страницы. В идеале FID должна быть менее 100 мс.
• Показатель Cumulative Layout Shift (CLS) относится к тому, как часто пользователи сталкиваются с неожиданными изменениями или ошибками при взаимодействии со страницей, и должен быть меньше 0,1.

Как правило, вы стремитесь к 75-му процентилю по всем этим показателям. Так, если страница имеет 100 просмотров и 75 из них имеют результат визуальной стабильности (CLS) ниже 0,1, общая метрика будет считаться «хорошей».

Насколько важен хороший хостинг для сайта?

В сочетании с Core Web Vitals, хороший хостинг веб-сайта способствует общему пользовательскому опыту вашего сайта. Как правило, он помогает как можно быстрее отобразить и доставить страницу пользователю (подумайте: темы и плагины, которые не загромождают сайт). В частности, это поможет улучшить LCP вашего сайта, поскольку он включает в себя получение информации от сервера (другие основные показатели измеряются в браузере).  Тем не менее, хороший хостинг сайта — это не быстрое решение проблемы.  Перегруженный сайт с некачественным кодом (например), скриптами и активами, которые не оптимизированы должным образом, не справится с задачей даже при наличии высокоресурсного сервера. Именно здесь на помощь приходит Core Web Vitals.

Как я могу улучшить свои показатели Core Web Vitals?

Для оценки текущей производительности вашего сайта можно выполнить ползание по сайту с помощью автоматизированного скрипта. Это позволит определить, является ли ваш сайт удобным для мобильных устройств, имеет ли он безопасное соединение и есть ли какие-либо проблемы с безопасным просмотром. Существует ряд инструментов, которые вы можете использовать для этого.  После проведения аудита наступает время оптимизации. Мы создали свой собственный сценарий с помощью Lighthouse, инструмента веб-разработчика Google. Мы использовали его с нашим клиентом RSM 2000.

Мобильная версия веб-сайта нашего клиента имела первоначальный результат LCP 5,6 с. Помните, что LCP должен быть менее 2,5 секунд, поэтому для исправления ситуации мы начали вносить изменения в CSS (структурный макет веб-страницы) и JavaScript (который делает веб-страницу интерактивной), обеспечивая использование только абсолютно необходимых макетов и активов. Это означало, что мы устраняли любые потенциальные трения при загрузке страницы. 

Вот несколько практических советов, которые следует рассмотреть для оптимизации Core Web Vitals:

Оптимизация для первой входной задержки (FID)

• Уменьшите влияние любого стороннего кода.
• Сократите время выполнения JavaScript.
• Минимизируйте работу основного потока. Это можно сделать путем анализа и удаления ненужных внешних скриптов (кодов отслеживания, виджетов, активов социальных сетей), а также анализа и удаления ненужного кода таблицы стилей.
• Сохраняйте низкое количество запросов и небольшой размер передачи.

Оптимизация для наибольшей содержательной краски (LCP)

• Убедитесь, что вы включаете только релевантный контент.
• Сохраняйте объектную модель документа (DOM) как можно меньше. DOM играет ключевую роль в том, насколько быстро браузер получает код сайта. Чем меньше DOM, тем быстрее страница будет отображаться для посетителей.
• Используйте быстрый хостинг веб-сайтов.
• Не полагайтесь на темы, которые поставляются с ненужными активами.

Оптимизация для кумулятивного сдвига компоновки (CLS)

• Всегда включайте атрибуты размера в изображения и видеоэлементы, или иным образом резервируйте необходимое пространство для чего-то вроде полей CSS с соотношением сторон.
• Никогда не вставляйте контент поверх существующего (кроме как в ответ на взаимодействие с пользователем). Представьте, что вы собираетесь нажать на кнопку, но вместо этого, за полсекунды до этого, чуть ниже начинает загружаться реклама, и вы случайно нажимаете на нее, а не на кнопку. Этот шаг гарантирует, что любые смещения макета, которые произойдут, будут только ожидаемыми.
• Отдайте предпочтение анимации преобразования, а не анимации свойств, которые вызывают изменения макета. Например, вам не нужны полноэкранные всплывающие окна в тот момент, когда пользователь собирается нажать на ссылку или кнопку.

Поблагодарите себя позже

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