Технологии Яндекс Турбо-страницы и Google AMP для e-commerce

Введение


Веб разработка давно двинулась в сторону мобильного контента. Тренд последних нескольких лет в пользу трафика с мобильных устройств вместо десктопа, привёл к тому что поисковики сначала стали требовать от сайтов адаптивности и быстрой скорости загрузки, а с 1 июля 2019 года Google для новых сайтов перешёл на mobile only, вместо mobile first. Это значит, что ему совсем не интересна десктоп версия.

Одновременно с этим поисковики предложили технологии очень быстрой загрузки страниц. У Google это AMP (Accelerated mobile pages), у Яндекс — Турбо-страницы.

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

Суть обеих технологий сводится к тому, что поисковики кешируют содержание страницы с картинками у себя и отдают их посетителю со своих серверов. При этом учитывается ряд факторов посетителя: устройство, экран, браузер, скорость интернета и т.д. В зависимости например от разрешения экрана или скорости мобильного интернета поисковик может отдать картинку меньшего разрешения, чем она была на сайте, плюс вся графика будет с отложенной загрузкой и прелодерами. Я обратил внимание, что Яндекс на Турбо-страницах из JPG изображений делает WebP и если браузер поддерживает отдаёт в WebP формате, что даёт выигрыш в 2-3 раза по размеру файла.

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





За счет скорости загрузки, страницы, использующие технологии AMP и Турбо скорее всего ранжируются несколько лучше обычных в выдаче обоих поисковиков. Хотя ни Google ни Яндекс об этом в прямую не говорят, лишь ссылаясь на то что для алгоритмов важна скорость загрузки и такие сайты получают больше баллов в выдаче.

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

Технические особенности


С точки зрения разработки данные технологии накладывают множество ограничений, особенно Турбо-страницы от Яндекса. Их пока можно рассматривать, только как игрушку, если говорить про e-comm сайты. Турбо-страницы на текущий момент не позволяют взаимодействовать с бэкэндом магазина и являются просто промежуточным статическим звеном между поисковиком и сайтом, т.к. для совершения действия по покупке товара пользователю нужно переходить на сайт магазина.

У Google с AMP всё выглядит гораздо бодрее. Технология позволяет сделать динамические страницы, которые могут полноценно “общаться” с вашим сервером. Например, в момент открытия карточки товара, в фоне делается запрос на сервер для актуализации цены, проверки наличия товара. Таким образом, даже если товар закончился, или изменилась цена, а поисковик ещё не проиндексировал данные изменения, пользователь всё увидит корректно и быстро. Товар из кеша загрузится мгновенно и дальше обновится цена и наличие, после получений данных от вашего сервера.

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

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

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

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

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

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

  • Google: google.com/amp/s/[URL вашего сайта]
  • Яндекс: yandex.ru/turbo?text=[URL вашего сайта]

Частично это проблема решается у Google в Chrome с 71 версии для AMP страниц появилась возможность сделать свой адрес. Для этого надо настроить AMP Packager на сервере, и ssl сертификат с поддержкой «CanSignHttpExchange».

Яндекс тоже не отстаёт и в последних версиях Яндекс бразуера для iOS и Android также будет отображаться домен сайта без префиксов.

AMP и Турбо-страницы с точки зрения разработки


AMP — это полноценные HTML-страницы с поддержкой всех тэгов и CSS. Есть ряд несущественных ограничений, и отличие в оформлении head. Например запрещён тэг img, вместо него нужно использовать amp-img. Есть JavaScript компоненты позволяющие наладить взаимодействие с вашим сервером посредством JSON. Например можно отправлять форму быстрого заказа с AMP страницы на ваш сервер, получить ответ в виде JSON и отобразить его. Есть компоненты для карусели картинок, видео и т.д. Собственный JavaScript изначально был запрещён, но недавно была добавлена поддержка своих скриптов.

Турбо-страницы это сильно усеченный html до поддержки ряда тэгов, правда с полноценной поддержкой CSS3. Никаких сценариев по взаимодействию с бэкендом на текущий момент сделать нельзя. Также есть компоненты для каруселей, видео и прочего.
Отмечу, что Яндексе идут по следам Google и планируют до конца 2019 года добавить возможности по взаимодействию с бэкендом для e-comm на Турбо-страницах:

  • быстрый заказ
  • авторизация
  • оплата.

Как передать страницы поисковику


Между AMP и Турбо-страницами существует принципиальная разница.

AMP доступны на сайте по определенному URL, на них можно зайти браузером, например:

  • /catalog/category/tovar.html — обычная страница
  • /amp/catalog/category/tovar.html — AMP

Для каждой страницы, создается AMP, и в head прописывается связь через link rel:

  • С обычной страницы на AMP link rel="amphtml" href=""
  • С AMP обратно link rel="canonical" href=""

Google во время обхода сайта обрабатывает и обычные и AMP страницы. Всё довольно прозрачно для разработки, можно в одном и том же компоненте/скрипте генерировать разный html (обычный и AMP) и в зависимости от URL отдавать браузеру.

С Турбо-страницами всё сложнее. Их нужно передавать в Яндекс по API в XML, где внутри CDATA отправляются оформленные HTML-страницы. При передаче надо учитывать ограничения на количество страниц в одном XML, на количество картинок на каждой странице, и общее количество картинок в каждом XML.

Здесь у меня возникла дилема, где генерировать этот XML. Варианта здесь два.

Первый это это воссоздать всю логику сайта на бэке, что дорого и не удобно. Нужно учитывать все варианты URL (современный магазин это бесконечное кол-во URL получаемые из фильтров), цены, скидки, акции и прочее. Всё это нужно в дополнении к фронту дублировать на бэке.

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

Оба варианта жизнеспособны, в зависимости от ситуации и сложности сайта, может быть использовать и первый и второй. У меня используются оба на разных сайтах.

Что в будущем?


Смотрел трансляцию AMP Conf 2019, которая проходила Японии в апреле. Основная мысль прозвучавшая, что AMP будет позиционироваться как “AMP as service”. Это значит что созданные страницы постоянно будут апгрейдиться автоматически с точки зрения технологий. Например созданная сегодня lightbox галерея на AMP страницах, завтра может начать работать с другими эффектами увеличения картинки, свайпа картинок и т.д.

Также ключевые моменты считаю важными, которые уже появились или появятся в ближайшее время:

  • Использование собственных JavaScript с ограничениями
  • Возможность делать Сторисы, которые Google экспериментально начал поддерживать в отдельном блоке в выдаче (пока только в США)
  • AMP для E-mail (поддерживает gmail, mail.ru запускает, outlook летом)
  • Поддержка русского языка
  • Компонент amp-experiment для A/B тестов
  • Поддержка Recaptcha 3

Можно предположить, что многое из этого будет применено и в Турбо-страницах, но с отставанием.

Также Google позволяет делать Progressive Web App на основе AMP. Глубоко в этот вопрос не вдавался, но если сделать весь сайт на AMP и следовать инструкциям Google по адаптации для Progressive Web App, получиться PWA, которое из браузера устанавливаться на домашний экран. Оно позволит смотреть сайт без подключения к интернету и получить доступ к Push уведомлениями пользователя.

Вывод


Google и Яндекс будут склонять как обычные сайты так и e-comm проекты, чтобы те делали AMP и Турбо-страницы. Что в свою очередь для пользователя будет размывать понимание на каком сайте он находится и у кого заказывает товар. Может получится глобальный маркетплейс внутри поисковых систем.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 15

    +6
    В итоге все эти «супермегабыстрые страницы» снижают посещения сайта и уменьшают просмотры рекламы. Клиент чаще всего не уходит дальше поисковика и не взаимодействует с содержимым сайта.

    Лучше уж сделать быструю мобильную версию, чем добровольно отдавать трафик яндексу с гуглом.
      0
      Это зависит от того какой у тебя сайт и зачем. Если у тебя сайт монетизируется за счёт рекламы, то да. Если сайт просто представляет информацию, а монетизируется каким-то другим путем (например сайт визитка), то это очень хорошая штука.
        0
        Сайт визитку можно вообще сразу сделать одной html страницей (с css3 и ванильным JS) без использования бэкенда вообще. Отдавать её энджинксом из кэша за дикие микросекунды и не испытывать нужды во всех этих монструозных ухищрениях с AMP и турбостраницами.

        Тут ведь основная декларируемая польза — быстрая загрузка на мобильных устройствах. И есть подозрение что по скорости загрузки вот эта одна страничка и AMP/турбо будут идентичны
          0
          AMP/турбо будет чуть медленнее (если CDN не зарешает), лишние скрипты остаются лишними, даже если их постоянно пихать в кэш
        0
        Да этот нюанс есть, что посетители дальше не переходят на сайт, нужно смотреть каждый конкретный случай, эксперементировать.

        Эти страницы всё равно работают кратно быстрее любой самой быстрой мобильной версии.

        Но если поисковики будут и дальше это внедрять, то это станет новой реальностью.
          0
          Эти страницы всё равно работают кратно быстрее любой самой быстрой мобильной версии.


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

          Но если поисковики будут и дальше это внедрять, то это станет новой реальностью.

          Гугл и яндекс вслед за ним постепенно отжимают все интернет продажи. Т.е. все идет к тому, что уже в недалеком будущем, если ты захочешь что-то продавать через интернет, ты должен будешь пользоваться гугло/яндексовой платформой или идти на мороз.
            0
            Не важно во сколько раз быстрее будут эти страницы, если скорость загрузки мобильной версии устраивает посетителей.


            К хорошему быстро привыкаешь. Посетителей приучат к мгновенной загрузке вместо быстрой.

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


            Да, скорее всего так и будет
          0

          Конечно, красиво вы завернули. Но не учли, что у гугла есть для рекламы теги для AMP и клиент может как заказать у вас в магазине, так и перейти по вашей рекламе, если вы контент-сервис.
          Ну, и изучать нужно доки, прежде чем бросаться такими утверждениями https://amp.dev/documentation/components/amp-ad/

          0

          Неясно откуда у вас сложности с турбо-страница.
          Ведь это классический rss фид с парой дополнительных тегов.
          Если сайт уже отдает публикации в rss то настроить импорт в турбо-страницы дело совсем не сложное.

            0
            Ну вот у меня в rss отдаётся тупо текст с фотками. а сайт хотелось бы всё-таки с разметкой и фирменным оформлением.
              0
              В RSS фид можно отдавать только карточки товаров, да можно это сделать из обычного YML файла, и вид будет как задано в яндексе. Нам нужны были категории и кастомный вид карточки.
              0

              У Турбо есть три вида передачи данных: через обычный RSS фид, через API или через YML для магазинов.


              Есть уже и автогенерация страниц из вебмастер.


              Для генерации фидов 100500 готовых решений, например, под WordPress https://ru.wordpress.org/plugins/mihdan-yandex-turbo-feed/.


              Кто сказал, что Турбо не умеет общаться с сервером?

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

                Например, есть корзина https://webmaster.yandex.ru/blog/internet-magaziny-v-turbo, остальное смотрите в документации.

                  0
                  Варианты корзины, которые предлагаются на текущий момент, при использовании YML, а не кастомного формата отправляемого по API (о котором я говорю в статье):
                  — ссылка с ID товара ведущая на сайт, которая на сайте положит данный товар в корзину
                  — корзина внутри турбо страниц отправляющая заказ на email
                  — купить в один клик, тоже отправляющая на email

                  Я имею ввиду полноценное взаимодействие с бэкендом, позволяющее отправлять заказы в свою систему, присваивать им ID, регистрировать пользователя и т.д., не уходя с Турбо-страницы на сайт.

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

                Самое читаемое