Create instant loading mobile web pages with AMP
summary
Accelerated Mobile Pages (AMP) turns content pages into instant-loading mobile pages by enforcing a restricted HTML runtime, an async AMP JS library, and a global amp-cache plus viewer that prefetches and pre-renders likely taps. Pages forbid arbitrary script tags, use components like amp-img and amp-iframe, inline styles capped at 50KB, and require width/height to prevent layout shifts. Applied techniques include lazy loading, preconnect/prefetch, DOM-change batching with requestAnimationFrame, and HTTP/2 on CDN; empirical claims: 1–3s load costs ~32% bounce, 1–5s ~90% lost users.
AI-written summary · about
chapters (40)
- 0:00Introduction
- 0:50AMP Project
- 1:47AMP Technology
- 2:30AMP Logo
- 3:18Why AMP
- 5:10Frameworks
- 5:52Package managers
- 7:46Webpack Gold
- 8:26Common tasks
- 9:02UX is important
- 9:25HTML
- 10:17Style
- 10:45Banned Tags
- 12:07AMPJS
- 13:05validator
- 13:36viewer
- 15:06goal
- 15:26Rail Model
- 17:15Lazy Loading
- 17:35Pre Connect
- 18:01Pre Connect callback
- 18:23Create element
- 18:43Prefetching
- 19:00JavaScript
- 19:30Inline Styles
- 19:55Maximum Styles Size
- 20:24Instant Loading
- 21:29Resource Optimization
- 21:47Layout and Downloads Decoupled
- 22:18Jumpy Experience
- 22:34AMP eliminates layout thrashing
- 23:58AMP uses one frame
- 24:10Window requestanimationframe
- 24:22JavaScript worst practices
- 25:29Phone downloads
- 26:02Extensions
- 26:59CDN
- 27:16HTTP to
- 27:50Animations
- 28:38Conclusion
related talks
35mBuilding lightning-fast sites for the mobile web
06mAccelerating the Web through AMP
37mAccelerated Mobile Pages: The good, the bad and the ugly
32mGetting 'Up To Speed' with Accelerated Mobile Pages
28mProductive Web Development Powered by AMP
31mAMP in 2018 Still fast, still furious
26mAmp Under the Hood in Under an Hour!
34mRapidly Building Better Web Experiences with AMP