Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16

January 20th, 2016
@seanmalseed
Accelerated Mobile Pages
Get AMP’ed for AMP(and other silly puns)
seograil.com

@seanmalseed
Let’s talk about AMP.
What is AMP?
Where did AMP come from?
How does AMP work?
When should I use AMP?
The WP plugin: how to get totally AMP’ed before your
competitors do.

@seanmalseed
No.
Adenosine monophosphate (AMP)

@seanmalseed
What is AMP?
AMP, or Accelerated Mobile Pages, is a an open source
project to create a standard which makes certain web pages
load totally way super fast, through the cunning use of…
www.ampproject.org
https://www.ampproject.org/docs/get_started/about-amp.html

@seanmalseed
What is AMP?
Strict subset of HTML
AMP Javascript
AMP CDN

@seanmalseed
Why is AMP so fast?
Allow only asynchronous scripts
Size all resources statically
Don’t let extension mechanisms block
rendering
Keep all third-party JavaScript out of the
critical path
All CSS must be inline and size-bound
Font triggering must be efficient
Minimize style recalculations
Only run GPU-accelerated animations
Prioritize resource loading

@seanmalseed
AMP in a nutshell...
AMP is the static web
at it’s fastest and staticiest.
… and it’s coming mid-February.

@seanmalseed
Where did AMP
come from?

@seanmalseed
How does AMP work?

@seanmalseed
AMP HTML
Kinda weird, really restrictive, but by
golly it goes fast.

@seanmalseed
AMP HTML is just HTML with a
whole bunch of restrictions.

@seanmalseed
How AMP works ⚡ AMP HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html> https://www.ampproject.org/docs/get_started/about-amp.html#amp-html

@seanmalseed
How AMP works ⚡ AMP HTML
<!doctype html>
<html ⚡>
<head>
</head>
</html>
Says that we’re
doing AMP
Super strict
CSSAMP JS on the
AMP CDN
https://www.ampproject.org/docs/get_started/about-amp.html#amp-html
You can also use
<html amp>

@seanmalseed
How AMP works ⚡ AMP HTML restrictions
There’s a ton of stuff AMP HTML limits. Some highlights:
Conditional HTML comments are not allowed
All attributes starting with ‘on’ are not allowed
‘Javascript:’ schema is not allowed
All styles must be inline
Only one style tag in the document head
Style rules must be below 50KB
No input elements or text areas of any kind
...yikes...
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md

@seanmalseed
How AMP works ⚡ AMP HTML changes
AMP HTML also makes a few changes. Some highlights:
<img> is replaced by <amp-img>
<video> is replaced by <amp-video>
<audio> is replaced by <amp-audio>
<iframe> is replaced by <amp-iframe>

@seanmalseed
Wait wait wait…
Did you just say that AMP lets you have an iFrame?

@seanmalseed
How AMP works ⚡ AMP HTML iframe hax?
Yes, AMP does have an amp-iframe tag that embeds a true-blue real
iframe.
It has a bunch of restrictions, but it does seem like a way to hack in some non-AMP source into
your AMP pages. Like maybe a lead form?
Reading their page about it seems like they might be wise, and considering a change.
https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md

@seanmalseed
How AMP works ⚡ AMP HTML iframe restrictions?
amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below).
They must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top –
whichever is smaller. NOTE: We are currently looking for feedback as to how well this restriction works in practice.
They are sandboxed by default. Details
They must only request resources via HTTPS or from a data-URI or via the srcdoc attribute.
They must not be in the same origin as the container unless they do not allow allow-same-origin in the sandbox attribute.
See the doc "Iframe origin policy" for further details on allowed origins for iframes.
https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md

@seanmalseed
AMP JS
It can do the Kessel Run in less than
twelve parsecs.

@seanmalseed
How AMP works ⚡ AMP Javascript
AMP JS is a Javascript library that does neat AMP speed tricks.
The library makes all external resources load asynchronously, meaning that
one thing loading doesn’t stop other things from starting to load.
It pre-calculates the layout of every element.
It disables slow CSS selectors.
https://www.ampproject.org/docs/get_started/about-amp.html#amp-js

@seanmalseed
How AMP works ⚡ AMP Javascript
<!doctype html>
<html ⚡>
<head>
</head>
</html>
That’s how you
load AMP JS.

@seanmalseed
AMP CDN
It’s totally optional. Really.

@seanmalseed
How AMP works ⚡ AMP CDN
There were rumors that the AMP CDN was required, and you’d have to
host your AMP pages on Google’s servers.
NOPE.

@seanmalseed
How does the AMP CDN work?
It just kind of does.

@seanmalseed
The AMP CDN serves out cached versions of your resources. Just
reference the resource preceded by the CDN:
https://cdn.ampproject.org/c/s/www.yoursite.com/whatever
http://stackoverflow.com/questions/34720444/how-can-i-test-the-cdn-of-googles-amp-project

@seanmalseed
When should I use AMP?

@seanmalseed
When to use AMP ⚡
AMP is made for static pages.
YES:
Articles, blogs, and things that don’t move around a lot.
NO:
Your storefront, a form, hampsterdance.com, anything interactive.

@seanmalseed
How does Google know
about my AMP version?

@seanmalseed
Pointing to your AMP ⚡
Easy peasy. Link rel=”amphtml”
<link rel="amphtml"
href="https://www.whatever.com/page/amp">

@seanmalseed
There’s already a
Wordpress plugin

@seanmalseed
… and it almost doesn’t totally
suck and not work at all.

@seanmalseed
If you really wanna risk it, though:
https://wordpress.org/plugins/amp/

@seanmalseed
Go home and play with some AMP thanks to The Guardian
Regs old Guardian:
http://www.theguardian.com/media/2015/oct/11/google-amp-facebook-
instant-articles-apple-news
AMPlified Guardian:
https://www.theguardian.com/media/2015/oct/11/google-amp-facebook-
instant-articles-apple-news/amp
The Guardian implemented AMP on all their articles, and Google uses them as their example in a
bunch of places. Wonder how much Google had to pay ‘em for that… :D

@seanmalseed
Thanks!
@seanmalseed

Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16

Similar a Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16 (20)

Último

Último (20)

Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16