amp: above & beyond by adam greenberg

#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