AMPAccelerated Mobile Pages
June 2016
Proprietary + Confidential
Ido Green@greenido
With the shift to mobile, the way
we consume content has
changed
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.9201.8
UI Today
“ For the first time this summer, more Google searches were completed on mobile devices than desktop computers
Amit Singhal, August 2015 ”
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
of people abandon a website that takes more than 3 seconds to load40%
Performance as a feature
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 challengesWith a common objective: an open ecosystem of knowledge
We must something
Fast Easy to implement
Mobile Friendly
Embrace the open web
Gives strong Incentives
✔⚡
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
⚡
Introducing
Accelerated Mobile Pages
Web pages, today Accelerated Mobile Pages
What is AMP?
HTML5(AMP HTML)
JavaScript(AMP JS)
CSS3(Custom styling)
Global Proxy Cache
(AMP Cache)
How does it work?
AMP-HTML
Ad revenue and analytics
HTML
Speed up by the AMP Cache
CMS
Your website...
Web server
Local copy of your assets
Without the AMP cache With the AMP cache
Web serverEdge server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
How AMP works
Open-source framework and common set of building blocks replacing Javascript
HTML CSS
COMPONENT CALLS
Embe
ds TwitterInstagramMapsAdsmore...
Accelerated Mobile Pages
Cached Runtime Libraries
Separate companion file referenced via link tag on a site’s current article page
Wid
getsAds load in safe iFrames
secondarily to content - Needs to be HTTPS hosted
galleriespollslightboxesforms
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
Select publisher and platform partners on AMP initiative
AMP-HTML on Google Search driving content discoveryGoogle will display articles created using AMP-HTML in new carousels on search…
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.
Beyond NewsWe will also create article carousels for topics related to soft news like
● “pasta recipes”● “visit barcelona”● “uk music
festivals”
Illustrative Mocks
…..and ultimately across multiple Google surfaces.
Now On TapGoogle News Play NewsstandGoogle Now
Illustrative Mocks
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
Join the Amp Initiative1 EXPLORE
Review the technical documentation and join the community on GitHub and StackOverflow
2 DEVELOP & TESTStart 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 GUIDELINESReview 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
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
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
Thank You!
@greenidoido-green.appspot.com