Embed Size (px)
Citation preview
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"
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 (%
)
< 1 secMedian load Timefor AMP on Search
19secAvg Load Timefor Non-AMP
AMP is fast
● Why speed is important?● What are the problems AMP
addresses?● What is in AMP?
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 pages1. Simplify the pages
a. 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 pagesa. 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 implementWhat 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 implementSimple 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.
✔
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
● Why speed is important?● What are the problems AMP
addresses?● What is in AMP?
What is AMP?
HTML5(AMP HTML)
JavaScript(AMP JS)
CSS3(Custom styling)
Global Proxy Cache
(AMP Cache)
AMP JSThe 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
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" }
]
}
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
Questions ?
Thank YouRobert McFrazier
Email: [email protected]: http://blog.robert.mcfrazier.comTwitter: @rmcfrazierSlides: https://joind.in/talk/97afc
