Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AMP
@greenido
ido-green.appspot.com
With the shift to mobile, the way we
consume content has changed
9:34 AM
contentbazaar.co/20160314/pi-way
9:34 AM
contentbazaar.co/20160314/pi-way
Lorem ipsum dolor sit amet,
consectetur ...
It sometimes seems like
we’ve just given in.
Data from: Reuters Institute - Digital News Report
http://www.digitalnewsreport.org/survey/2015/executive-summary-and-key-...
State of the News Media 2015, Pew Research Center
http://www.journalism.org/2015/04/29/state-of-the-news-media-2015/
78% o...
20% of top news
sites and apps
(2015)
Mobile > Desktop
Time Spent Per Visit
State of the News Media 2015, Pew Research Cen...
http://observer.com/2015/09/the-homepage-is-officially-dead
http://www.theatlantic.com/business/archive/2014/05/what-the-d...
40% of people abandon
a website that takes
more than 3
seconds to load
https://blog.kissmetrics.com/loading-time
● How to build experiences that will be fast
and engaging while monetizing well?
● How to operate in a world where the
dis...
Accelerated Mobile Pages Project
Introducing ...
Demo: AMP on Google Search driving content discovery
In late February, Google launched AMP articles in “Top stories” in Go...
Goals for the AMP Project
Make
pages fast
Be easy to
implement
Embrace the
open web
Enable
monetization
AMP pages = web pages:
● AMP-HTML + CSS
● No one-off JavaScript
● Instead: custom elements
● Sandboxed amp-iframes can
con...
AMP pages = web pages:
● AMP-HTML + CSS
● No one-off JavaScript
● Instead: custom elements
● Sandboxed amp-iframes can
con...
What is AMP?
HTML5
(AMP-HTML)
JavaScript
(AMP JS Library)
CSS3
(Custom styling)
Caching
(AMP Cache)
What is AMP?
HTML5
(AMP-HTML)
JavaScript
(AMP JS Library)
CSS3
(Custom styling)
Caching
(AMP Cache)
Validation (AMP Valida...
AMP Publishing Flow
AMP-HTML
HTML
AMP Cache
CMS
Ad revenue and analytics
Publishers depicted are
examples for illustrative...
Three Sources of Speed
AMP-HTML
HTML
AMP Cache
CMS
Ad revenue and analytics
CachingAMP-HTML Format Prerendering
Link Tags
S P E E D S O U R C E # 1
AMP-HTML Format
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_b...
Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_b...
Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_b...
● Smart content prioritization
✓ Prefetching the elements
✓ No relayout
✓ Asynchronous load
● Responsive design baked in
✓...
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
10x4x
Less DataFaster
Data f...
S P E E D S O U R C E # 2
Caching
Local copy of assets
Without an AMP cache With an AMP cache
Web server Web server
Edge server
Edge server
Edge server
Edge...
S P E E D S O U R C E # 3
Prerendering
Header Logo
Responsive hero image
Headline
Article text
Image
in article
Some more text
Ad
Optimizations include:
● Only t...
Three Sources of Speed
AMP-HTML
HTML
AMP Cache
CMS
Ad revenue and analytics
Caching Prerendering
Link Tags
AMP-HTML Format
20 Minutes
20 Minutos
ABC
AS
BBC
Abendzeitung
ANSA
Bento
Berliner Morgenpost
BILD
Blasting News
Blogo.it
CCM Benchmark
Cha...
Apps & Platforms Supporting AMP
(Also A Growing List!)
Google Search Google News
Google News & Weather
7300+ 1900+PULL REQUESTSDEVELOPERS HAVE
ENGAGED
88RELEASES
Fantastic momentum and engagement for AMP Project
Source: githu...
Ads Content Access
FormatAnalytics
Focus Areas
Publishers
Vendors
Platforms
Collaborators
Analytics in AMP
● <amp-analytics> custom element
● Highly configurable analytics framework
■ Event triggers: Page visible...
Ads in AMP
● <amp-ad> custom element
● Integration with existing ad trafficking workflows
● Support for most common format...
Content Access in AMP
● <amp-access> custom element
● Support for metering and subscriber sign-in
● Client-side content hi...
Join the AMP initiative
1 EXPLORE
ampproject.org/docs to learn more and read documentation
github.com/ampproject/amphtml t...
Format Innovation in AMP
● Out of the box image carousel and lightbox
● Menu for site navigation (amp-sidebar)
● Tighter P...
Q & A
THANK YOU
@greenido
ido-green.appspot.com
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
Upcoming SlideShare
Loading in …5
×

Amp Overview #YGLF 2016

2,254 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
  • Be the first to comment

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

×