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?

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"

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.0
1.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)
Conversionrate(%)
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
Bouncerate(%)

< 1sec
Median load Time
for AMP on Search
19sec
Avg Load Time
for Non-AMP
AMP is fast

Accelerated Mobile Pages
Fast 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 challenges
With 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 pages
a. Less Javascript
2. Optimize the bandwidth
a. 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:non
e}</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.
✔

Embrace the open web
“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).

Embrace the open web
“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)

AMP JS
The library managing:
➔ Resource loading
➔ Core web components
➔ Performance
optimizations
https://github.com/ampproject/amphtml
<script async src="https://cdn.ampproject.org/v0.js"></script>

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
Request
POST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet
{
"lookupStrategy": "IN_INDEX_DOC",
"urls": [
"http://www.bbc.co.uk/news/science-environment-37547103"
]
}
Response
200
- 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"
}
]
}

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

● 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 & TEST
Start developing AMP pages and validate them
● LAUNCH
Point to AMP pages from canonical articles to make them discoverable and
eligible to appear in content platforms
Join the AMP initiative

Thank You
Robert McFrazier
Email: robert@mcfrazier.com
Blog: http://blog.robert.mcfrazier.com
Twitter: @rmcfrazier
Slides: https://joind.in/talk/97afc

Amp your site: An intro to accelerated mobile pages

More Related Content

What's hot

Viewers also liked

Similar to Amp your site: An intro to accelerated mobile pages

Recently uploaded

Amp your site: An intro to accelerated mobile pages