О технологии «Турбо‑страницы» — Технологии Яндекса
Технология Турбо‑страниц позволяет создавать легкие версии страниц, которые открываются быстро даже при медленном подключении к интернету. На их загрузку уходит примерно в 15 раз меньше времени, чем на загрузку обычных страниц.
Такая скорость достигается благодаря применению оптимизированной верстки, хранению содержимого страниц на серверах Яндекса и использования собственной сети доставки контента.
В результатах поиска, Новостях, Дзене и других сервисах Яндекса Турбо‑страницы помечаются специальными значками с ракетой .
- Преимущества
- Формирование Турбо‑страниц
- Отображение на сервисах Яндекса
Преимущества
- Мгновенная загрузка и удобное чтение
Скорость загрузки Турбо‑страниц в 15 раз быстрее при 3G-подключении. Это позволяет уменьшить процент отказов в среднем на 30%.
- Снижение нагрузки на ваш сервер
- Использование собственной инфраструктуры доставки контента позволяет снизить количество обращений к вашему серверу.
- Расширенные сниппеты в поиске
- Использование Турбо‑страниц является одним из факторов формирования расширенных сниппетов в поисковой выдаче.
Внимание. Подключение Турбо‑страниц не гарантирует появление расширенных сниппетов.
- Авторасстановка рекламы
- При использовании авторасстановки количество рекламы и выгодные места подбираются автоматически. Это позволяет увеличить доход от монетизации в среднем на 40%.
Для монетизации Турбо‑страниц можно подключить блоки Рекламной сети Яндекса или рекламу других систем с помощью ADFOX. Подробнее в разделе Подключение рекламы на мобильных Турбо‑страницах.
- Автоматическая лента рекомендаций
Автоматическая лента формируется из похожих по теме страниц вашего сайта. При включении ленты такие страницы отображаются последовательно друг за другом. Это позволяет увеличить количество просмотров до 30%.
Подробнее о преимуществах Турбо‑страниц в PDF
Формирование Турбо‑страниц
Турбо‑страницы могут формироваться несколькими способами в зависимости от типа сайта:Отображение на сервисах Яндекса
Турбо‑страницы могут отображаться на различных сервисах Яндекса:
- В результатах поиска
- В сюжетах Яндекс.Новостей
- В ленте Яндекс.Дзена
yandex.ru
Технологии Яндекс Турбо-страницы и Google AMP для e-commerce / Habr
Введение
Веб разработка давно двинулась в сторону мобильного контента. Тренд последних нескольких лет в пользу трафика с мобильных устройств вместо десктопа, привёл к тому что поисковики сначала стали требовать от сайтов адаптивности и быстрой скорости загрузки, а с 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».
AMP и Турбо-страницы с точки зрения разработки
AMP — это полноценные HTML-страницы с поддержкой всех тэгов и CSS. Есть ряд несущественных ограничений, и отличие в оформлении head. Например запрещён тэг img, вместо него нужно использовать amp-img. Есть JavaScript компоненты позволяющие наладить взаимодействие с вашим сервером посредством JSON. Например можно отправлять форму быстрого заказа с AMP страницы на ваш сервер, получить ответ в виде JSON и отобразить его. Есть компоненты для карусели картинок, видео и т.д. Собственный JavaScript изначально был запрещён, но недавно была добавлена поддержка своих скриптов.
Турбо-страницы это сильно усеченный html до поддержки ряда тэгов, правда с полноценной поддержкой CSS3. Никаких сценариев по взаимодействию с бэкендом на текущий момент сделать нельзя. Также есть компоненты для каруселей, видео и прочего.
- быстрый заказ
- авторизация
- оплата.
Как передать страницы поисковику
Между 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 отдавать браузеру.
Здесь у меня возникла дилема, где генерировать этот 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 и Турбо-страницы. Что в свою очередь для пользователя будет размывать понимание на каком сайте он находится и у кого заказывает товар. Может получится глобальный маркетплейс внутри поисковых систем.
habr.com
Ускоряемся! Турбо-страницы для рекламы в Директе — Новости рекламных технологий Яндекса
Ускоряемся! Турбо-страницы для рекламы в Директе
При заказе со смартфона скорость загрузки сайта критически влияет на количество конверсий: чем дольше приходится ждать, тем больше пользователей откладывают покупку или переходят к другим предложениям в выдаче. Потери могут достигать 30% трафика — именно столько уже сейчас приходится на пользователей смартфонов. Чтобы не упускать эту аудиторию, используйте новые турбо-страницы Директа: это дополнительный мобильный лэндинг с ускоренной загрузкой, который можно добавить к основной посадочной странице. Система умеет определять, с какого устройства пользователь кликает по рекламе, и в зависимости от этого перенаправлять его либо на ваш сайт, либо на турбо-страницу.
Вероятно, вы уже видели турбо-страницы в Яндекс.Новостях или Дзене — сервисы умеют формировать их автоматически, заполняя стандартные блоки контентом медиаресурсов. Турбо-страницы в Директе похожи на них по дизайну и скорости загрузки, а вот по функциональности они заметно отличаются.
Как выглядят Турбо-страницы
Основной шаблон турбо-страниц для Директа включает блоки с логотипом, заголовками, текстами, картинкой и кнопкой, по клику на которую пользователь переходит к форме заказа. На этапе закрытой беты пока доступен только вариант «обратного звонка», при котором пользователь оставляет свои данные, а затем с ним связывается менеджер. Такая форма подойдет компаниям, которые продвигают товары с долгим циклом продаж (например, недвижимость и авто) и услуги (финансовые, юридические, клининговые и другие). Немного позже мы предложим аналогичное решение для товарных кампаний с возможностью оформлять покупки без перехода на сайт, а также больше разнообразных шаблонов дизайна.
Они создаются автоматически?
Не совсем. Мы сделали специальный конструктор турбо-страниц: в нем вы можете взять за основу базовый шаблон и настроить его на свое усмотрение, меняя изображения, цвета и тексты. Получившиеся страницы сохраняются в библиотеке конструктора, откуда их можно добавлять к основной ссылке при создании или редактировании группы объявлений.
Как автоматизировать рутинные операции с турбо-страницами?
Использовать опции массового изменения в меню «Редактировать», чтобы добавить или изменить турбо-страницу сразу в нескольких группах объявлений.
А что со статистикой?
При создании турбо-страницы система автоматически создает в Метрике для логина, под которым вы работаете в Директе, счетчик с пометкой «turbo» и несколькими целями: затем данные по всем турбо-страницам собираются с помощью этого счетчика. Статистику по объявлениям с турбо-страницами вы можете посмотреть в Мастере отчетов, задав в фильтре «тип устройства» — «мобильные», а для более детального ее изучения перейти в Метрику.
Как подключить
Для участия в бете, пожалуйста, напишите сотрудникам клиентского сервиса или вашему менеджеру в Яндексе. Подробнее о настройке турбо-страниц читайте в помощи.
Одними из первых турбо-страницы протестировали Qlean — и остались довольны результатами: рассказываем об этом в совместном кейсе.
yandex.ru