tips and insights for success with accelerated mobile pages by rudy galfi
TRANSCRIPT
#SMX #13A @RudyGalfi
Tips and Insights for Success with Accelerated Mobile Pages
AMP: Above & Beyond
#SMX #13A @RudyGalfi
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
PageisSlow-Loading
ScrollingisNonresponsive
ContentShiftsAround
The Problems: All Too Familiar…
#SMX #13A @RudyGalfi
Validatable Spec
Requirementsandrestrictions
ensuretherightbitsarearrangedinjusttherightway
Web Components Library
Toolboxofusefulfeatures:
Ads,Analytics,Carousels,Lightboxes,SocialEmbeds,VideoPlayers,etc.
What is AMP?
#SMX #13A @RudyGalfi
Fantastic momentum and engagement
DEVELOPERSHAVEENGAGED
PULLREQUESTS RELEASES
7700+ 2100+ 98
DataasofJune15,2016
#SMX #13A @RudyGalfi
AMPs are just web pages!
HTML5(AMP-HTML)
JavaScript(AMPJSLibrary)
CSS3(Customstyling)
Caching(AMPCache)
#SMX #13A @RudyGalfi
Localcopyofassets
WithoutanAMPcache WithanAMPcache
Web server
WebserverEdgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Edgeserver
Caching
#SMX #13A @RudyGalfi
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 #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Average Mobile Site
#SMX #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tuned Site
Average Mobile Site
#SMX #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tuned Site
Average Mobile Site
AMP
#SMX #13A @RudyGalfi
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 #13A @RudyGalfi
0.7secMedianLoadTime
AMP Format: Elevated Performance Baseline for All
Data furnished by Google.
#SMX #13A @RudyGalfi
0.7secMedianLoadTime
forAMP
AMP Format: Elevated Performance Baseline for All
Data furnished by Google.
22.0secMedianLoadTime
forNon-AMP
#SMX #13A @RudyGalfi
AMP at Google
GO
OG
LE
SEA
RCH
MARCH APRIL MAY JUNE
google.com (web)
Google Search App for iOS
Google Search App for Android
news.google.com (web)
Google News & Weather for iOS
Google News & Weather for Android GO
OG
LE
NEW
S
#SMX #13A @RudyGalfi
§ Usableinstatic(cached)form§ Lazy-loadfriendly
§ Thisismanythings:– Newsarticles
– Blogposts
– Recipes
Content types that are suited for AMP
– Productlistings– Travelguides
– Etc.etc.
#SMX #13A @RudyGalfi
Publishing Flow
AMP Cache
CONTENT PUBLISHER
Ad revenue and analytics data
Publishersdepictedareexamplesforillustrativepurposes
Platformsdepictedareexamplesforillustrativepurposes
Link Tags
AMP-HTML
HTML CACHE PLATFORMS
#SMX #13A @RudyGalfi
How to make your AMPs discoverable
CONTENT PUBLISHER
Link Tags
AMP-HTML
HTML
CaseA:PairedAMP
<link rel="canonical” href="http://example.publisher.com/article.html" />
<link rel=”amphtml” href="http://example.publisher.com/article.amp.html" />
Canonicaldocumentsshouldalreadybelinkingtothemselves!
<link rel=”canonical” href="http://example.publisher.com/article.html" />
CONTENT PUBLISHER
AMP-HTML
<link rel=”canonical” href="http://example.publisher.com/article.amp.html" />
CaseB:StandaloneAMP Justcallsitselfthecanonical.
#SMX #13A @RudyGalfi
Ads in AMP
§ amp-adelement§ Integrationwithexistingadtraffickingworkflows§ Supportformostcommonformats:standardbannerads,HTML5ads,nativeads,adsthatresizeonuserinteraction
§ Norestrictionsonaddensity§ Viewabilitysupport§ Integrationwithdozensof3rdpartyproviders:demandsources,sponsoredcontent,datamanagementplatforms
#SMX #13A @RudyGalfi
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
AdsperformanceinAMP(Source:DoubleClickAdExchange,May2016)
§ 80%+ofthepublishersrealizinghigherviewabilityrates§ 90%+ofthepublishersdrivinggreaterengagementwithhigherCTRs§ MajorityofthepublishersseeinghighereCPMs(Impactandproportionofliftvariesbyregionandhowoptimizedthenon-AMPsitesare)
#SMX #13A @RudyGalfi
Analytics in AMP
§ amp-pixel:Forbasictrackingpixelbehavior§ amp-analytics:
– “Measureonce.Reporttomany.”
– ConfigurationviaJSON.Superflexible.
– Lookforvendorconfigurationsfrom~20vendors• Cutsoutguessworkyouneedtodo
• Ensurescollectionalignswithyourvendor
– Or,collectdatayourselfbysendingittoyourownservers
#SMX #13A @RudyGalfi
Analytics in AMP <amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl} &title=${title}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
13 14 15 16 17
18 19 20 21 22 23 24 25 26 27 28 29 30
Substitutionvariables•Namedexpressiontocollectparticularkindsofdata•Examples:clientID,timestamp,screendimensions•Candefineyourown
Triggers•Namedexpressiontocollectparticularkindsofdata•Examples:scroll,click,timer
#SMX #13A @RudyGalfi
Content Access in AMP
§ amp-accesselement§ Supportformeteringandsubscribersign-in§ Client-sidecontenthiding§ Publisherusestheirownbusinesslogictomakeaccessdecision
§ Publishercantrack(count)accesses§ Integrationwithamp-analytics
#SMX #13A @RudyGalfi
§ ExploreAMP’swebcomponentslibrary– Sidebarfornavigationmenus
– Imagecarousels
– Lightboxes– Videoplayers
– Socialembeds
§ Learnaboutbehaviorsandfeaturesthroughusecase–driveninteractiveexamples
Learn through examples with “AMP By Example” AMPByExample.com
#SMX #13A @RudyGalfi
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
§ Drupal– Gettheplugin:https://drupal.org/project/amp
#SMX #13A @RudyGalfi
Let’s talk about validation again…
AMPvalidationVerifyproperimplementation
accordingtoAMPspec
+ GooglemarkupvalidationUsuallyfeaturespecific
(e.g.TopStoriescarousel)
Checkdocumentationforotherplatformsforanyadditionalrequirementstohaveyourcontentappearthere
#SMX #13A @RudyGalfi
AMP-only validation requirements
§ ThemainAMPspecification:https://www.ampproject.org/docs/reference/spec.html
§ Individualcomponentsmayhaveadditionalvalidationrequirements.Besuretocheckthedocumentation.
#SMX #13A @RudyGalfi
AMP-only validation tools
§ #development=1:BuiltintoAMPandshowsinyourbrowserconsole
§ AMPValidatorChromeextension
#SMX #13A @RudyGalfi
Structured data
§ TopStoriesarticles:https://developers.google.com/search/docs/data-types/articles
§ Generalguidelines:https://developers.google.com/search/docs/guides/mark-up-content
#SMX #13A @RudyGalfi
Google’s Structured Data Testing Tool
§ https://search.google.com/structured-data/testing-tool
#SMX #13A @RudyGalfi
Google Search Console – AMP Validation Report
§ https://www.google.com/webmasters/tools/home
§ Seeerrorsacrossyoursite§ Bucketedbycategory§ Reportsbothkindsoferrors:Structureddata(Googlerequired)+AMPvalidation(AMPrequired)
#SMX #13A @RudyGalfi
Google Search Console – AMP Impression & Click Report
§ Click,impression,CTR,andpositiondata§ SeeAMP-onlydatausingafilteredview
#SMX #13A @RudyGalfi
Your path to AMP
§ Explore– ampproject.org/docstolearnmoreandreaddocumentation– github.com/ampproject/amphtmltoconnectwiththedevelopmentteam
§ Developandtest– StartdevelopingAMPfilesandvalidatethem– LookintoCMSsupport
§ Launch:PointtoAMPfilesfromcanonicalarticlestomakethemdiscoverableandeligibletoappearincontentplatforms
#SMX #13A @RudyGalfi
§ Updatedtwiceperquarter§ Focusareas:Format,Analytics,Ads,andAccess
§ Summarizationofopen-sourceprojectactivityandsurroundingdiscussions
§ At-a-glancethemes,quarterlygoalsandstatus,2-quarteroutlook
AMP Roadmap ampproject.org/roadmap