Tips and Insights for Success with Accelerated Mobile Pages By Rudy Galfi

#SMX #13A @RudyGalfi

Tips and Insights for Success with Accelerated Mobile Pages

AMP: Above & Beyond


ProductManager,AMPProject

Rudy Galfi


9:34 AM

contentbazaar.co/20160314/pi-way

9:34 AM


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


PageisSlow-Loading

ScrollingisNonresponsive

ContentShiftsAround

The Problems: All Too Familiar…


Goals

Makepagesfast

Beeasytoimplement

Embracetheopenweb

Enablemonetization


Accelerated Mobile Pages Project

ampproject.org



AMPLibrary


Validatable Spec

Requirementsandrestrictions

ensuretherightbitsarearrangedinjusttherightway

Web Components Library

Toolboxofusefulfeatures:

Ads,Analytics,Carousels,Lightboxes,SocialEmbeds,VideoPlayers,etc.

What is AMP?


github.com/ampproject/amphtml


Fantastic momentum and engagement

DEVELOPERSHAVEENGAGED

PULLREQUESTS RELEASES

7700+ 2100+ 98

DataasofJune15,2016


AMPs are just web pages!

HTML5(AMP-HTML)

JavaScript(AMPJSLibrary)

CSS3(Customstyling)

Caching(AMPCache)


Localcopyofassets

WithoutanAMPcache WithanAMPcache

Web server

WebserverEdgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Caching


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


Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG

Average Mobile Site



Hand-Tuned Site

Average Mobile Site



Hand-Tuned Site

Average Mobile Site

AMP



Hand-Tuned Site

All AMPs

Average Mobile Site


0.7secMedianLoadTime

AMP Format: Elevated Performance Baseline for All

Data furnished by Google.



forAMP

AMP Format: Elevated Performance Baseline for All

Data furnished by Google.


forNon-AMP


Search News

AMP at Google


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


AMP Adoption

DOCUMENTSININDEX DOMAINS

125M+ 640K+


§ Usableinstatic(cached)form§ Lazy-loadfriendly

§ Thisismanythings:–  Newsarticles

–  Blogposts

–  Recipes

Content types that are suited for AMP

–  Productlistings–  Travelguides

–  Etc.etc.


Publishing Flow

AMP Cache

CONTENT PUBLISHER

Ad revenue and analytics data

Publishersdepictedareexamplesforillustrativepurposes

Platformsdepictedareexamplesforillustrativepurposes

Link Tags

AMP-HTML

HTML CACHE PLATFORMS


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.


Ads in AMP

§ amp-adelement§ Integrationwithexistingadtraffickingworkflows§ Supportformostcommonformats:standardbannerads,HTML5ads,nativeads,adsthatresizeonuserinteraction

§ Norestrictionsonaddensity§ Viewabilitysupport§ Integrationwithdozensof3rdpartyproviders:demandsources,sponsoredcontent,datamanagementplatforms


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)


Analytics in AMP

§ amp-pixel:Forbasictrackingpixelbehavior§ amp-analytics:

–  “Measureonce.Reporttomany.”

–  ConfigurationviaJSON.Superflexible.

–  Lookforvendorconfigurationsfrom~20vendors•  Cutsoutguessworkyouneedtodo

•  Ensurescollectionalignswithyourvendor

– Or,collectdatayourselfbysendingittoyourownservers


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


Content Access in AMP

§ amp-accesselement§ Supportformeteringandsubscribersign-in§ Client-sidecontenthiding§ Publisherusestheirownbusinesslogictomakeaccessdecision

§ Publishercantrack(count)accesses§ Integrationwithamp-analytics


§ ExploreAMP’swebcomponentslibrary–  Sidebarfornavigationmenus

–  Imagecarousels

–  Lightboxes–  Videoplayers

–  Socialembeds

§ Learnaboutbehaviorsandfeaturesthroughusecase–driveninteractiveexamples

Learn through examples with “AMP By Example” AMPByExample.com


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


Let’s talk about validation again…

AMPvalidationVerifyproperimplementation

accordingtoAMPspec

+ GooglemarkupvalidationUsuallyfeaturespecific

(e.g.TopStoriescarousel)

Checkdocumentationforotherplatformsforanyadditionalrequirementstohaveyourcontentappearthere


AMP-only validation requirements

§ ThemainAMPspecification:https://www.ampproject.org/docs/reference/spec.html

§ Individualcomponentsmayhaveadditionalvalidationrequirements.Besuretocheckthedocumentation.


AMP-only validation tools

§ #development=1:BuiltintoAMPandshowsinyourbrowserconsole

§ AMPValidatorChromeextension


Structured data

§ TopStoriesarticles:https://developers.google.com/search/docs/data-types/articles

§ Generalguidelines:https://developers.google.com/search/docs/guides/mark-up-content


Google’s Structured Data Testing Tool

§ https://search.google.com/structured-data/testing-tool


Google Search Console – AMP Validation Report

§ https://www.google.com/webmasters/tools/home

§ Seeerrorsacrossyoursite§ Bucketedbycategory§ Reportsbothkindsoferrors:Structureddata(Googlerequired)+AMPvalidation(AMPrequired)


Google Search Console – AMP Impression & Click Report

§ Click,impression,CTR,andpositiondata§ SeeAMP-onlydatausingafilteredview


Your path to AMP

§ Explore–  ampproject.org/docstolearnmoreandreaddocumentation– github.com/ampproject/amphtmltoconnectwiththedevelopmentteam

§ Developandtest– StartdevelopingAMPfilesandvalidatethem– LookintoCMSsupport

§ Launch:PointtoAMPfilesfromcanonicalarticlestomakethemdiscoverableandeligibletoappearincontentplatforms


§ Updatedtwiceperquarter§ Focusareas:Format,Analytics,Ads,andAccess

§ Summarizationofopen-sourceprojectactivityandsurroundingdiscussions

§ At-a-glancethemes,quarterlygoalsandstatus,2-quarteroutlook

AMP Roadmap ampproject.org/roadmap


LEARN MORE: UPCOMING @SMX EVENTS

THANK YOU! SEE YOU AT THE NEXT #SMX

Marketing

Tips and Insights for Success with Accelerated Mobile Pages By Rudy Galfi