accelerated mobile pages by john shehata
TRANSCRIPT
#SMX #13A @JShehata
Accelerated Mobile Pages John Shehata June 2016
1
#SMX #13A @JShehata 2
#SMX #13A @JShehata
#SMX #13A @JShehata
Stats 4
#SMX #13A @JShehata
Stats – Over 5M Search Results
March2016
§ 5,748AMPNews(2.9%)
§ 192,813Non-AMPNews
§ 291DomainsuseAMP*(3%)
§ 9,343DomainswithnoAMP
*Appearsatleastonce
**OnlySERPswithNews/AMPClusters
• June2016• 63,543AMPNews(25.5%)• 248,815Non-AMPNews
• 7.878DomainsuseAMP*(11.6%)• 67.911DomainswithnoAMP
Source: SearchMetrics.com
#SMX #13A @JShehata
Stats – 150M Impressions
ForastrongNewssite,AMPisabout
§ 5%oftotaltraffic
§ 3%oftotalimpressions
§ +2%betterCTR
§ +5.6RankingPositionbetter
§ 9%oftotalmobiletraffic
§ 6%oftotalmobileimpressions
§ +1.35%betterAvg.CTRthanAvg.MobileCTR
§ +4.5betterAvg.RankingPositionbetterthanAvg.MobileRankingPosition
#SMX #13A @JShehata
Stats -
Forthesamequeries,AMPvsNON-AMP
§ AMPdrives26%ofthetraffic
§ AMPhas22%impressionrate
#SMX #13A @JShehata
Stats – Oscars – 150 Queries
Forthesameevent(Oscars),queries,time.
AMPsitevs.Non-AMPSite
§ AMPQueriesgot15Xvisits
§ AMPQueriesgot7Ximpressions
§ AMPQueriesgot2Xhigheravg.rankings
#SMX #13A @JShehata
AMP Validation 9
#SMX #13A @JShehata
Validation
AlwaystestonAMPpages
https://www.google.com/amp/[URL]
https://cdn.ampproject.org/c/[URL]
#SMX #13A @JShehata
Validation Tools
[AMP-URL]#development=1
ChromeDevToolsConsole
AlwaystestonGoogleAMPCDN
AMPProjectChromeExtensionhttps://chrome.google.com/webstore/detail/amp-
validator/nmoffdblmcmgeicmolmhobpoocbbmknc
http://technicalseo.com/seo-tools/amp/
https://maxxeight.com/tools/amp-html/
https://ampbench.appspot.com/validate?url=[AMP-URL]
#SMX #13A @JShehata
Validation
AMPPagesServedfromgoogleCDN
§ https://www.google.com/amp/[URL]
§ https://cdn.ampproject.org/c/[URL]
Validationtoolsdoesn'tcountforcontenttypevalidationforassetsloadinginthepage
§ Example:wedidn'texplicitlysetthecontenttypeintheheaderforthefontandgot404
§ Thevalidationtoolsdidn'tpickonthat,browsersarewaytolerant
weonlyfoundthiswhenwehackedtheAMPURLwithourownURLandfoundcustomfontsarenotloading
#SMX #13A @JShehata
Slack bot
SlackbottorelaymessagesfromtheCMStoEngineeringwhenanewly-publishedpagedoesnotvalidate
#SMX #13A @JShehata
AMP: Opportunities & Challenges 14
#SMX #13A @JShehata
WordPress Plugin
https://wordpress.org/plugins/amp/
• StructuredDataand[shortcodes]makesiteasiertoconvertHTMLtoAMPHTML• minimizeddevelopmenttime,fromweekstohours• ShortCodesforembeds[images,youtube,vimeo,soundcloud,…]
#SMX #13A @JShehata
AMP Documentation
• Comprehensivebutsometimeshardtofindwhat’scurrentandwhat’soutdated-minor
• Practicalexampleshavemoreinformation
#SMX #13A @JShehata
AMP Rich Card
#SMX #13A @JShehata
AMP FONTS
• WehostourfontsonTypekit,whichisthirdpartyJSthatisn’tsupportedinAMP
• sowe’vehadtoself-hostfontsforAMP.• Thatwasextraworkanditalsopresentedlegalissuesas
wehadtogetspecialpermissiontouseourfontsinthisway.
#SMX #13A @JShehata
AMP Ads
thebiggestamountofdevaroundadsinsertingtheadsatXpixels-wearehardcodingthesizeoftheadAdsmustbefixedsizessoweneedtoknowthesizeoftheadbeforehandlingsameforFBinstantarticles
19
#SMX #13A @JShehata
Design
Forpublishersthatdefinethemselvesasvisualbrandsandaregoingforaveryspecificlookandfeel,AMPpagesdon’tallowforenoughdesigncontrol.
20
#SMX #13A @JShehata
Other Challenges
• AMPPaywallintegration:googlenews,atleast3pagesforgoogleusersbeforetheyhitthepaywall
• Itishardertotestvstestingonalocalenvironment• wehavetopushlivetotestoutchangesongoogleCDN
becausesomeissuesarenotdiscoveredonalocalenvironmentandbytheampvalidator
#SMX #13A @JShehata
More Challenges
• FeatureEditorialStories&Otherinteractivecontentnotsupportedyethttps://amphtml.wordpress.com/2016/02/25/rolling-out-the-red-carpet-for-interactives-in-amp/amp/
• AMPAnalyticsIntegration(GA,Omniture,etc)provideslimiteddata
• Skepticism!!
#SMX #13A @JShehata
Overall
DevelopersloveAMP-HTMLHavingeachcontentelementasaspecificwebcomponentSinglehtmlelementGreatfornextgenerationofdevelopersSimilartoapplenews...
23
#SMX #13A @JShehata 24