Build blazing fast website
The Problem of the web
Web 1995
Web 2000
Web 2005
Web 2018
Javascript Bundle Size
Network
User need to wait
The web is bloated by user “experience”
Fast
No matter what kind of experience I'm building, I want it to be fast
Why Fast
What is AMP
The Accelerated Mobile Pages Project
Accelerated Mobile Pages?
AMP Demo
AMP search result
Aliexpress
How AMP solve the problem
- Execute all AMP JavaScript asynchronously
- Minimize style recalculations
- All CSS must be inline and size-bound
- Only run GPU-accelerated animations
- Keep all third-party JavaScript out of the critical path
- …
Three pillar
- AMP HTML
- AMP JS
- AMP Cache
AMP HTML
Disallowed HTML
- <img>
- <video>
- <audio>
- <iframe>
- <embed>
- …
replacement
- <amp-img>
- <amp-video>
- <amp-audio>
- <amp-iframe>
How to use?
AMP JS
No custom JS at all(at moment)
AMP components
- Ads & analytics: amp-analytics - Dynamic content: amp-form, amp-bind - Layout: amp-layout, amp-lightbox - Media: amp-audio, amp-youtube - Presentation: amp-animation, amp-story - Social: amp-twitter, amp-social-share
amp-layout
amp-list, amp-mustache
amp-bind
amp-stories
amp-email
AMP Cache
AMP Pros & Cons
- + SEO Optimize
- + Performance
- + Reuseable component
- - Google resource load speed in China
- - Third part javascript library and customise complex javascript logic
- - strict validation rules
AMP vs MIP
