get amp'ed for accelerated mobile pages - seo grail philadelphia 1/20/16
TRANSCRIPT
January 20th, 2016
@seanmalseed
Accelerated Mobile PagesGet 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
What is AMP?
@seanmalseed
No.
@seanmalseed
No.
@seanmalseed
No.Adenosine monophosphate (AMP)
@seanmalseed
Yes.
@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 CDNhttps://www.ampproject.org/docs/get_started/about-amp.html
@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 https://www.ampproject.org/docs/get_started/about-amp.html
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.
https://www.ampproject.org/docs/get_started/about-amp.html
@seanmalseed
Where did AMP come from?
@seanmalseed
@seanmalseed
How does AMP work?
@seanmalseed
AMP HTMLKinda 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> <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>
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 allowedAll attributes starting with ‘on’ are not allowed‘Javascript:’ schema is not allowedAll styles must be inlineOnly one style tag in the document headStyle rules must be below 50KBNo 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>
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
@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 JSIt 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> <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>
That’s how you load AMP JS.
@seanmalseed
AMP CDNIt’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.https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
@seanmalseed
How AMP works ⚡ AMP CDN
How does the AMP CDN work?
It just kind of does.
@seanmalseed
How AMP works ⚡ AMP CDN
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
@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
AMP’ed
