Введение

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