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.

1. AMP

2. @greenido
ido-green.appspot.com

3. With the shift to mobile, the way we
consume content has changed

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. It sometimes seems like
we’ve just given in.

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. 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. 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. 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. 40% of people abandon
a website that takes
more than 3
seconds to load
https://blog.kissmetrics.com/loading-time

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. Accelerated Mobile Pages Project
Introducing ...

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)

15. Goals for the AMP Project
Make
pages fast
Be easy to
implement
Embrace the
open web
Enable
monetization

18. 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

19. 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”

20. What is AMP?
HTML5
(AMP-HTML)
JavaScript
(AMP JS Library)
CSS3
(Custom styling)
Caching
(AMP Cache)

21. What is AMP?
HTML5
(AMP-HTML)
JavaScript
(AMP JS Library)
CSS3
(Custom styling)
Caching
(AMP Cache)
Validation (AMP Validator)

22. 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

23. Three Sources of Speed
AMP-HTML
HTML
AMP Cache
CMS
Ad revenue and analytics
CachingAMP-HTML Format Prerendering
Link Tags

24. S P E E D S O U R C E # 1
AMP-HTML Format

25. Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG

26. Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG

27. Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
AMP

28. Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
All AMPs

29. ● 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

30. 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

31. S P E E D S O U R C E # 2
Caching

32. 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

33. S P E E D S O U R C E # 3
Prerendering

34. 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

35. Three Sources of Speed
AMP-HTML
HTML
AMP Cache
CMS
Ad revenue and analytics
Caching Prerendering
Link Tags
AMP-HTML Format

36. 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!)

37. Apps & Platforms Supporting AMP
(Also A Growing List!)
Google Search Google News
Google News & Weather

38. 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

39. Ads Content Access
FormatAnalytics
Focus Areas
Publishers
Vendors
Platforms
Collaborators

40. 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)

41. 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

42. 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

43. 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

44. 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)

45. Q & A

46. THANK YOU
@greenido
ido-green.appspot.com