amp: above & beyond by adam greenberg
Post on 09-Feb-2017
7.888 Views
Preview:
TRANSCRIPT
#SMX #12A @adamgreenb
Tips and Insights for Success with Accelerated Mobile Pages
AMP: Above & Beyond
#SMX #12A @adamgreenb
GlobalPartnerships,AMPProject
Adam Greenberg
#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…
#SMX #12A @adamgreenb
Goals
Makepagesfast
Beeasytoimplement
Embracetheopenweb
Enablemonetization
#SMX #12A @adamgreenb
Accelerated Mobile Pages Project
ampproject.org
#SMX #12A @adamgreenb
#SMX #12A @adamgreenb
AMPLibrary
#SMX #12A @adamgreenb
#SMX #12A @adamgreenb
Validatable Spec
Requirementsandrestrictions
ensuretherightbitsarearrangedinjusttherightway
Web Components Library
Toolboxofusefulfeatures:
Ads,Analytics,Carousels,Lightboxes,SocialEmbeds,VideoPlayers,etc.
What is AMP?
#SMX #12A @adamgreenb
github.com/ampproject/amphtml
#SMX #12A @adamgreenb
Fantastic momentum and engagement
DEVELOPERSHAVEENGAGED
PULLREQUESTS RELEASES
7700+ 2100+ 98
DataasofJune15,2016
#SMX #12A @adamgreenb
Localcopyofassets
WithoutanAMPcache WithanAMPcache
Web server
WebserverEdgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Caching
#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
#SMX #12A @adamgreenb
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Average Mobile Site
#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
#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
#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
#SMX #12A @adamgreenb
0.7secMedianLoadTime
forAMP
AMP Format: Elevated Performance Baseline for All
Data furnished by Google.
22.0secMedianLoadTime
forNon-AMP
#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
#SMX #12A @adamgreenb
Integration by non-Google canvases
#SMX #12A @adamgreenb
AMP Adoption
DOCUMENTSININDEX DOMAINS
125M+ 640K+
#SMX #12A @adamgreenb
Case Study: AMP Helping Washington Post Boost Retention
#SMX #12A @adamgreenb
§ Usableinstatic(cached)form§ Lazy-loadfriendly
§ Thisismanythings:– Newsarticles
– Blogposts
– Recipes
Content types that are suited for AMP
– Productlistings– Travelguides
– Etc.etc.
#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
#SMX #12A @adamgreenb
§ amp-pixel:Forbasictrackingpixelbehavior§ amp-analytics:
– “Measureonce.Reporttomany.”
– ConfigurationviaJSON.Superflexible.
– Lookforvendorconfigurationsfrom~20vendors• Cutsoutguessworkyouneedtodo
• Ensurescollectionalignswithyourvendor
– Or,collectdatayourselfbysendingittoyourownservers
Analytics in AMP
#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.
#SMX #12A @adamgreenb
§ amp-experimentfora/btesting§ Supportfor:
– Browsingthroughproductsorimages
– Productlandingpages
– Exploringrelatedproducts
– Personalizingexperiencesfordifferentusers
eComm Components for AMP
$
#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
#SMX #12A @adamgreenb
AMPvalidationVerifyproperimplementation
accordingtoAMPspec
Let’s talk about validation again…
+ GooglemarkupvalidationUsuallyfeaturespecific
(e.g.TopStoriescarousel)
Checkdocumentationforotherplatformsforanyadditionalrequirementstohaveyourcontentappearthere
#SMX #12A @adamgreenb
AMP-only validation tools
§ #development=1:BuiltintoAMPandshowsinyourbrowserconsole
§ AMPValidatorChromeextension
#SMX #12A @adamgreenb
Google’s Structured Data Testing Tool
§ https://search.google.com/structured-data/testing-tool
#SMX #12A @adamgreenb
Google Search Console – AMP Validation Report
§ https://www.google.com/webmasters/tools/home
§ Seeerrorsacrossyoursite§ Bucketedbycategory§ Reportsbothkindsoferrors:Structureddata(Googlerequired)+AMPvalidation(AMPrequired)
#SMX #12A @adamgreenb
Google Search Console – AMP Impression & Click Report
§ Click,impression,CTR,andpositiondata§ SeeAMP-onlydatausingafilteredview
#SMX #12A @adamgreenb
Your path to AMP
§ Explore– ampproject.org/docstolearnmoreandreaddocumentation– github.com/ampproject/amphtmltoconnectwiththedevelopmentteam
§ Developandtest– StartdevelopingAMPfilesandvalidatethem– LookintoCMSsupport
§ Launch:PointtoAMPfilesfromcanonicalarticlestomakethemdiscoverableandeligibletoappearincontentplatforms
#SMX #12A @adamgreenb
§ Updatedtwiceperquarter§ Focusareas:Format,Analytics,Ads,andAccess
§ Summarizationofopen-sourceprojectactivityandsurroundingdiscussions
§ At-a-glancethemes,quarterlygoalsandstatus,2-quarteroutlook
AMP Roadmap ampproject.org/roadmap
#SMX #12A @adamgreenb
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU! SEE YOU AT THE NEXT #SMX
top related