Международная конференция по интернет-маркетингу «Неделя Байнета». День Поисковый Маркетинг, 7 апреля, Минск, Беларусь. Больше информации об Андрее Липатцеве и о других спикерах Недели Байнета смотрите на сайте конференции www.bynetweek.by Узнавайте актуальную информацию о конференции на странице Недели Байнета в Facebook https://www.facebook.com/BynetWeek/

1. bynetweek.byорганизатор
Next Generation Web
@ bynetweek.by
Веб-технологии нового поколения
Андрей Липатцев, Google, Минск 2017

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

4. В приложениях проводят больше времени...
vs13% 87%
Мобильный веб Приложения
Источник: comScore Mobile Metrix, U.S., возраст 18+, июнь 2015

5. ...но, в каких приложениях?
vs13%
35%
Прочие
Развлечения
(игры, радио, мультимедиа)
Соцсети и аськи
32%
20%Мобильный веб
Источник: comScore Media Metrix MP and Mobile Metrix, США., общая аудитория, июнь 2015

6. Источник: comScore Mobile Metrix, U.S., возраст 18+, июнь 2015
Охват и вовлечённость
Топ 1000 приложений против топ 1000 мобильных веб-ресурсов
10,9
Уникальные посетители/месяц (миллионы)
3,3
Минуты/посетителя в среднем
Моб. вебПрил.
8,9
201,8

7. Веб обеспечивал охват
Вовлечённость
Охват

8. Теперь веб обеспечит и вовлечённость
Вовлечённость
Охват

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

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

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

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

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

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

15. Не верится?

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

17. Скорость
Accelerated Mobile Pages
Но как?

18. Скорость Глубина
Accelerated Mobile Pages
Progressive Web Apps
Но как?

19. Скорость Глубина Конверсии
Accelerated Mobile Pages
Progressive Web Apps
Web Payments
Но как?

20. Скорость Глубина Конверсии Возврат
Accelerated Mobile Pages
Progressive Web Apps
Web Payments
Credential Management
Но как?

21. Proprietary + ConfidentialProprietary + Confidential
Proprietary + Confidential
Можно же так, но лучше ускориться

22. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
пользователей уходят с сайта,
который грузится >3 секунд53%
Источник:
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

23. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
99 проблем веб-бизнеса
2 Плохой осадок от мобильного веба
1 Закрытые модели дистрибуции
3 Монетизация контента
4 Скорость изменения технологий
5 Блокировщики рекламы

24. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Нужен план!

25. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
План такой:
2 Просто
1 Быстро
3 Мобильно
4 Открыто
5 Прибыльно

26. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Но как?!
2 Оптимизировать
1 Упростить
3 Кэшировать

27. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
профит AMP

28. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
● Открытый формат для простых страниц
● Доступ к AMP Cache для оптимизации скорости
● Дизайн и бизнесс-модель в руках хозяина
● Поддержка рекламы и аналитики
● Совместимость с основными браузерами
AMP, это что?

29. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
4x 10x
быстрее меньше
данных
<1 секунды
среднее время загрузки

30. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Реализация

31. 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)

32. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
AMP-HTML
Рекламные доходы и аналитика
HTML
Ускорение с
помощью AMP Cache
CMS
Как AMP работает

33. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Веб-сервер
Local copy of your assets
Без AMP cache С AMP cache
Веб-сервер
Локальный
Локальный
Локальный
Локальный
Локальный
Локальный
Локальный

34. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Фичи: резиновый
2 Лучший размер медиа
1 Размер устройства

35. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
2 Нет вложенного скролла
1 Без кастомного JS (только в iFrame)
3 Не более 50 kB CSS
Фичи: не резиновый

36. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Растущая поддержка

37. 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%
взаимодействие с рекламой
Скорость даёт результаты

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

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

40. Преимущества PWA
● Главный экран
● Пуш-уведомления
● Оффлайн-доступ
● Локальный кэш

41. Как устроен Service Worker
Service Worker
Прокси на клиенте в
JavaScript
Веб-сервер
Кэш
Веб-сервер
По-старому
По-новому

42. Кэш Service Worker для быстрой загрузки
<1 сек
время первой загрузки
и ещё быстрее для последующих

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

46. Source: https://developers.google.com/web/showcase/2016/flipkart
возврат на сайт
Результаты Flipkart
3X больше
время на сайте
40% выше
70% больше
конверсий среди перешедших
с иконки

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

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

50. 66%
Мобильных
покупок – веб
...но конверсии
отстают -66%Конверсии в
мобильном вебе к
десктопному

51. Создавать аккаунты
трудно
пользователей уходят,
не создав аккаунт
92%

52. Chrome уже помогает
пользователям логиниться быстрее
8B
входов в месяц с
помощью менеджера
паролей в Chrome

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

54. Более
70%сохраняют пароли
Сохранить пароль ИЛИ Аккаунт

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

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

57. При оформлении покупки может возникнуть до 25 форм
...неудивительно, что до 97%бросают корзины
Source:
http://www.google.com/wallet/business/payments/

58. Как закрыть разрыв по конверсиям?
Веб сегодня
Обезболить формы
Autofill
Следующее
поколение
Избавиться от форм
PaymentRequest
API

59. Autofill
Заполнение в одно касание
Синхронизация карт и адресов
Повышение заполняемости форм

60. PaymentRequest API
Открытый Javascript API
Сбор данных браузером
Кросс-браузерно и -платформенно
Любая форма платежа
Checkout в один клик

61. Proprietary + Confidential
Шок! Они сделали это!

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

63. Washington Post
● Более 1 000 AMP статей в день
● Скорость загрузки = 400 ms – 88% выше
● Возврат пользователей – 23% выше

64. Source: https://developers.google.com/web/showcase/2016/flipkart
повторное взаимодействие
Flipkart – оффлайн доступ и добавление на экран
3X больше
время на сайте
40% выше
70% выше
конверсия

65. Source: https://developers.google.com/web/showcase/2016/jumia
Успех Jumia с
пуш-уведомлениями
Среди пользователей,
разрешивших уведомления
9X выше
конверсия по заполненным
корзинам

66. Source: https://developers.google.com/web/showcase/2016/aliexpress
AliExpress наблюдает
больше вовлечённости с
разных браузеров
74% больше
проведено времени
82% больше
конверсий на iOS

67. Source: https://developers.google.com/web/showcase/2016/suumo
31% открывают
пуш-уведомления
75% ниже
время загрузки страниц
Suumo добился
повышения скорости
и вовлечённости

68. Попробуй меня!
Flipkart
Aliexpress
Washington Post
Jalantikus
Babe
Geo TV
5miles
Air Berlin
NFL Now
Konga
Alibaba

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

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

71. Спасибо!
google.com/webmasters
developers.google.com/web
За изображения спасибо: unsplash.com & pixabay.com