A quick introduction to AMP

(Accelerated Mobile Pages)

//about:me

  • Björn Brauer (@ZauberNerd)
  • Freelance JavaScript developer
  • Hamburg
  • don't forget about: jscoderetreat (Dec. 12th)

The mobile web sucks

(by The Verge)

  • Mobile traffic rises
  • Avg. page size increases (>2MB)
  • Walled gardens built by Apple & Facebook

What are the problems?

  • Third-party tracking, ads and scripts
  • Short deadlines
  • Huge assets (images, videos)
  • Performance best practices

What does the AMP Project do?

  • Strict enforcement of best practices
  • Efficient lazy-loading / prerendering
  • Ban of scripts usage (*)

How?

  • Subset of HTML
  • Custom elements (amp-img, amp-video, amp-ad)
  • Strict rules and validation of CSS/HTML and JS
  • Runtime library

Demo

Hello world!

<!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>

Restrictions

  • amp-img, amp-video, amp-audio, amp-iframe
  • no input elements
  • no script tags
  • only one style tag
  • CSS must be <= 50KB
  • forbidden CSS: !important, *, :not()
  • only GPU animations/transitions (opacity, transform)
  • All resources must declare sizing upfront

Thank you

Questions?

Links

Made with Slides.com