The document discusses the challenges faced by publishers in the mobile web landscape, emphasizing the need for faster and more engaging web pages. It introduces Accelerated Mobile Pages (AMP) as a solution to improve mobile web performance, highlighting features like simplified design, responsive layout, and instant loading through caching. The document also outlines steps for publishers to adopt AMP and its potential benefits for content discovery on Google.

1. AMP
Accelerated Mobile Pages
June 2016

2. Proprietary + Confidential
Ido Green
@greenido

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

4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engagement is low - Let’s fix it!
Top 1000 mobile apps vs. top 1000 mobile web properties
10.9
Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9
201.8

5. UI Today
“
For the first time this
summer, more Google
searches were completed
on mobile devices than
desktop computers
Amit Singhal, August 2015
”

6. Proprietary + Confidential
What is happening?
● Mobile is our main focus
● Mobile web suffers from slow, cluttered sites
● User experience is not good
● Mobile Apps create silos and reduce diversity
● Many ways to access mobile content
Publisher appsSocial, aggregators
Targeted queries Serendipitous discovery
Search
Habitual use

7. of people abandon a website that
takes more than 3 seconds to load40%
Performance as a feature

8. 2 Poor consumer perceptions of mobile web experiences
1 Evolving ecosystems of closed distribution models
3 Monetization at the content level is hard
4 Technology updates are outpacing development cycles
5 Ad Blockers are a challenge to the industry
Publishers are faced with new challenges
With a common objective: an open ecosystem of knowledge

9. We must something
Fast Easy to
implement
Mobile
Friendly
Embrace the
open web
Gives strong
Incentives
✔⚡

10. How to make fast web pages
● Simplify the pages - Less Javascript
● Optimize the bandwidth
○ Get the best content for your device (image resolution etc.)
○ Parallelize the loading (asynchronous load)
● Cache the pages
○ Use Content Delivery Servers to store a local copy of the pages
⚡

11. Introducing
Accelerated Mobile Pages
Web pages, today Accelerated Mobile Pages

12. What is AMP?
HTML5
(AMP HTML)
JavaScript
(AMP JS)
CSS3
(Custom styling)
Global Proxy
Cache
(AMP Cache)

13. How does it work?
AMP-HTML
Ad revenue and analytics
HTML
Speed up by the AMP
Cache
CMS

14. Yourwebsite...
Web server
Local copy of your assets
Without the AMP cache With the AMP cache
Web server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server

15. How AMP works
Open-source framework
and common set of
building blocks replacing
Javascript
HTML CSS
COMPONENT CALLS
Embeds
Twitter
Instagram
Maps
Ads
more...
Accelerated Mobile Pages
Cached Runtime Libraries
Separate companion file
referenced via link tag on a
site’s current article page
Widgets
Ads load in safe iFrames
secondarily to content -
Needs to be HTTPS hosted
galleries
polls
lightboxes
forms

16. AMP Features
● Smart content prioritization
○ Prefetching the elements
○ No relayout
○ Asynchronous load
● Responsive design
○ 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
Page load time
Synchronous load
Page load time
Asynchronous load

17. Select publisher and platform partners on AMP initiative

18. AMP-HTML on
Google Search
driving content
discovery
Google will display articles
created using AMP-HTML in
new carousels on search…

19. AMP-HTML on Google
Search driving content
discovery
Google has been displaying
sports articles created using
AMP-HTML in the Top Stories
carousel on search.

20. Beyond News
We will also create
article carousels for
topics related to soft
news like
● “pasta recipes”
● “visit barcelona”
● “uk music
festivals”
Illustrative Mocks

21. …..and ultimately across multiple Google surfaces.
Now On TapGoogle News Play NewsstandGoogle Now
Illustrative Mocks

22. Reading Experience using AMP-
HTML
● Articles are cached and load
instantly
● Publishers have control over visual
design and business model
● Supports existing ad formats
● Deepen engagement with related
articles

23. Join the Amp Initiative
1 EXPLORE
Review the technical documentation and join the community on GitHub and StackOverflow
2 DEVELOP & TEST
Start developing your AMP files* and validate them. You can use ampbyexample.com for reference
5 LAUNCH
Point to AMP files from your canonical articles to make them publicly crawlable
3 FOLLOW THE GOOGLE SEARCH GUIDELINES
Review the Google Search requirements and check the AMP Search Console Report
4 RESEARCH ADS & ANALYTICS
Review your options for ads and analytics
If you use a market CMS
platform, please visit
ampproject.org/who

24. For more info on AMP, please visit:
• Get help in the Webmaster Central forums
• Learn more about AMP in Google Search
• Read about Structured Data for Top Stories
• Check for errors in the Search Console
Using AMP with GoogleCreating Native AMPs
• AMP Project Website and getting started guide
• Learn about extensions, ads , and analytics
• Get help on StackOverflow (how to ask
questions)
• Videos: NewsLab Hangouts, AMP with Paul
Bakaus & AMP Anatomy with Malte Ubl

25. Use
Google
Analytics
or ads?
Support on Ads and Analytics
Request support
from your vendor
GA
Neither
Yes
No
Ask your vendor to
support AMP
Contact your
support rep or the
DFP Help Center
Does the
vendor
support
AMP?
Check the latest on
ampproject.org/who
Not Sure
Contact your
premium support
rep or the GA Help
Center
Visit GitHub
• Ads
• Analytics
Ads

26. Thank You!
@greenido
ido-green.appspot.com