Проверка совместимости редакторов WordPress с AMP

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

Проверка совместимости редакторов WordPress с AMP

Материал был обновлен: 2 июня, 2022

Введение Google фактора ранжирования в поисковой выдаче Core Web Vitals наводит на мысль о применении технологии AMP на коммерческих сайтах. Отличие коммерческих сайтов от блогов в том, что нужно больше функционала для закрытия сделки и простым штатным редактором этого не добиться. Например: нужны формы захвата, контактные формы, интерактивные элементы и многое другое без чего можно обойтись в блоге. На сайтах услуг и в интернет-магазинах важен дизайн и фильтры/корзины.

В прошлом году один из плагинов AMP торжественно анонсировал что он совместим с Elementor и WooCommerce. Мы сделали интернет-магазин на AMP – в общем совместим, но фильтры фактически не работают, дизайн перекошен, сделать хорошее юзабилити невозможно. При проверке скорости загрузки сайта показатели были хуже, чем на этом же сайте без AMP. В итоге, от идеи сделать данный интернет-магазин на AMP отказались и сделали “классическими” методами.

Прошел год и нас ждет “страшный” апдейт Google. Поэтому тестируем “чистый” сайт с Elementor и переводим его AMP.

Тестируем Elementor с плагином AMP

Устанавливаем на сайт плагин AMP c совместимостью Elementor (плагин платный, но для нас оказался тогда бесполезен, поэтому я воспользовалась купленной ранее лицензий для данной проверки).

Для усложнения задачи еще на страницу добавляем видео и инфоблок.

Проверяем данную страницу с AMP. С ее отображением на компьютерной версии. Визуально мобильная версия выглядит корректно и с AMP и без.

Плагин сохранил разделение на столбцы, но стал “кривоват” по дизайну. Это можно дотянуть стилями или использовать 2 вида вида страницы: для десктопа одна версия, а для мобильных другая страница. И не забыть перекрыть индексирование во избежание дублирования контента. Другими словами, опять танцы бубном над граблями. Но надо отдать должное – 93 это хороший показатель.

Проверка валидатором:

В общем да. Но с ошибкой. Терпимо.

Вывод по совместимости Elementor и AMP

Результаты по соответствию Core Web Vitals не плохие:

  • обычная версия – 70
  • версия амп – 93

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

Проверяем совместимость SiteOrigin с AMP

Для SiteOrigin нет отдельного плагина на совместимость, поэтому устанавливаем обычный плагин AMP. Добавляем видео аналогичное тесту с Elementor и вместо инфоблока ставим карусель постов. Тестируем обычную версию страницы.

И тестируем компьютерную версию с AMP и смотрим что получилось.

Макет вообще не разъехался в десктопе. Честно говоря, не поверила, что я вижу AMP страницу – и пошла проверила ее через валидатор. На скриншотах специально показываю url.

Ошибок вообще нет.

Вывод по проверке совместимости SiteOrigin и AMP

Все корректно работает без дополнительных плагином и совместимостей. Показатели:

  • обычная версия – 92
  • amp-версия – 98

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

Особенности перевода коммерческого сайта на AMP

В радостных возгласах о показателях скорости загрузки страниц сайта есть ряд подводных камней:

  1. Совместимость Контактных форм и форм захвата – надо искать, тестировать и думать сколько и куда ставить.
  2. Интерактивные элементы и калькуляторы – по опыту, не поддерживаются. Нужны отдельные решения как их использовать.
  3. Плавающие кнопки пейджеров – есть совместимые плагины, нужно проверять их фактическую работу.
  4. Скорость не главный фактор – прорабатывать решения для каждой отдельной страницы на сайте.