РИТ++ 2017, Frontend Сonf Зал Мумбаи, 6 июня, 13:00 Тезисы: http://frontendconf.ru/2017/abstracts/2608.html * История проекта Accelerated Mobile Pages. * Как это работает. * Западные кейсы и результаты. * Отечественные кейсы и результаты. * Как правильно внедрить AMP. * Будущее технологии.

1. Как технология AMP
HTML ускоряет сайты и
повышает бизнес-
метрики

2. Артём
Цымпов
UX директор и
основатель eski.mobi
2

3. Тезисы
● История проекта Accelerated Mobile Pages.
● Как это работает.
● Кейсы и результаты.
● Как правильно внедрить AMP.
● Будущее технологии.
3

4. 4
Среднее время загрузки страницы в
мобильном вебе
~22 сек

5. 5

6. 6
Сайт
Мобильный
интернет

7. 7
Мобильный
интернет
Сайт
iframe
Колтрекинг
Онлайн чат
Социальные плагины
Реклама

8. 8
Что приносит деньги
Конверсия в
покупки
E-commerce
Просмотры или
CTR рекламы
Медиа

9. 9
Сайт
iframe
Колтрекинг
Онлайн чат
Социальные плагины
Реклама
Не убирать! Влияет на
конверсию!

10. 10
посетителей покидают сайт, если он
грузится более 3 секунд
53%

11. 11

12. 12
User Experience Монетизация

13. 13
+User Experience Монетизация
AMP HTML

14. История проекта AMP
В 2015 году Google начал активную работу по улучшению
своей поисковой выдачи на мобильных устройствах:
● Алгоритм mobile-friendly
● Анонс технологии Accelerated Mobile Pages (AMP)
14

15. 15
Начинаете поиск

16. 16
Получаете результаты

17. 17
Видите значок AMP
и нажимаете на сайт

18. 18
Мгновенно загружается
страница

19. 19
Время загрузки видимой части AMP
страницы
~1 сек

20. 20
ки видимой части AM

21. В чем секрет?
● Особая разметка amp-html
● Без стороннего JS
● CSS не более 50 Кб
● Google AMP Cache
21

22. amp-html
22
img Заменяется на amp-img
video Заменяется на amp-video
audio Заменяется на amp-audio
iframe Заменяется на amp-iframe
frame, frameset, object,
param, applet, embed,
base
Запрещены

23. JavaScript
Любой кастомный JavaScript запрещен, за исключением
AMP компонентов:
● Реклама
● Динамический контент: форма, список, уведомления,
галерея, iframe, аккордеон, карусель, сайдбар.
● Медиа: видео и аудио плееры.
● Социальные кнопки: поделиться, лайкнуть.
● Шрифт, анимация...
23

24. CSS не более 50 000 байт
Запрещено:
● Универсальный селектор * и :not()
● overflow: scroll, overflow: auto (нельзя делать
скролящиеся блоки)
● filter
● !important
24

25. Google AMP cache
Кеш валидных опубликованных AMP страниц. Доступ
прямо из поиска Google.
25

26. https://www.google.com/amp/s/www.e
bay.com/b/amp/DJI-Camera-Drones/17
9697/bn_89960
26

27. Кейсы и результаты
27

28. 28
средний чек
+28%
отказов
−20%

29. 29
конверсия из
поиска в
покупки
+49%
выше CTR
рекламы
×3

30. 30
новых
регистраций
+25%
отказов
−18%

31. 31
выше CTR
рекламы
+63%
новых
юзеров из
поиска
+25%

32. Как внедрить AMP своими руками
● Определите для каких шаблонов нужен AMP
● Создайте AMP шаблон по инструкции ampproject.org
● Свяжите с вашей CMS
● Пройдите валидацию validator.ampproject.org
● Добавьте ссылку на AMP версию на основной сайт:
<link rel="amphtml"
href="https://example.com/url/to/amp/doc.html">
32

33. Как внедрить AMP своими руками
● Поисковая система
закеширует AMP версию
страницы.
● И будет показывать в
результатах AMP вместо
обычной + значок.
33

34. Короткий путь
● Готовый плагин для вашей CMS
● SaaS платформа AMP https://eski.mobi/services/amp/
34

35. Что дальше?
● Почти все сайты используют одинаковые
компоненты и плагины — это можно унифицировать.
● Чем быстрее загружается, тем лучше.
● Нужно больше платформ, которые поддержат AMP.
● Новый стандарт HTML?
35

36. Что дальше?
Следите тут https://www.ampproject.org/
36