amp - accelerated mobile pages
TRANSCRIPT
![Page 1: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/1.jpg)
AMPAccelerated Mobile Pages
June 2016
![Page 2: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/2.jpg)
Proprietary + Confidential
Ido Green@greenido
![Page 3: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/3.jpg)
With the shift to mobile, the way
we consume content has
changed
![Page 4: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/4.jpg)
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
![Page 5: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/5.jpg)
UI Today
“ For the first time this summer, more Google searches were completed on mobile devices than desktop computers
Amit Singhal, August 2015 ”
![Page 6: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/6.jpg)
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
![Page 7: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/7.jpg)
of people abandon a website that takes more than 3 seconds to load40%
Performance as a feature
![Page 8: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/8.jpg)
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
![Page 9: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/9.jpg)
We must something
Fast Easy to implement
Mobile Friendly
Embrace the open web
Gives strong Incentives
✔⚡
![Page 10: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/10.jpg)
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
⚡
![Page 11: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/11.jpg)
Introducing
Accelerated Mobile Pages
Web pages, today Accelerated Mobile Pages
![Page 12: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/12.jpg)
What is AMP?
HTML5(AMP HTML)
JavaScript(AMP JS)
CSS3(Custom styling)
Global Proxy Cache
(AMP Cache)
![Page 13: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/13.jpg)
How does it work?
AMP-HTML
Ad revenue and analytics
HTML
Speed up by the AMP Cache
CMS
![Page 14: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/14.jpg)
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
![Page 15: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/15.jpg)
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
![Page 16: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/16.jpg)
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
![Page 17: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/17.jpg)
Select publisher and platform partners on AMP initiative
![Page 18: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/18.jpg)
AMP-HTML on Google Search driving content discoveryGoogle will display articles created using AMP-HTML in new carousels on search…
![Page 19: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/19.jpg)
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.
![Page 20: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/20.jpg)
Beyond NewsWe will also create article carousels for topics related to soft news like
● “pasta recipes”● “visit barcelona”● “uk music
festivals”
Illustrative Mocks
![Page 21: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/21.jpg)
…..and ultimately across multiple Google surfaces.
Now On TapGoogle News Play NewsstandGoogle Now
Illustrative Mocks
![Page 22: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/22.jpg)
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
![Page 23: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/23.jpg)
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
![Page 24: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/24.jpg)
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
![Page 25: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/25.jpg)
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
![Page 26: AMP - Accelerated Mobile Pages](https://reader034.vdocuments.mx/reader034/viewer/2022051503/5877676a1a28ab4e4f8b7ff3/html5/thumbnails/26.jpg)
Thank You!
@greenidoido-green.appspot.com