Embed Size (px)
Citation preview
AMP
@greenido
ido-green.appspot.com
With the shift to mobile, the way weconsume 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 adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
9:34 AM
contentbazaar.co/20160314/pi-way
SlowLoading
Non-ResponsiveContent
ContentShifting
It sometimes seems likewe’ve just given in.
Data from: Reuters Institute - Digital News Reporthttp://www.digitalnewsreport.org/survey/2015/executive-summary-and-key-findings-2015/
2015201420132012
Smartphone news use
60%
40%
20%
0%GermanyJapan France UK US Denmark
NA
State of the News Media 2015, Pew Research Centerhttp://www.journalism.org/2015/04/29/state-of-the-news-media-2015/
78% of top news sites and apps(2015)
Mobile > DesktopVisitors
20% of top news sites and apps(2015)
Mobile > DesktopTime Spent Per Visit
State of the News Media 2015, Pew Research Centerhttp://www.journalism.org/2015/04/29/state-of-the-news-media-2015/
http://observer.com/2015/09/the-homepage-is-officially-deadhttp://www.theatlantic.com/business/archive/2014/05/what-the-death-the-homepage-means-for-news/370997http://www.forbes.com/sites/sachinkamdar/2015/12/27/is-the-homepage-dead/#5267c9e35bf8
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 discovery of content is increasingly happening off-site?
Accelerated Mobile Pages Project
Introducing ...
Demo: AMP on Google Search driving content discoveryIn late February, Google launched AMP articles in “Top stories” in Google Search
Try it now ongoogle.com(in your phone’s browser)
Goals for the AMP Project
Makepages 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
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 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”
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 Validator)
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
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_back.JPG
Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
AMP
Hand-Tuned Site
Average Mobile Site
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
All AMPs
● 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
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
10x4xLess DataFaster
Data furnished by Google.
01010101100100111001010010100110
AMP Format: Elevated Performance Baseline for All
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 serverEdge server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
Caching Brings Content Physically Closer to Users
S P E E D S O U R C E # 3
Prerendering
Header Logo
Responsive hero image
Headline
Article text Imagein 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
Three Sources of Speed
AMP-HTML
HTML
AMP Cache
CMS
Ad revenue and analytics
Caching Prerendering
Link Tags
AMP-HTML Format
20 Minutes20 MinutosABCASBBCAbendzeitungANSABentoBerliner MorgenpostBILDBlasting NewsBlogo.itCCM BenchmarkCharente Libre.frConde NastCorriere della SeraDailyMail.com / MailOnlineDaily StarThe WeekEl ConfidencialEl EspañolEl MundoEl Mundo DeportivoEL PAÍSEl PeriódicoEl EconomistaEuropa PressEvening StandardExpansión
Daily ExpressFrankfurter Allgemeine ZeitungFOCUS OnlineFrance 24FrancetvinfoGolem.deGruner + JahrGuardian News & MediaHNA.deIBT UKIl Fatto QuotidianoIlSole24OreIlSussidiario.netIppen Digital PlattformkickerLa République des PyrénéesLa StampaLa VanguardiaLagardère ActiveLe ParisienLes EchosL'ExpressMail.Ru GroupMarcaMeduzamerkur.deMetro UKMetronewsOK!Ouest France
PromiflashPúblicoRepubblicaRP OnlineRTRTLRussmedia DigitalSorrisi e CanzoniSPIEGEL ONLINESportSPORT1Stuttgarter ZeitungSüddeutsche ZeitungSudOuest.frt-online.detagesschauTF1The Financial TimesThe IndependentTrinity Mirrortz.deVocentoWelt.deZEIT ONLINEВести.RuИнформационное агентство России ТАССЛента.руМосковский КомсомолецТелекомпания НТВ
Europe
AsiaAmeba.comAsahi ShimbunBintang.comBLOGOSBloterBola.comOneindiaBusiness StandardCINEMATODAYDigital ChosunEiga.comFirstPostHankyung.comIndiatoday.inJoongAng IlboKapanLagi NetworkKASKUS
Kompas.comLiputan6.comMaekyung.comMainichi ShimbunMynavi NewsNDTVNewstapaNikkan SportsRepublika.co.idResponseSankei NewsSANSPOSlow NewsTHE PAGETempo.coEconomic TimesUzone.idYonhap NewsZAKZAK
North AmericaABC NewsThe AtlanticBusiness InsiderBuzzfeedCNNDigital TrendsE! NewsEntrepreneurForbesFusionHearst
HeavyThe Huffington PostIBT MediaThe Inquisitr NewsLos Angeles TimesMarketWatchMicMSNBCNew York Daily NewsThe Next WebThe New York Post
The New York TimesPOPSUGAR.SB NationtheScoreTime Inc.Tribune MediaUSA TodayThe VergeVoxWall Street JournalWashington Post
Latin AmericaAgência BrasilBasket4us.comCybercookDiário 24 HorasEBCEconomiahoy.mxEl UniversalÉpocaESPN BrasilEstadãoExame.comExcelsiorFolha de S. PauloGalileu
GloboGrupo ExpansionGrupo ImagenGrupo MediosGrupo RBSJornal ExtraM de MulherMaisEquilibrioO GloboPortal Catraca LivreR7.comRadioagência NacionalTecmundoTelevisa
TerraTerra MexicoTV AztecaUOLVanguardiaVeja São PauloVeja.comVila Mulher
Publishers Supporting AMP(A Growing List!)
Apps & Platforms Supporting AMP(Also A Growing List!)
Google Search Google NewsGoogle News & Weather
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
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, 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)
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
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
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 & TESTStart developing AMP files and validate them
3 LAUNCHPoint to AMP files from canonical articles to make them discoverableand eligible to appear in content platforms
1
2
3
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)
Q & A
THANK YOU
@greenidoido-green.appspot.com
![Counterfeiting & Piracy – A Global · PDF fileCounterfeiting & Piracy – A Global Overview ... – cooperation with customs authorities. ... Global Overview - INDON.ppt [Read-Only]](https://img.pdfslide.us/doc/110x75/5ab67f0a7f8b9a2f438da864/counterfeiting-piracy-a-global-piracy-a-global-overview-cooperation.jpg)
