Amp your site an intro to accelerated mobile pages

AMP your site: An Intro to Accelerated Mobile Pages

Presented By Robert McFrazier

Robert McFrazier@rmcfrazier

http://blog.robert.mcfrazier.com

● Why speed is important?● What are the problems AMP addresses?● What is in AMP?

Will abandon a site that takes >3 seconds

to load

40%

Expect a page to load in <2 seconds

47%

Say fast load time speed is important

to site loyalty

52%

Slow and steady doesn’t win the race

What are user expectations for mobile sites?

How fast is fast enough.

Mobile pages should render in < 1s

3Gnetwork

connection

600ms to 1s is consumed by mandatory 3G network overhead which can’t be avoided(average 750 Kbps to 1 Mbps)

Source: "The Search Agency, Optimization Strategies for the Mobile Web"

http://download.thesearchagency.com/acton/media/15891/optimization-strategies-for-the-mobile-web

Mobile pages that load 1s faster see up to +27% CvR

180,000

160,000

140,000

120,000

100,000

80,000

60,000

40,000

20,000

0

1.7

1.6

1.4

1.2

1.0

0.8

0.6

0.4

0.2

0.01.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9

Load time (seconds)

Conv

ersi

on ra

te (%

)

Sessions Conversion rate (%) Bounce rate (%)

1.9% conversion rate

1.5% conversion rate

Note: Some of pages with load times faster than 2.4 seconds experienced lower conversion rates.

Those numbers may be influenced by faster response/page load times for 404s and other errors.

Source: "Mobile performance conversion rate"

12.8% bounce rate

20% bounce rate

58

51

45

39

32

26

19

13

6

0

Boun

ce ra

te (%

)

http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

< 1 secMedian load Timefor AMP on Search

19secAvg Load Timefor Non-AMP

AMP is fast

Accelerated Mobile PagesFast content + distribution on the web

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

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

So we need something...

Fast Easy to implement

Mobile Friendly

Embrace the open web

Gives strong Incentives

✔⚡

How to make fast web pages

1. Simplify the pagesa. Less Javascript

2. Optimize the bandwidtha. Get the best content for your device (image resolution etc.)

b. Parallelize the loading (asynchronous load)

3. Cache the pages

a. Use Content Delivery Networks to store a local copy of the

pages

⚡

How to make fast web pages

Use HTTP/2 whenever possible.

You get that for free if you use the Google AMP Cache.⚡

Easy to implement

What is required● Start with the doctype <!doctype html>.

● Contain a top-level <html ⚡> tag (<html amp> is accepted as well).

● Contain <head> and <body> tags.

● Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.

● Contain a <meta charset="utf-8"> tag as the first child of their head tag.

● Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1.

● Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).

Easy to implement

Simple AMP webpage<!doctype html><html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body></html>

Mobile Friendly

“Just like all web pages, Accelerated Mobile Pages will load in any modern

browser or app webview. AMP files take advantage of various technical and

architectural approaches that prioritize speed to provide a faster experience

for users.”

Not just mobile friendly but browser friendly.

✔


“The initial companies involved in this early preview of the project want to

make the mobile web work better for all – not just for one platform, one

set of technologies, or one set of publishers.”

Unlike other mobile friendly solutions, AMP is open source

and does not require you to be locked into a publishing

platform (Facebook Instant Articles) or be an approved

publisher (Apple News Format).


“A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the

mobile web while embracing a user-centric approach. With that context, the objective is to

provide support for a comprehensive range of ad formats, ad networks and technologies in

Accelerated Mobile Pages. ”

Will publishers be able to sell their own ad inventory?Yes, as with their existing websites, publishers control their ad inventory and how they sell it.

Select publisher and platform partners on AMP initiative

What is AMP?

HTML5(AMP HTML)

JavaScript(AMP JS)

CSS3(Custom styling)

Global Proxy Cache

(AMP Cache)

Easy to implement

Simple AMP webpage<!doctype html><html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body></html>

AMP JS

The library managing:

➔ Resource loading➔ Core web components➔ Performance

optimizations

https://github.com/ampproject/amphtml

Google AMP Cache

➔ Cache of valid AMP documents available for anyone to use

➔ HTTP/2 with same origin for all resources

➔ Google products all serve via the AMP cache

➔ API available to query AMP documents

Google AMP Cache

➔ Cache of validated AMP documents available for anyone to use

➔ HTTP/2 with same origin for all resources

➔ Google products all serve via the AMP cache

➔ API available to query AMP documents

RequestPOST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet

{

"lookupStrategy": "IN_INDEX_DOC",

"urls": [ "http://www.bbc.co.uk/news/science-environment-37547103"

]

}

Response200

- Show headers -

{

"ampUrls": [

{

"originalUrl": "http://www.bbc.co.uk/news/science-environment-37547103",

"ampUrl": "http://www.bbc.co.uk/news/amp/37547103",

"cdnAmpUrl": "https://cdn.ampproject.org/c/www.bbc.co.uk/news/amp/37547103" }

]

}

http://www.bbc.co.uk/news/science-environment-37547103

http://www.bbc.co.uk/news/science-environment-37547103

http://www.bbc.co.uk/news/amp/37547103

https://cdn.ampproject.org/c/www.bbc.co.uk/news/amp/37547103

AMP Validation Rules Enforced

● All script tags have async attributes.● Only inline CSS● Only 50KB of CSS● Only AMP’s own JavaScript (support for variety of

extensions/custom-elements)● 3rd party JS is only allowed in iframes.● Resources must have static-responsive size declared in markup.● Resource resizing is controlled by AMP Runtime.

Optimizations include:

● Only the first viewport is prerendered

— because AMP knows where each

page element is positioned

● No 3rd party JavaScript is executed

at this stage

Prerendering by Platforms Can Make Loading Instant?

Linking pages with <link>Add information about the AMP page to the non-AMP page and vice versa, in the form of

<link> tags in the <head>.

Add the following to the non-AMP page:

<link rel="amphtml"

href="https://www.example.com/url/to/amp/document.html">

And this to the AMP page:

<link rel="canonical"

href="https://www.example.com/url/to/full/document.html">

Make Your Page Discoverable

AMP Validator

AMP in action.

● EXPLORE ampproject.org/docs to learn more and read documentation github.com/ampproject/amphtml to connect with the development team ampbyexample.com Look at working AMP examples

● DEVELOP & TESTStart developing AMP pages and validate them

● LAUNCHPoint to AMP pages from canonical articles to make them discoverable and eligible to appear in content platforms

Join the AMP initiative

Questions

Robert McFrazier

Email: [email protected]: http://blog.robert.mcfrazier.comTwitter: @rmcfrazierSlides:

Thank You

mailto:[email protected]

http://blog.robert.mcfrazier.com

Amp your site an intro to accelerated mobile pages

Internet

Transcript of Amp your site an intro to accelerated mobile pages