Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google Accelerated Mobile Pages

Google Accelerated Mobile Pages

A overview of the Google AMP project or Accelerated Mobile Pages

Fd41594dae139b2eedc855143e9714ef?s=128

Andre Marcelo-Tanner

November 13, 2015
Tweet

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

  4. None
  5. Mobile Internet? - 2G

  6. 2007

  7. 2015

  8. Websites Today

  9. None
  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
  11. None
  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]
  17. None
  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
  19. None
  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