Турбо-страницы Яндекс

Зачем нужны турбо-страницы

Почти половина визитов в российский e-commerce приходит с телефонов, и на мобильном трафике каждая лишняя секунда загрузки стоит заказов. По данным Яндекса, 49% визитов на сайты идёт с мобильных устройств, а на медленном 3G обычная товарная страница InSales — со скриптами, шрифтами и картинками — открывается ощутимо долго. Турбо-страницы решают именно эту боль: облегчённую версию карточки товара Яндекс отдаёт со своих серверов и рисует почти мгновенно — до 15 раз быстрее, чем исходная страница магазина.

Вторая причина — присутствие в выдаче. Турбо-контент показывается прямо в поиске Яндекса, а также в Новостях и Дзене, с иконкой молнии рядом с результатом. Для магазина это дополнительная точка входа: пользователь попадает на карточку товара, не дожидаясь полной загрузки сайта, и с меньшей вероятностью уходит к конкуренту, пока страница «думает». Задача проекта была прикладной — собрать корректный товарный фид для каталога InSales, подключить его в Яндекс.Вебмастере и сохранить главное действие магазина, кнопку «В корзину», прямо на турбо-странице.

Что это такое

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

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

Как настроить

Технически всё держится на фиде. Для InSales мы формируем RSS-фид в формате турбо-страниц — это XML, где каждый товар описан отдельным элементом: картинка, заголовок, описание, старая и новая цена. Фид генерируется из каталога магазина, поэтому цены и наличие остаются актуальными без ручного переноса: Яндекс периодически перечитывает ссылку и обновляет турбо-версии сам.

Формат намеренно ограничен. Доступен фиксированный набор блоков и разметки, произвольный HTML и внешние скрипты в турбо-страницу не встроить — это плата за скорость. Поэтому карточку приходится аккуратно раскладывать по разрешённым элементам, чтобы товар выглядел полно, но укладывался в правила платформы. После проверки фид подключается в Яндекс.Вебмастере, где Яндекс валидирует разметку и начинает отдавать турбо-версии в выдаче.

1. Создать RSS-фид с товарами в формате турбо-страниц
2. Подключить фид в Яндекс.Вебмастере
3. Настроить ссылку "В корзину" с переменной {offer_id}

Переменная {offer_id} заменяется на ID товара. При клике на "В корзину" товар с этим ID добавляется в корзину InSales — так покупатель начинает оформление ещё на турбо-странице, а завершает его на сайте.

Что можно добавить

Внутри разрешённого набора элементов карточка собирается из привычных для товара блоков. В фид передаём:

• Изображение товара
• Название и описание
• Старую и новую цену
• Размер скидки
• Кнопку "В корзину"
• Кнопку звонка

Результат

• Ускорение загрузки товаров в 15 раз для мобильных
• Показ товаров в поиске Яндекса, Новостях, Дзене
• Кнопка "В корзину" прямо на турбо-странице
• Лучший опыт для пользователей с медленным интернетом

Подробнее о возможностях: Турбо-страницы Яндекс