Amp Overview #YGLF 2016

1,608 views

Published on

An overview of Accelerated Mobile Pages Project. See how you can leverage this important open source project today in production and improve your sites' performance and the happiness of your users.

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,608
On SlideShare
0
From Embeds
0
Number of Embeds
1,239
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Amp Overview #YGLF 2016

  1. 1. AMP
  2. 2. @greenido ido-green.appspot.com
  3. 3. With the shift to mobile, the way we consume content has changed
  4. 4. 9:34 AM contentbazaar.co/20160314/pi-way 9:34 AM contentbazaar.co/20160314/pi-way Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 9:34 AM contentbazaar.co/20160314/pi-way Slow Loading Non-Responsive Content Content Shifting
  5. 5. It sometimes seems like we’ve just given in.
  6. 6. Data from: Reuters Institute - Digital News Report http://www.digitalnewsreport.org/survey/2015/executive-summary-and-key-findings-2015/ 2015 2014 2013 2012 Smartphone news use 60% 40% 20% 0% GermanyJapan France UK US Denmark NA
  7. 7. State of the News Media 2015, Pew Research Center http://www.journalism.org/2015/04/29/state-of-the-news-media-2015/ 78% of top news sites and apps (2015) Mobile > Desktop Visitors
  8. 8. 20% of top news sites and apps (2015) Mobile > Desktop Time Spent Per Visit State of the News Media 2015, Pew Research Center http://www.journalism.org/2015/04/29/state-of-the-news-media-2015/
  9. 9. http://observer.com/2015/09/the-homepage-is-officially-dead http://www.theatlantic.com/business/archive/2014/05/what-the-death-the-homepage-means-for-news/370997 http://www.forbes.com/sites/sachinkamdar/2015/12/27/is-the-homepage-dead/#5267c9e35bf8
  10. 10. 40% of people abandon a website that takes more than 3 seconds to load https://blog.kissmetrics.com/loading-time
  11. 11. ● How to build experiences that will be fast and engaging while monetizing well? ● How to operate in a world where the discovery of content is increasingly happening off-site?
  12. 12. Accelerated Mobile Pages Project Introducing ...
  13. 13. Demo: AMP on Google Search driving content discovery In late February, Google launched AMP articles in “Top stories” in Google Search Try it now on google.com (in your phone’s browser)
  14. 14. Goals for the AMP Project Make pages fast Be easy to implement Embrace the open web Enable monetization
  15. 15. AMP pages = web pages: ● AMP-HTML + CSS ● No one-off JavaScript ● Instead: custom elements ● Sandboxed amp-iframes can contain anything AMP open-source JS library: ● Same everywhere ⇒ highly cacheable ● Defines behaviors for custom elements ● Manages rendering and resource loading to optimize performance
  16. 16. AMP pages = web pages: ● AMP-HTML + CSS ● No one-off JavaScript ● Instead: custom elements ● Sandboxed amp-iframes can contain anything AMP open-source JS library: ● Same everywhere ⇒ highly cacheable ● Defines behaviors for custom elements ● Manages rendering and resource loading to optimize performance “AMP”
  17. 17. What is AMP? HTML5 (AMP-HTML) JavaScript (AMP JS Library) CSS3 (Custom styling) Caching (AMP Cache)
  18. 18. What is AMP? HTML5 (AMP-HTML) JavaScript (AMP JS Library) CSS3 (Custom styling) Caching (AMP Cache) Validation (AMP Validator)
  19. 19. AMP Publishing Flow AMP-HTML HTML AMP Cache CMS Ad revenue and analytics Publishers depicted are examples for illustrative purposes Platforms depicted are examples for illustrative purposes Link Tags
  20. 20. Three Sources of Speed AMP-HTML HTML AMP Cache CMS Ad revenue and analytics CachingAMP-HTML Format Prerendering Link Tags
  21. 21. S P E E D S O U R C E # 1 AMP-HTML Format
  22. 22. Average Mobile Site Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
  23. 23. Hand-Tuned Site Average Mobile Site Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
  24. 24. Hand-Tuned Site Average Mobile Site Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG AMP
  25. 25. Hand-Tuned Site Average Mobile Site Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG All AMPs
  26. 26. ● Smart content prioritization ✓ Prefetching the elements ✓ No relayout ✓ Asynchronous load ● Responsive design baked in ✓ Always get the best image for your screen (full srcset support) ● Limited by design ✓ No custom JavaScript except in amp-iframe ✓ No scrolling elements on the page ✓ Max 50KB inline stylesheet AMP Format: Elevated Performance Baseline for All
  27. 27. Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG 10x4x Less DataFaster Data furnished by Google. 0101010110010011 1001010010100110 AMP Format: Elevated Performance Baseline for All
  28. 28. S P E E D S O U R C E # 2 Caching
  29. 29. Local copy of assets Without an AMP cache With an AMP cache Web server Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server Caching Brings Content Physically Closer to Users
  30. 30. S P E E D S O U R C E # 3 Prerendering
  31. 31. Header Logo Responsive hero image Headline Article text Image in article Some more text Ad Optimizations include: ● Only the first viewport is prerendered — because AMP knows where each page element is positioned ● No 3rd party JavaScript is executed at this stage “Above the Fold” Prerendered “Below the Fold” Not Prerendered Prerendering by Platforms Can Make Loading Instant
  32. 32. Three Sources of Speed AMP-HTML HTML AMP Cache CMS Ad revenue and analytics Caching Prerendering Link Tags AMP-HTML Format
  33. 33. 20 Minutes 20 Minutos ABC AS BBC Abendzeitung ANSA Bento Berliner Morgenpost BILD Blasting News Blogo.it CCM Benchmark Charente Libre.fr Conde Nast Corriere della Sera DailyMail.com / MailOnline Daily Star The Week El Confidencial El Español El Mundo El Mundo Deportivo EL PAÍS El Periódico El Economista Europa Press Evening Standard Expansión Daily Express Frankfurter Allgemeine Zeitung FOCUS Online France 24 Francetvinfo Golem.de Gruner + Jahr Guardian News & Media HNA.de IBT UK Il Fatto Quotidiano IlSole24Ore IlSussidiario.net Ippen Digital Plattform kicker La République des Pyrénées La Stampa La Vanguardia Lagardère Active Le Parisien Les Echos L'Express Mail.Ru Group Marca Meduza merkur.de Metro UK Metronews OK! Ouest France Promiflash Público Repubblica RP Online RT RTL Russmedia Digital Sorrisi e Canzoni SPIEGEL ONLINE Sport SPORT1 Stuttgarter Zeitung Süddeutsche Zeitung SudOuest.fr t-online.de tagesschau TF1 The Financial Times The Independent Trinity Mirror tz.de Vocento Welt.de ZEIT ONLINE Вести.Ru Информационное агентство России ТАСС Лента.ру Московский Комсомолец Телекомпания НТВ Europe Asia Ameba.com Asahi Shimbun Bintang.com BLOGOS Bloter Bola.com Oneindia Business Standard CINEMATODAY Digital Chosun Eiga.com FirstPost Hankyung.com Indiatoday.in JoongAng Ilbo KapanLagi Network KASKUS Kompas.com Liputan6.com Maekyung.com Mainichi Shimbun Mynavi News NDTV Newstapa Nikkan Sports Republika.co.id Response Sankei News SANSPO Slow News THE PAGE Tempo.co Economic Times Uzone.id Yonhap News ZAKZAK North America ABC News The Atlantic Business Insider Buzzfeed CNN Digital Trends E! News Entrepreneur Forbes Fusion Hearst Heavy The Huffington Post IBT Media The Inquisitr News Los Angeles Times MarketWatch Mic MSNBC New York Daily News The Next Web The New York Post The New York Times POPSUGAR. SB Nation theScore Time Inc. Tribune Media USA Today The Verge Vox Wall Street Journal Washington Post Latin America Agência Brasil Basket4us.com Cybercook Diário 24 Horas EBC Economiahoy.mx El Universal Época ESPN Brasil Estadão Exame.com Excelsior Folha de S. Paulo Galileu Globo Grupo Expansion Grupo Imagen Grupo Medios Grupo RBS Jornal Extra M de Mulher MaisEquilibrio O Globo Portal Catraca Livre R7.com Radioagência Nacional Tecmundo Televisa Terra Terra Mexico TV Azteca UOL Vanguardia Veja São Paulo Veja.com Vila Mulher Publishers Supporting AMP (A Growing List!)
  34. 34. Apps & Platforms Supporting AMP (Also A Growing List!) Google Search Google News Google News & Weather
  35. 35. 7300+ 1900+PULL REQUESTSDEVELOPERS HAVE ENGAGED 88RELEASES Fantastic momentum and engagement for AMP Project Source: github.com/ampproject/amphtml. Data as of May 12, 2016
  36. 36. Ads Content Access FormatAnalytics Focus Areas Publishers Vendors Platforms Collaborators
  37. 37. Analytics in AMP ● <amp-analytics> custom element ● Highly configurable analytics framework ■ Event triggers: Page visible, click, scroll, timer ■ AMP library–provided data values: Client ID, page and content info, device and browser info, performance, and more ● Instrumentation managed by AMP means performance stays in check: “Measure once, report to many” ● Easy vendor config from 10+ vendors (and more welcome)
  38. 38. Ads in AMP ● <amp-ad> custom element ● Integration with existing ad trafficking workflows ● Support for most common formats: standard banner ads, HTML5 ads, native ads, ads that resize on user interaction ● No restrictions on ad density ● Viewability support ● Integration with dozens of 3rd party providers: demand sources, sponsored content, data management platforms
  39. 39. Content Access in AMP ● <amp-access> custom element ● Support for metering and subscriber sign-in ● Client-side content hiding ● Publisher uses their own business logic to make access decision ● Publisher can track (count) accesses ● Integration with amp-analytics
  40. 40. Join the AMP initiative 1 EXPLORE ampproject.org/docs to learn more and read documentation github.com/ampproject/amphtml to connect with the development team 2 DEVELOP & TEST Start developing AMP files and validate them 3 LAUNCH Point to AMP files from canonical articles to make them discoverable and eligible to appear in content platforms 1 2 3
  41. 41. Format Innovation in AMP ● Out of the box image carousel and lightbox ● Menu for site navigation (amp-sidebar) ● Tighter Progressive Web App (PWA) integration (amp-install-serviceworker) ● Templating for dynamic data loading (amp-list) ● Expand/collapse sections (amp-accordion) ● 15+ supported vendor extensions (audio, video, social, etc)
  42. 42. Q & A
  43. 43. THANK YOU @greenido ido-green.appspot.com

×