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)
(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
A quick introduction to AMP
By Björn Brauer
A quick introduction to AMP
- 566