11
#SMX #11A @tweetbez Faster Content + Open Distribution Accelerated Mobile Pages

Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

Embed Size (px)

Citation preview

Page 1: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

Faster Content + Open Distribution

Accelerated Mobile Pages

Page 2: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

AMP-HTML on Google Search driving content discovery

Page 3: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

▪ Articles are cached and load instantly ▪ Publishers have control over

visual design and business model ▪ Supports existing ad formats ▪ Deepen engagement with

related articles

Reading Experience using AMP-HTML

Page 4: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

Accelerated Mobile Pages

Web pages, today Accelerated Mobile Pages

Page 5: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

What is AMP?

HTML5 (AMP HTML)

JavaScript (AMP JS)

CSS3 (Custom styling)

Global Proxy Cache

(AMP Cache)

Page 6: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

How does publishing work?

AMP-HTML

Ad revenue and analytics

HTML

Sped up by the AMP Cache

CMS

Page 7: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

Your website...

Local copy of your assets

Without the AMP cache With the AMP cache

Web server Web server

Edge server Edge server

Edge server

Edge server

Edge server

Edge server

Edge server

Page 8: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

▪ Typically a separate companion file referenced via link tag on a site’s current article page

▪ Open-source framework and

common set of building blocks replacing one off Javascript

▪ All content including ads needs

to be HTTPS hosted

How AMP Works

COMPONENT CALLS

Twitter Instagram Maps Ads more...

Accelerated Mobile Pages

Cached Runtime Libraries

HTML CSS

Page 9: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

▪ 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

AMP Features

COMPONENT CALLS

Twitter Instagram Maps Ads more...

Accelerated Mobile Pages

Cached Runtime Libraries

HTML CSS

Page 10: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

Join the AMP Initiative

1 EXPLORE Review the technical documentation Connect with the AMP engineering community on GitHub and StackOverflow

2 DEVELOP & TEST Start developing your AMP files and validate them

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

Page 11: Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris

#SMX #11A @tweetbez

SEE YOU AT THE NEXT #SMX

THANK YOU!