AMPAccelerated Mobile Pages

June 2016

Proprietary + Confidential

Ido Green@greenido

With the shift to mobile, the way

we consume content has

changed

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

The web offers broader reach, but engagement is low - Let’s fix it!Top 1000 mobile apps vs. top 1000 mobile web properties

10.9

Monthly unique visitors (MM)

3.3

Average minutes per visitor

Mobile webApps

8.9201.8

UI Today

“ For the first time this summer, more Google searches were completed on mobile devices than desktop computers

Amit Singhal, August 2015 ”

Proprietary + Confidential

What is happening?● Mobile is our main focus

● Mobile web suffers from slow, cluttered sites

● User experience is not good

● Mobile Apps create silos and reduce diversity

● Many ways to access mobile content

Publisher appsSocial, aggregators

Targeted queries Serendipitous discovery

Search

Habitual use

of people abandon a website that takes more than 3 seconds to load40%

Performance as a feature

2 Poor consumer perceptions of mobile web experiences

1 Evolving ecosystems of closed distribution models

3 Monetization at the content level is hard

4 Technology updates are outpacing development cycles

5 Ad Blockers are a challenge to the industry

Publishers are faced with new challengesWith a common objective: an open ecosystem of knowledge

We must something

Fast Easy to implement

Mobile Friendly

Embrace the open web

Gives strong Incentives

✔⚡

How to make fast web pages

● Simplify the pages - Less Javascript

● Optimize the bandwidth

○ Get the best content for your device (image resolution etc.)

○ Parallelize the loading (asynchronous load)

● Cache the pages

○ Use Content Delivery Servers to store a local copy of the pages

⚡

Introducing

Accelerated Mobile Pages

Web pages, today Accelerated Mobile Pages

What is AMP?

HTML5(AMP HTML)

JavaScript(AMP JS)

CSS3(Custom styling)

Global Proxy Cache

(AMP Cache)

How does it work?

AMP-HTML

Ad revenue and analytics

HTML

Speed up by the AMP Cache

CMS

Your website...

Web server

Local copy of your assets

Without the AMP cache With the AMP cache

Web serverEdge server

Edge server

Edge server

Edge server

Edge server

Edge server

Edge server

How AMP works

Open-source framework and common set of building blocks replacing Javascript

HTML CSS

COMPONENT CALLS

Embe

ds TwitterInstagramMapsAdsmore...

Accelerated Mobile Pages

Cached Runtime Libraries

Separate companion file referenced via link tag on a site’s current article page

Wid

getsAds load in safe iFrames

secondarily to content - Needs to be HTTPS hosted

galleriespollslightboxesforms

AMP Features● Smart content prioritization

○ Prefetching the elements

○ No relayout

○ Asynchronous load

● Responsive design○ Always get the best image for your screen (full srcset support)

● Limited by design○ No custom Javascript except in amp-iframe

○ No scrolling elements on the page

○ Max 50kB inline stylesheet

Page load time

Synchronous load

Page load time

Asynchronous load

Select publisher and platform partners on AMP initiative

AMP-HTML on Google Search driving content discoveryGoogle will display articles created using AMP-HTML in new carousels on search…

AMP-HTML on Google Search driving content discovery

Google has been displaying sports articles created using AMP-HTML in the Top Stories carousel on search.

Beyond NewsWe will also create article carousels for topics related to soft news like

● “pasta recipes”● “visit barcelona”● “uk music

festivals”

Illustrative Mocks

…..and ultimately across multiple Google surfaces.

Now On TapGoogle News Play NewsstandGoogle Now

Illustrative Mocks

Reading Experience using AMP-HTML

● Articles are cached and load instantly

● Publishers have control over visual design and business model

● Supports existing ad formats● Deepen engagement with related

articles

Join the Amp Initiative1 EXPLORE

Review the technical documentation and join the community on GitHub and StackOverflow

2 DEVELOP & TESTStart developing your AMP files* and validate them. You can use ampbyexample.com for reference

5 LAUNCH Point to AMP files from your canonical articles to make them publicly crawlable

3 FOLLOW THE GOOGLE SEARCH GUIDELINESReview the Google Search requirements and check the AMP Search Console Report

4 RESEARCH ADS & ANALYTICS Review your options for ads and analytics

If you use a market CMS platform, please visit ampproject.org/who

For more info on AMP, please visit:

• Get help in the Webmaster Central forums

• Learn more about AMP in Google Search

• Read about Structured Data for Top Stories

• Check for errors in the Search Console

Using AMP with GoogleCreating Native AMPs

• AMP Project Website and getting started guide

• Learn about extensions, ads , and analytics

• Get help on StackOverflow (how to ask questions)

• Videos: NewsLab Hangouts, AMP with Paul Bakaus & AMP Anatomy with Malte Ubl

Use Google

Analytics or ads?

Support on Ads and Analytics

Request support from your vendor

GA

Neither

Yes

No

Ask your vendor to support AMP

Contact your support rep or the DFP Help Center

Does the vendor support AMP?

Check the latest on ampproject.org/who

Not Sure

Contact your premium support rep or the GA Help Center

Visit GitHub

• Ads

• Analytics

Ads

Thank You!

@greenidoido-green.appspot.com