Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,146 views

Published on

All about AMP, Google's Accelerated Mobile Pages project - at SEO Grail Philadelphia on January 20th, 2016.

Published in: Marketing
  • Interesting! Very informative and technical explanation of Google Accelerated Mobile Pages. I am sharing an article on "Accelerated Mobile Pages (AMP) for Mobile-First Generation" https://goo.gl/bonFVZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. January 20th, 2016 @seanmalseed Accelerated Mobile Pages Get AMP’ed for AMP(and other silly puns) seograil.com
  2. 2. @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.
  3. 3. @seanmalseed What is AMP?
  4. 4. @seanmalseed No.
  5. 5. @seanmalseed No.
  6. 6. @seanmalseed No. Adenosine monophosphate (AMP)
  7. 7. @seanmalseed Yes.
  8. 8. @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
  9. 9. @seanmalseed What is AMP? Strict subset of HTML AMP Javascript AMP CDN https://www.ampproject.org/docs/get_started/about-amp.html
  10. 10. @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
  11. 11. @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
  12. 12. @seanmalseed Where did AMP come from?
  13. 13. @seanmalseed
  14. 14. @seanmalseed How does AMP work?
  15. 15. @seanmalseed AMP HTML Kinda weird, really restrictive, but by golly it goes fast.
  16. 16. @seanmalseed AMP HTML is just HTML with a whole bunch of restrictions.
  17. 17. @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
  18. 18. @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>
  19. 19. @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
  20. 20. @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
  21. 21. @seanmalseed Wait wait wait… Did you just say that AMP lets you have an iFrame?
  22. 22. @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
  23. 23. @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
  24. 24. @seanmalseed AMP JS It can do the Kessel Run in less than twelve parsecs.
  25. 25. @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
  26. 26. @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.
  27. 27. @seanmalseed AMP CDN It’s totally optional. Really.
  28. 28. @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
  29. 29. @seanmalseed How AMP works ⚡ AMP CDN How does the AMP CDN work? It just kind of does.
  30. 30. @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
  31. 31. @seanmalseed When should I use AMP?
  32. 32. @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.
  33. 33. @seanmalseed How does Google know about my AMP version?
  34. 34. @seanmalseed Pointing to your AMP ⚡ Easy peasy. Link rel=”amphtml” <link rel="amphtml" href="https://www.whatever.com/page/amp">
  35. 35. @seanmalseed There’s already a Wordpress plugin
  36. 36. @seanmalseed … and it almost doesn’t totally suck and not work at all.
  37. 37. @seanmalseed
  38. 38. @seanmalseed If you really wanna risk it, though: https://wordpress.org/plugins/amp/
  39. 39. @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
  40. 40. @seanmalseed AMP’ed
  41. 41. @seanmalseed Thanks! @seanmalseed

×