WebCamp2016, 29 июля, Одесса Андрей Копёнкин CTO, FlyElephant Оптимизируем мобильный веб полностью В докладе поговорим об инициативе Accelerated Mobile Pages, о преимуществах её использования, что она из себя представляет и как она ускоряет отображение веб-страниц для портативных устройств Website: http://webcamp.in.ua/devops.html#theme Facebook: https://www.facebook.com/WebCamp/ VK: https://vk.com/webcamp Twitter: https://twitter.com/WebCampOdessa Youtube: http://bit.ly/2bsQ0LO

1. Оптимизируем мобильный веб
полностью

2. Немного статистики
http://www.smartinsights.com/mobile-marketing/mobile-marketing-
analytics/mobile-marketing-statistics/

3. USA market
https://www.comscore.com/fre/Insights/Blog/Number-of-Mobile-
Only-Internet-Users-Now-Exceeds-Desktop-Only-in-the-U.S

4. ДОЛГО!

5. Еще статистики
● 47% пользователей ожидают загрузку
страницы в течении 2 секунд или меньше
● 40% пользователей закрывают страницу
если она грузиться дольше 3 секунд
● Задержка в 1 секунду вызывает уменьшение
конверсии на 7%
https://blog.kissmetrics.com/loading-time/

6. Перформанс и еще раз перформанс

9. AMP — набор правил

10. Основные компоненты:
● AMP HTML
● AMP JS
● Google AMP Cache

11. AMP HTML
● <amp-img></amp-img>
● <amp-video></amp-video>
● <amp-iframe></amp-iframe>
● etc...

12. AMP JS

13. Google AMP Cache
CDN со встроенным валидатором
https://cdn.ampproject.org/c/s/website.com/amp_document.html

14. В чем же фишка?
10 основных принципов

15. 1.Разрешены только
асинхронные скрипты

16. 2. Статическое указание
размеров

17. 3. AMP не дает расширениям
блокировать поток

18. 4. Весь CSS должен быть
инлайновым и весить не
больше 50 KB

19. 5. Сперва загрузка шрифтов

20. 6. Минимизация перерасчета
стилей

21. 7. Можно использовать только
GPU-accelerated анимации

22. 8. Загрузка ресурсов по
приоритету

23. 9. Моментальное отображение

24. 10. НИКАКОГО КАСТОМНОГО JAVASCRIPT!

25. Всё не так плохо!
● amp-carousel
● amp-sidebar
● amp-accordion
● etc...

26. JavaScript Шрёдингера

27. JavaScript Шрёдингера

28. Для начала

29. Картинки

30. Реклама
<script async custom-element="amp-ad"
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

31. Провайдеры
● AdSense
● MicroAd
● YahooJP
● OpenX
● AdReactor
● И многие другие

32. А как же аналитика?

33. Вендоры
● Google Analytics
● Adobe Analytics
● AT Internet
● ChartBeat
● comScore
● Parsely
● Segment
● И многие другие
● Yandex — в планах

34. Как быть со стилями?

35. Что запрещено?
● <base></base>
● <frame></frame>
● <frameset></frameset>
● <embed src="helloworld.swf">
● <form></form> (необходим компонент AMP )
● <input type='file'>, <input type='password'>
● И т. д.
HTML

36. Что запрещено?
● @import
● Псевдо классы на amp-* тэги
● Селекторы * и псевдокласс :not()
● !important
● Свойство filter
CSS

37. Кто уже использует

38. Не серебрянная пуля
● Новостные сайты
● E-commerce
● Ресурсы с часто изменяемым контентом

39. Google Search

40. Разделение

41. Валидируй всеми способами
● Browser Developer Console
● Web Interface
● Chrome and Opera extension

42. Проще некуда
1) Открыть браузер
2) Добавить «#development=1» к URL
в адресной строке
3) Открыть консоль

43. Validation on fire

44. Перейдем к цифрам

45. ● Загрузка страницы уменьшилась с 3.5 до 1.2
секунд
● На 23% увеличено количество пользователей
которые возвращаются в течении следующих 7
дней
● Более 1000 статей ежедневно публикуются в AMP
HTML
https://developers.google.com/web/showcase/2016/wapo

46. Планы на будущее
● Поддержка обновлений в реальном
времени
● AMP Landing Pages
● Реализация авторизации и функций
оплаты

47. Полезные ссылки
● https://www.ampproject.org/ - AMP Project Website
● https://amphtml.wordpress.com/ - AMP Blog
● https://ampbyexample.com/- сайт с примерами от
Malte Ubl
● https://www.youtube.com/watch?v=a5X_Ot-R6lo - Alex
Russell, AMP + Progressive Web Apps: Start fast, stay
engaged

48. Спасибо за внимание!
Вопросы?