bynetweek.byорганизатор

Next Generation Web@ bynetweek.by

Веб-технологии нового поколенияАндрей Липатцев, Google, Минск 2017

Шеф, всё пропало!

В приложениях проводят больше времени...

vs13% 87%

Мобильный веб Приложения

Источник: comScore Mobile Metrix, U.S., возраст 18+, июнь 2015

...но, в каких приложениях?

vs13%35%

Прочие

Развлечения(игры, радио, мультимедиа)

Соцсети и аськи

32%

20%Мобильный веб

Источник: comScore Media Metrix MP and Mobile Metrix, США., общая аудитория, июнь 2015

Источник: comScore Mobile Metrix, U.S., возраст 18+, июнь 2015

Охват и вовлечённостьТоп 1000 приложений против топ 1000 мобильных веб-ресурсов

10,9

Уникальные посетители/месяц (миллионы)

3,3

Минуты/посетителя в среднем

Моб. вебПрил.

8,9201,8

Веб обеспечивал охват

Вовл

ечён

ност

ь

Охват

Теперь веб обеспечит и вовлечённость

Вовл

ечён

ност

ь

Охват

«Хочешь я расскажу тебе сказку?» (с)

Начинаем с поиска Смотрим категорию, выбираем...

В наличии нет... Просим оповестить Получаем оповещения

Нет связи! @#%@!!1 Только спокойствие! Дело-то житейское :)

Получаем уведомление Добавляем в корзину Переходим в кассу Автоматический логин

Профит!Заходим, когда пожелаемОплата одним нажатием Добавляем на экран

Не верится?

5 строчек кода! Чесслово!

Скорость

Accelerated Mobile Pages

Но как?

Скорость Глубина

Accelerated Mobile Pages

Progressive Web Apps

Но как?

Скорость Глубина Конверсии

Accelerated Mobile Pages

Progressive Web Apps

Web Payments

Но как?

Скорость Глубина Конверсии Возврат

Accelerated Mobile Pages

Progressive Web Apps

Web Payments

Credential Management

Но как?

Proprietary + ConfidentialProprietary + Confidential

Proprietary + Confidential

Можно же так, но лучше ускориться

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

пользователей уходят с сайта, который грузится >3 секунд53%

Источник: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

99 проблем веб-бизнеса

2 Плохой осадок от мобильного веба

1 Закрытые модели дистрибуции

3 Монетизация контента

4 Скорость изменения технологий

5 Блокировщики рекламы

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Нужен план!

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

План такой:

2 Просто

1 Быстро

3 Мобильно

4 Открыто

5 Прибыльно

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Но как?!

2 Оптимизировать

1 Упростить

3 Кэшировать

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

профит AMP

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

● Открытый формат для простых страниц

● Доступ к AMP Cache для оптимизации скорости

● Дизайн и бизнесс-модель в руках хозяина

● Поддержка рекламы и аналитики

● Совместимость с основными браузерами

AMP, это что?

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

4x 10x быстрее меньше

данных

<1 секунды среднее время загрузки

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Реализация

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

HTML5(AMP HTML)

JavaScript(AMP JS)

CSS3(Кастомные стили)

Global Proxy Cache

(AMP Cache)

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

AMP-HTML

Рекламные доходы и аналитика

HTML

Ускорение с помощью AMP Cache

CMS

Как AMP работает

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Веб-сервер

Local copy of your assets

Без AMP cache С AMP cache

Веб-серверЛокальный

Локальный

Локальный

Локальный

Локальный

Локальный

Локальный

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Фичи: резиновый

2 Лучший размер медиа

1 Размер устройства

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

2 Нет вложенного скролла

1 Без кастомного JS (только в iFrame)

3 Не более 50 kB CSS

Фичи: не резиновый

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Растущая поддержка

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

-2% v = -2% запросов/пользователя

400ms быстрее = +9% трафика

Выше = больше просмотров

100ms выше = +1% оборота

5s выше = +25% просмотров, +7-12% оборота

37% выше = +70% мобильный оборот/пользователя

80% выше = +108% взаимодействие с рекламой

Скорость даёт результаты

Обыкновенное чудо

Быстрое начало с AMP... ...и увлекательноепродолжение с PWA

Преимущества PWA

● Главный экран

● Пуш-уведомления

● Оффлайн-доступ

● Локальный кэш

Как устроен Service Worker

Service WorkerПрокси на клиенте в

JavaScript

Веб-сервер

Кэш

Веб-сервер

По-старому

По-новому

Кэш Service Worker для быстрой загрузки

<1 секвремя первой загрузки

и ещё быстрее для последующих

… и даже в плохой сети и без неё

Source: https://developers.google.com/web/showcase/2016/flipkart

возврат на сайт

Результаты Flipkart

3X большевремя на сайте

40% выше

70% большеконверсий среди перешедшихс иконки

Счёт, пожалуйста!

Печтать на мблиньмо трудно

66% Мобильных покупок – веб

...но конверсии отстают -66%

Конверсии в мобильном вебе к десктопному

Создавать аккаунты трудно

пользователей уходят, не создав аккаунт

92%

Chrome уже помогает пользователям логиниться быстрее

8B входов в месяц с помощью менеджера паролей в Chrome

Google API для бесшовного создания аккаунтов и входа в аккаунты на Android и Chrome

Более

70% сохраняют пароли

Сохранить пароль ИЛИ Аккаунт

В одно касание

Автоматически

При оформлении покупки может возникнуть до 25 форм

...неудивительно, что до 97% бросают корзины

Source: http://www.google.com/wallet/business/payments/

Как закрыть разрыв по конверсиям?

Веб сегодня

Обезболить формы

Autofill

Следующее поколение

Избавиться от форм

PaymentRequest API

Autofill

Заполнение в одно касание

Синхронизация карт и адресов

Повышение заполняемости форм

PaymentRequest API

Открытый Javascript API

Сбор данных браузером

Кросс-браузерно и -платформенно

Любая форма платежа

Checkout в один клик

Proprietary + Confidential

Шок! Они сделали это!

Лента.ру

● Скорость загрузки = 2x выше

Как мы разогнали мобильную Lenta.ru до скорости светаhabrahabr.ru/company/rambler-co/blog/280602/

Washington Post

● Более 1 000 AMP статей в день

● Скорость загрузки = 400 ms – 88% выше

● Возврат пользователей – 23% выше

Source: https://developers.google.com/web/showcase/2016/flipkart

повторное взаимодействие

Flipkart – оффлайн доступ и добавление на экран

3X большевремя на сайте

40% выше

70% вышеконверсия

Source: https://developers.google.com/web/showcase/2016/jumia

Успех Jumia с пуш-уведомлениями

Среди пользователей, разрешивших уведомления

9X вышеконверсия по заполненным корзинам

Source: https://developers.google.com/web/showcase/2016/aliexpress

AliExpress наблюдает больше вовлечённости с разных браузеров

74% больше проведено времени

82% больше конверсий на iOS

Source: https://developers.google.com/web/showcase/2016/suumo

31% открывают пуш-уведомления

75% ниже время загрузки страниц

Suumo добился повышения скоростии вовлечённости

Попробуй меня!

Flipkart

Aliexpress

Washington Post

Jalantikus

Babe

Geo TV

5miles

Air Berlin

NFL NowKonga

Alibaba

Ещё! Ещё! Ещё!ampproject.org/case-studies/developers.google.com/web/showcase/

Скорость Пользователи AMP + PWA = Профит

Спасибо!google.com/webmastersdevelopers.google.com/web

За изображения спасибо: unsplash.com & pixabay.com