Google Accelerated Mobile Pages

A overview of the Google AMP project or Accelerated Mobile Pages

Transcript

1. A C C E L E R AT I N G T H E W E B T H R O U G H A M P A N D R E M A R C E L O - TA N N E R
2. about.me • github.com/kzap • examine.com - Director of Technology • Openovate Labs - Int’l Accounts • Namespace.PH - Chief everything officer.
3. B A C K T O 2 0 0 5
5. Mobile Internet? - 2G
8. Websites Today
10. What is AMP • Accelerated Mobile Pages • Released in October 2015 • Super Fast Mobile Web Pages • Open Sourced on Github, Apache License • Restricted sub-set of HTML with rules • Developed within Google
12. A M P L A U N C H PA R T N E R S
13. M E D I A S I T E S U S I N G A M P
14. How Does It Work?
 Ban HTML that loads • <IMG /> • <FORM> • <INPUT /> • <VIDEO /> • <AUDIO /> • JAVASCRIPT • EXTERNAL STYLES/CSS • ADS! • <IFRAME> • <EMBED>
15. How Does It Work?
 Replace with Custom Elements • <AMP-IMG> • <AMP-VIDEO> • <AMP-AUDIO> • <AMP-ANIM> • <AMP- INSTAGRAM> • <AMP- CAROUSEL> • <AMP-IFRAME> • <AMP-AD> • <AMP-YOUTUBE> • <AMP-TWITTER>
16. Demo Site http://g.co/ampdemo Use your mobile phone or Chrome mobile dev tools Search for [mars] or [fashion]
18. Not For Everyone • GOOD FOR: • News Sites / Blogs • Content Sites • Forums • Static Content • NOT FOR: • SPA - Single Page Apps • Web Apps • Interactive Sites • Require Javascript to function
20. How to get Started? github.com/ampproject Wordpress Plugin wordpress.org/plugins/amp
21. 2nd set of web pages v7.examine.com/ supplements/creatine v7.examine.com/ supplements/creatine/amp <link rel=“amphtml” href=“http://…..” />
22. Make a new set of templates • Remove Javascript • Inline CSS • Convert IMG to AMP-IMG • Add AMP Javascript File • Test URL with #development=1
23. <AMP-IMG < A M P - I M G S R C = “ H T T P : / / . . . . “ L AY O U T = “ R E S P O N S I V E ” W I D T H = “ 1 0 0 ” H E I G H T = “ 1 0 0 ” > < / A M P - I M G >
24. <AMP-VIDEO < A M P - V I D E O S R C = “ H T T P : / / . . . . “ W I D T H = “ 1 0 0 ” H E I G H T = “ 1 0 0 ” > < D I V FA L L B A C K > N O H T M L 5 S U P P O RT < / D I V > < / A M P - V I D E O >
25. <AMP-LIGHTBOX < B U T T O N O N = “ TA P : M Y- L I G H T B O X ” > O P E N < / B U T T O N > < A M P - L I G H T B O X I D = “ M Y- L I G H T B O X ” L AY O U T = “ N O D I S P L AY ” > < D I V > P O P U P C O N T E N T < / D I V > < B U T T O N C L O S E > X < / B U T T O N > < / A M P - L I G H T B O X >
26. <AMP-TWITTER < A M P - T W I T T E R W I D T H = “ 4 0 0 ” H E I G H T = “ 1 0 0 ” D ATA - T W E E T I D = “ 1 2 3 4 5 6 7 8 9 0 ” D ATA - C A R D S = “ H I D D E N ” D ATA - S O M E T H I N G = “ VA L U E ” L AY O U T = “ R E S P O N S I V E ” / >
27. Live Demo v7.examine.com/ampdemo v7.examine.com/ampdemo2 3.1MB , 160 requests, 
 4 seconds DOM Loaded 1.5MB , 47 requests, 
 517 milliseconds DOM Loaded
28. The Future? • Web standard with Facebook Instant Pages and Apple News • Native browser functionality • Build better mobile sites • Something better?
29. Thank You! Twitter @kzapkzap github.com/ampproject speakerdeck.com/kzap ampproject.org Slack: phackers.io