amp: above & beyond by adam greenberg
TRANSCRIPT
![Page 1: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/1.jpg)
#SMX #12A @adamgreenb
Tips and Insights for Success with Accelerated Mobile Pages
AMP: Above & Beyond
![Page 2: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/2.jpg)
#SMX #12A @adamgreenb
GlobalPartnerships,AMPProject
Adam Greenberg
![Page 3: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/3.jpg)
#SMX #12A @adamgreenb
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
9:34 AM
contentbazaar.co/20160314/pi-way
PageLoadsSlowly
ScrollingIsNonresponsive
ContentShiftsAround
The Problems: All Too Familiar…
![Page 4: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/4.jpg)
#SMX #12A @adamgreenb
Goals
Makepagesfast
Beeasytoimplement
Embracetheopenweb
Enablemonetization
![Page 5: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/5.jpg)
#SMX #12A @adamgreenb
Accelerated Mobile Pages Project
ampproject.org
![Page 6: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/6.jpg)
#SMX #12A @adamgreenb
![Page 7: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/7.jpg)
#SMX #12A @adamgreenb
AMPLibrary
![Page 8: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/8.jpg)
#SMX #12A @adamgreenb
![Page 9: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/9.jpg)
#SMX #12A @adamgreenb
Validatable Spec
Requirementsandrestrictions
ensuretherightbitsarearrangedinjusttherightway
Web Components Library
Toolboxofusefulfeatures:
Ads,Analytics,Carousels,Lightboxes,SocialEmbeds,VideoPlayers,etc.
What is AMP?
![Page 10: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/10.jpg)
#SMX #12A @adamgreenb
github.com/ampproject/amphtml
![Page 11: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/11.jpg)
#SMX #12A @adamgreenb
Fantastic momentum and engagement
DEVELOPERSHAVEENGAGED
PULLREQUESTS RELEASES
7700+ 2100+ 98
DataasofJune15,2016
![Page 12: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/12.jpg)
#SMX #12A @adamgreenb
Localcopyofassets
WithoutanAMPcache WithanAMPcache
Web server
WebserverEdgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Caching
![Page 13: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/13.jpg)
#SMX #12A @adamgreenb
Localcopyofassets
WebserverEdgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Caching
§ Fasterdelivery§ Regularizeservingspeedsfromdistributionplatformpointofview
§ AllAMPsmustbecacheablebyanythird-partyAMPcache
§ GoogleAMPCache– “Stale-while-revalidate”model– Servesfromcdn.ampproject.org– Freeforanyonetouse– Documentation:https://developers.google.com/amp/cache
![Page 14: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/14.jpg)
#SMX #12A @adamgreenb
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Average Mobile Site
![Page 15: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/15.jpg)
#SMX #12A @adamgreenb
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tuned Site
Average Mobile Site
![Page 16: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/16.jpg)
#SMX #12A @adamgreenb
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tuned Site
Average Mobile Site
AMP
![Page 17: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/17.jpg)
#SMX #12A @adamgreenb
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tuned Site
All AMPs
Average Mobile Site
![Page 18: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/18.jpg)
#SMX #12A @adamgreenb
0.7secMedianLoadTime
forAMP
AMP Format: Elevated Performance Baseline for All
Data furnished by Google.
22.0secMedianLoadTime
forNon-AMP
![Page 19: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/19.jpg)
#SMX #12A @adamgreenb
AMP at Google
GO
OG
LE
SEA
RCH
MARCH APRIL MAY JUNE
google.com (web)
news.google.com (web)
Google News & Weather for iOS & Android
Google Play Newsstand GO
OG
LE
NEW
S
JULY AUG
Search App for Android
Org. Search Dev Preview
Search App for iOS
![Page 20: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/20.jpg)
#SMX #12A @adamgreenb
Integration by non-Google canvases
![Page 21: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/21.jpg)
#SMX #12A @adamgreenb
AMP Adoption
DOCUMENTSININDEX DOMAINS
125M+ 640K+
![Page 22: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/22.jpg)
#SMX #12A @adamgreenb
Case Study: AMP Helping Washington Post Boost Retention
![Page 23: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/23.jpg)
#SMX #12A @adamgreenb
§ Usableinstatic(cached)form§ Lazy-loadfriendly
§ Thisismanythings:– Newsarticles
– Blogposts
– Recipes
Content types that are suited for AMP
– Productlistings– Travelguides
– Etc.etc.
![Page 24: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/24.jpg)
#SMX #12A @adamgreenb
AdsperformanceinAMP(Source:DoubleClickAdExchange,May2016)
§ 80%+ofthepublishersrealizinghigherviewabilityrates§ 90%+ofthepublishersdrivinggreaterengagementwithhigherCTRs§ MajorityofthepublishersseeinghighereCPMs(Impactandproportionofliftvariesbyregionandhowoptimizedthenon-AMPsitesare)
Ads in AMP <amp-ad width="300" height="250" type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad>
13 14 15 16 17 18 19
Type:Specifyadnetwork(choiceof40+)
data-*params:Configureadcall
![Page 25: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/25.jpg)
#SMX #12A @adamgreenb
§ amp-pixel:Forbasictrackingpixelbehavior§ amp-analytics:
– “Measureonce.Reporttomany.”
– ConfigurationviaJSON.Superflexible.
– Lookforvendorconfigurationsfrom~20vendors• Cutsoutguessworkyouneedtodo
• Ensurescollectionalignswithyourvendor
– Or,collectdatayourselfbysendingittoyourownservers
Analytics in AMP
![Page 26: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/26.jpg)
#SMX #12A @adamgreenb
§ amp-accesselement§ Supportformeteringandsubscribersign-in§ Client-sidecontenthiding§ Publisherusestheirownbusinesslogictomakeaccessdecision
§ Publishercantrack(count)accesses§ Integrationwithamp-analytics
Content Access in AMP
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
![Page 27: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/27.jpg)
#SMX #12A @adamgreenb
§ amp-experimentfora/btesting§ Supportfor:
– Browsingthroughproductsorimages
– Productlandingpages
– Exploringrelatedproducts
– Personalizingexperiencesfordifferentusers
eComm Components for AMP
$
![Page 28: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/28.jpg)
#SMX #12A @adamgreenb
AMP support in content management systems
§ WordPress– Self-hosting:Gettheplugin:https://wordpress.org/plugins/amp/– WordPress-hosted:Alreadyenabled–Add“/amp”toasingle-postpage– WordPressVIP:Startfromplugin,customize,thenlaunch
§ Squarespace– AllowingblogstopublishAMPs
§ Drupal– Gettheplugin:https://drupal.org/project/amp
![Page 29: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/29.jpg)
#SMX #12A @adamgreenb
AMPvalidationVerifyproperimplementation
accordingtoAMPspec
Let’s talk about validation again…
+ GooglemarkupvalidationUsuallyfeaturespecific
(e.g.TopStoriescarousel)
Checkdocumentationforotherplatformsforanyadditionalrequirementstohaveyourcontentappearthere
![Page 30: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/30.jpg)
#SMX #12A @adamgreenb
AMP-only validation tools
§ #development=1:BuiltintoAMPandshowsinyourbrowserconsole
§ AMPValidatorChromeextension
![Page 31: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/31.jpg)
#SMX #12A @adamgreenb
Google’s Structured Data Testing Tool
§ https://search.google.com/structured-data/testing-tool
![Page 32: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/32.jpg)
#SMX #12A @adamgreenb
Google Search Console – AMP Validation Report
§ https://www.google.com/webmasters/tools/home
§ Seeerrorsacrossyoursite§ Bucketedbycategory§ Reportsbothkindsoferrors:Structureddata(Googlerequired)+AMPvalidation(AMPrequired)
![Page 33: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/33.jpg)
#SMX #12A @adamgreenb
Google Search Console – AMP Impression & Click Report
§ Click,impression,CTR,andpositiondata§ SeeAMP-onlydatausingafilteredview
![Page 34: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/34.jpg)
#SMX #12A @adamgreenb
Your path to AMP
§ Explore– ampproject.org/docstolearnmoreandreaddocumentation– github.com/ampproject/amphtmltoconnectwiththedevelopmentteam
§ Developandtest– StartdevelopingAMPfilesandvalidatethem– LookintoCMSsupport
§ Launch:PointtoAMPfilesfromcanonicalarticlestomakethemdiscoverableandeligibletoappearincontentplatforms
![Page 35: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/35.jpg)
#SMX #12A @adamgreenb
§ Updatedtwiceperquarter§ Focusareas:Format,Analytics,Ads,andAccess
§ Summarizationofopen-sourceprojectactivityandsurroundingdiscussions
§ At-a-glancethemes,quarterlygoalsandstatus,2-quarteroutlook
AMP Roadmap ampproject.org/roadmap
![Page 36: AMP: Above & Beyond By Adam Greenberg](https://reader031.vdocuments.site/reader031/viewer/2022030213/589c2b531a28ab65248b5fdf/html5/thumbnails/36.jpg)
#SMX #12A @adamgreenb
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU! SEE YOU AT THE NEXT #SMX