AMP, Instant Articles, Instant View, whut?

AMP, Instant Articles, Instant View, whut?

Самат Галимов, технический директор Meduza.io

Общее

Все три технологии нужны для того, чтобы страницы из интернета открывались быстрее на телефонах. 

Долгая загрузка это плохо. Каждая секунда ожидания — дополнительные отказы (что плохо для издателей) и меньшее вовлечение в мобильную платформу (плохо для Facebook, Google и т.п.). Вот какую статистику приводит Facebook для своей технологии Instant Articles:

  1. Статьи Instant Articles загружаются в среднем в 10 раз быстрее, чем обычные мобильные статьи
  2. Статьи с IA читают в среднем на 20% больше, чем без него
  3. Статьи в IA дочитывают на 70% чаще, чем статьи без него

Почему страницы стали загружаться долго? Основные причины:

  1. большие сложные скрипты — привет, параллакс-эффекты и жесткие дедлайны;
  2. кастомные шрифты — привет, 3 шрифта в 3 начертаниях на одной странице;
  3. плохие настройки сервера — привет, тормозной virtual hosting в Индии, на apache без кеширования, с отключенным gzip и плохим TLS.

Решение:

  1. отрезать всё лишнее, оставить только реальный контент — текст, картинки и видео;
  2. разместить этот контент на качественной серверной инфраструктуре (CDN).

Особенности

Google AMP

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

вот как это работает в поисковой выдаче google


AMP — это расширение формата HTML. Некоторые вещи, которые часто использовались для плохого — запрещены. Самое важное — запрещены любые кастомные javascript'ы. Контент кешируется на серверах Google и доставляется читателям именно с них.

Как подключить: создаете дополнительную страницу в формате AMP на сайте и делаете ссылку на неё с основной страницы (ссылка в header, нужна для машин, читателям не видна).

Как трекать: примерно так же, как и все обычные страницы, можно вставить практически любой трекинг-код вроде Google Analytics или TNS. 

Как крутить рекламу: можно практически любую (через iframe), нативно поддерживаются многие сети.

Facebook Instant Articles

Внутренняя разработка Facebook. Работает только в официальных мобильных приложениях Facebook. Доступно для издателя только после апрува командой Facebook.

слева — обычная статья, справа — instant article, обратите внимание на значок молнии ⚡️рядом с meduza.io

Это тоже html, но в отличие от AMP вы не контролируете стили через CSS вообще. Вся настройка стилей происходит в специальном интерфейсе фейсбука. Контент доставляется до читателей с серверов Facebook.

зато можно пустить сюда дизайнера и не волноваться, что он что-то испортит

Как подключить: создать instant-articles-версию страниц (по аналогии с AMP) и настроить их экспорт в Facebook. Можно руками в интерфейсе, можно через RSS поток или через специальное API

Как трекать: есть внутренний интерфейс Facebook и там даже видно, до какого процента дочитывают в среднем статью. Также можно подключить практически любой свой трекинг код, будь то GA или TNS. Важно как-то специально метить эти страницы, иначе вы не отличие трафик с Instant Articles от остального трафика. Мы в Медузе, например, передаем специальный hostname во всех запросах.

Как крутить рекламу: доступен собственный Audience Network фейсбука, причем так, что ФБ может оптимизировать не только контент баннеров, но даже их число и расположение между абзацами. Ну или по-старинке — iframe'ом.

Telegram Instant View

Запущенная сегодня ночью технология от Telegram. Работает только в последних версиях мобильных telegram-клиентов и только на 3 сайтах — блог-площадке Medium, сайте техно-новостей Techcrunch и в собственной системе публикации Telegraph.

Судя по всему, работает через парсинг страниц на серверах Телеграма, по аналогии с сервисом Mercury и режимом чтения в Safari. Есть небольшой страх, что они будут пытаться парсить интернет, как делал в своё время vkontakte и не дадут издателям возможности поправить ошибки парсинга, которые неизбежно возникнут. Но время покажет.

Как подключить: ждать милости команды Telegram.

Как трекать и крутить рекламу: непонятно.

Важное

Самое важное — не то, как мы будем крутить рекламу или трекать долю аудитории из Москвы. А то, что телефоны читателей перестанут разряжаться за пару часов браузинга ленты фб. Ни в одном научно-фантастическом фильме герой не смотрит в белый экран, пока статья загрузится на плохом 3G в центре Москвы — всё загружается и открывается мгновенно. Поздравляю вас, будущее наступило.

Кстати, так как контент располагается на серверах Google и Facebook — то и заблокировать стандартным способом Роскомнадзор его не сможет, останется только договариваться с Google и FB или блокировать их целиком. То же самое в плане DDoS — вы перекладываете все эти проблемы на плечи гигантов.

Вывод

Если основной трафик у вас из гугла — программируйте поддержку AMP, она самая простая. Если трафик из фейсбука существенен — подключайтесь к Instant Articles. Сыграю в Кашпировского — это не больше пары недель программирования.