Instant Mobile Web presentation for Silicon Valley Code Camp 2017.
Session: https://www.siliconvalley-codecamp.com/Session/2017/instant-mobile-web-an-accelerated-mobile-pages-primer
1. Instant Mobile Web: An AMP Primer
Lisa Huang
Oct 2017
Slides: bit.ly/SVCC_AMP
Twitter/Github: @lisaychuang
2. INSTANT MOBILE WEB: AN AMP PRIMER
Hello LRTF!
▸ Financial analyst > Digital Marketer > Fullstack
Engineer
▸ Flatiron School alumnae
▸ Taiwan + Singapore + South Africa + USA
▸ Basic Android phone & buying data by MBs
▸ Discovered AMP project through a SEO course
on FrontEndMasters.com
3. INSTANT MOBILE WEB: AN AMP PRIMER
Shift Towards Mobile
▸ Oct 2016 - Mobile page views has
overtaken Desktop for the first time
globally
▸ March 2017 - Android device page
views has overtaken Windows
▸ Momentum in this direction is only
growing!
4. INSTANT MOBILE WEB: AN AMP PRIMER
Performance === 💰💸
➡ wpostats.com ⬅
▸ Google: 800ms page load time results in $1M daily revenue loss
▸ Pinterest: Reduced wait time by 40% increased signups 15%
▸ BBC: Every +1s of page load time reduces engagement 10%
▸ Financial Times: faster ft.com showed 30% more user engagement
5. INSTANT MOBILE WEB: AN AMP PRIMER
▸ AMP is an open source framework to build really fast
mobile pages
▸ Create instantly loading mobile pages
▸ 2 Billion+ pages, 900K+ domains, 100+ languages
▸ May 2017: Google mobile search AMP Top Stories
Carousel global rollout
https://www.ampproject.org/
https://techcrunch.com/2016/02/24/google-now-highlights-amp-pages-in-its-mobile-search-results/
6. INSTANT MOBILE WEB: AN AMP PRIMER
Content Platforms AMP Works On
https://www.ampproject.org/support/faqs/supported-platforms
▸ Facebook
▸ Twitter
▸ WordPress
▸ Google
▸ Medium
▸ Pinterest
▸ LinkedIn
▸ Reddit
▸ Nuzzel
▸ Hatena
▸ Squarespace
▸ Ghost
▸ Drupal
▸ Fastcommerce
▸ Canvas
8. INSTANT MOBILE WEB: AN AMP PRIMER
Google I/O May 2017 announcements
▸ Before: focused on static content
▸ Now: interactive content, moving towards an
interactive framework
▸ Future: ecommerce, highly interactive
experiences
▸ AMP to PWA!
9. INSTANT MOBILE WEB: AN AMP PRIMER
To AMP or not to AMP
▸ Feel locked into Google ecosystem
▸ Direct traffic vs Google cache
https://www.google.com/amp/s/
amp.theguardian.com/world/2017/oct/05/
nobel-peace-prize-2017-who-are-the-likely-
nominees
▸ Restrictive branding / styling
▸ Limited analytics data
▸ AMP analytics API supports
34 analytics platforms!
https://www.ampproject.org/docs/guides/analytics/analytics-vendors
10. INSTANT MOBILE WEB: AN AMP PRIMER
Mobile Web Challenges
📱 Most devices are not powerful
📡 Cellular networks make connections slowly
' JS is usually doing all the heavy lifting
11. INSTANT MOBILE WEB: AN AMP PRIMER
📱 Challenge #1: Most devices are not powerful
12. INSTANT MOBILE WEB: AN AMP PRIMER
🐢 Where does the slow come from?
▸ Complex CSS animations
▸ Video viewing
▸ Data download & processing
▸ Background Processes (Web Worker)
▸ Push notifications
▸ GPS
▸ Sensors: accelerometer, gyroscope,
magnetometer requests
https://developer.apple.com/library/content/documentation/Perf
13. INSTANT MOBILE WEB: AN AMP PRIMER
Case Study: CSS Animations
▸ First, let’s animate the ball by iteratively setting the
left position
▸ This triggers re-layout calculations, and the
resulting animation is “janky”
▸ This experience is never desirable, but how could
we enforce it on a per-page basis?
14. INSTANT MOBILE WEB: AN AMP PRIMER
Case Study: CSS Animations
▸ Next, let’s animate the ball by iteratively setting
the transform: translateX() transformation
▸ This is GPU optimized, and does not trigger a re-
layout
▸ Only re-composition is required
15. INSTANT MOBILE WEB: AN AMP PRIMER
AMP approach: Subset CSS
▸ Only subset of CSS allowed
▸ Max. 50KB total CSS
▸ Animation: only GPU-accelerated properties allowed
▸ Use transform and opacity changes
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count
➡ https://csstriggers.com/ ⬅
16. INSTANT MOBILE WEB: AN AMP PRIMER
AMP custom components
▸ <amp-img>
▸ specified fixed height & width
▸ includes placeholder, and a fallback
▸ srcset: Serves appropriate image for screen’s pixel density (resolution)
▸ <amp-iframe>
▸ Sandboxed
▸ Only request resources via HTTPS
https://www.ampproject.org/docs/
17. INSTANT MOBILE WEB: AN AMP PRIMER
📡 Challenge #2: Cellular networks make connections slowly
▸ Slow to initiate network connection
▸ Mobile network requests are extra expensive, and involve extra latency
▸ 2G: 300 - 1000ms, 3G: 200 - 400ms extra, 4G: 50 - 100ms extra
18. INSTANT MOBILE WEB: AN AMP PRIMER
So many network requests!
📱
🖥
50% of pages involve > 76 requests
19. INSTANT MOBILE WEB: AN AMP PRIMER
🐢 Where does the slow come from?
▸ Large numbers of requests, many of which are on the critical path!
▸ Javascript framework
▸ CSS as an external stylesheet
▸ Assets (images, custom fonts)
▸ Multi-step process for new domains (DNS) and establishing a SSL connection
▸ Cellular provider “round robin”
https://developer.apple.com/library/content/documentation/Perfo
20. Tested From: Dulles, VA, “Good 2G speed”
Chrome - Emulated Motorola G (Gen 4)📱 webpagetest.org
Case Study: Adobe Typekit Blog
21. INSTANT MOBILE WEB: AN AMP PRIMER
AMP Cache
▸ Your AMP pages may be
cached when they’re discovered
(or updates are found)
▸ This saves the overhead of DNS
resolution & SSL handshake
▸ AMP implementors may
optimize this even more in the
future!
https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e
https://developers.google.com/amp/cache/overview
22. INSTANT MOBILE WEB: AN AMP PRIMER
AMP approach: Inlined CSS
▸ Inlined CSS stylesheet!
▸ When HTML lands —> Mobile page is ready for basic use!
https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e
HTML
CSS
JSSingle Page App
🌟
HTML CSS
JS
AMP Html
🌟
<style amp-custom="">...</style>
23. INSTANT MOBILE WEB: AN AMP PRIMER
AMP approach: Prioritize resource loading
▸ Control network requests to prioritize resources effectively
▸ Prefetches and lazy-loads resources:
▸ Resources are prefetched as early as possible (⬇ the fold), but...
▸ lazy-loaded as late as possible (CPU is only used when resources are
actually shown to users)
https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e
24. INSTANT MOBILE WEB: AN AMP PRIMER
' Challenge #3: JS doing all the heavy lifting
25. INSTANT MOBILE WEB: AN AMP PRIMER
Where does the slow come from?
▸ <script src="..."> requires additional network requests
▸ Synchronous JS pauses HTML parsing, it resumes once download completes
▸ Parsing the downloaded JS takes time (related to code size & other factors)
▸ Finally first meaningful paint 🎨 and interactivity📱
▸ ⚠ Server-side rendering aims to help, but is incredibly complex to get right
https://developer.apple.com/library/content/documentation/Performance/Conceptual/EnergyGuide-iOS/FundamentalConcepts.html
26. JS
INSTANT MOBILE WEB: AN AMP PRIMER
Case Study: Apple.com
▸ "good 3G" connection
▸ 10x CPU slowdown
HTML
CSS
IMG
IMG
27. JS
INSTANT MOBILE WEB: AN AMP PRIMER
Case Study: Apple.com
▸ Synchronous JS, waiting for external scripts to
download
▸ 3 network requests before images
HTML
CSS
IMG
IMG
28. JS
INSTANT MOBILE WEB: AN AMP PRIMER
Case Study: Apple.com
▸ Not optimized for above the fold
▸ Slow time to first paint & interactivity
HTML
CSS
IMG
IMG
29. INSTANT MOBILE WEB: AN AMP PRIMER
AMP approach: Async JS loading & iFrames
▸ Async JS loading keeps JS off the critical path
▸ Sandbox 3rd party JS in cross-domain iframe (also async)
▸ Block form submission and script execution (eval)
▸ Cannot trigger multiple style re-calcuation
▸ Block automatically triggered features (i.e., video autoplay)
🏖📦<script async src="">
30. INSTANT MOBILE WEB: AN AMP PRIMER
Live code!
▸ AMP validator plugin
1. Building the AMP boilerplate code
▸ “Hello AMP!”
2. Add embedded media
▸ <amp-youtube>, <amp-image-lightbox>
3. Add user interactivity:
▸ <amp-social-share>, <amp-sidebar>
bit.ly/AMPcode
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42. INSTANT MOBILE WEB: AN AMP PRIMER
Recap: Mobile web challenges
📱 Most devices are not powerful
📡 Cellular networks make connections slowly
' JS is usually doing all the heavy lifting
43. INSTANT MOBILE WEB: AN AMP PRIMER
AMP + Progressive Web Apps
https://www.ampproject.org/docs/guides/pwa-amp/amp-to-pwa
44. INSTANT MOBILE WEB: AN AMP PRIMER
AMP with PWA features
▸ Add a Web App Manifest
for users to install to home
screen
▸ Use Service Worker to
enable offline access
▸ Inject custom JS scripts
that’s not AMP-
compatible
https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#install-a-service-worker-to-enable-offline-access
45. INSTANT MOBILE WEB: AN AMP PRIMER
AMP as entry point into PWA
<amp-install-serviceworker>
▸ Installs Service Worker from
origin
▸ Let Service Worker intercept
navigation request, and respond
with a PWA
▸ Shell URL rewriting
https://www.ampproject.org/docs/guides/pwa-amp#amp-pages-with-pwa-features
46. INSTANT MOBILE WEB: AN AMP PRIMER
AMP as data source for PWA
▸ Build AMP pages as modular units 📦
▸ AMP as content source backend
▸ AMP HTML powers both AMP and
PWA experience
https://www.ampproject.org/docs/guides/pwa-amp/amp-in-pwa
47. INSTANT MOBILE WEB: AN AMP PRIMER
🎉 Thank you! 🎉
Questions? 🤔
Twitter & Github: @lisaychuang
Email: lisa.yc.huang@gmail.com