Nodevember 2017: AMP Primer

Instant Mobile Web: An AMP Primer
Lisa Huang

Nov 2017

Slides: bit.ly/nodevember

Twitter/Github: @lisaychuang

INSTANT MOBILE WEB: AN AMP PRIMER
Hello Nodevember!
▸ 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

Shift Towards Mobile
▸ Oct 2016 - Mobile page views has
overtaken Desktop for the ﬁrst time
globally
▸ March 2017 - Android device page
views has overtaken Windows
▸ Momentum in this direction is only
growing!
MOBILE: 48.3%
DESKTOP: 46.9%
45.6%
50%50%
WINDOWS: 38.8%
ANDROID: 39.2% 40.3%
50%
37.8%
http://gs.statcounter.com/os-market-share/desktop-mobile/worldwide/#monthly-201606-201711
http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-201606-201711

Performance === 💰💸
➡ wpostats.com ⬅
▸ Google: +800ms page load time = -$1M daily revenue loss
▸ Financial Times: +3000ms load time = 7.2% drop in user engagement
▸ Walmart: -1000ms load time = +2% increase in conversion
▸ AliExpress: -36% load time = +10.5% increase in orders

▸ AMP is an open source framework to build really fast
mobile pages
▸ Create instantly loading mobile pages
▸ 4 Billion+ pages, 25million+ 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/

Content Platforms that enable AMP
https://www.ampproject.org/support/faqs/supported-platforms
▸ Facebook
▸ Twitter
▸ WordPress
▸ Google
▸ Medium
▸ Pinterest
▸ LinkedIn
▸ Reddit
▸ Nuzzel
▸ Hatena
▸ Squarespace
▸ Ghost
▸ Drupal
▸ Fastcommerce
▸ Canvas
https://www.ampproject.org/latest/blog/amp-two-years-of-user-ﬁrst-webpages/

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

Who is publishing with AMP Today?

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!
https://www.ampproject.org/docs/guides/pwa-amp

Mobile Web Challenges
📱 Most devices are not powerful
📡 Cellular networks make connections slowly
' JS is usually doing all the heavy lifting

📱 Challenge #1: Most devices are not powerful

▸ Complex CSS animations
▸ Video viewing
▸ Data download & processing
▸ Background Processes (Web Worker)
▸ Push notiﬁcations
▸ GPS
▸ Sensors: accelerometer, gyroscope,
magnetometer requests
https://developer.apple.com/library/content/documentation/Perf
🐢 Underpowered Devices - What’s slow?

Case Study: CSS Animations
▸ Animate the ball by iteratively setting the left
position
▸ Triggers re-layout calculations, “janky” animation
▸ This experience is never desirable!

Case Study: CSS Animations
▸ Animate the ball using transform:
translateX()
▸ GPU optimized and does not trigger a re-layout
▸ Only re-composition is required

Underpowered Devices - 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/ ⬅

Underpowered Devices: AMP custom components
▸ Pre-calculate initial viewport layout with <amp-img>
▸ speciﬁed ﬁxed height & width
▸ includes placeholder, and a fallback
https://www.ampproject.org/docs/

📡 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: 100 - 300ms extra, 4G: 10 - 100ms extra
https://developers.google.com/speed/docs/insights/mobile

Cellular: What’s slow?
📱
🖥
50% of pages involve > 76 requests

Tested From: Dulles, VA, “Good 2G speed”
Chrome - Emulated Motorola G (Gen 4)📱 webpagetest.org
Case Study: Adobe Typekit Blog

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>

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

AMP approach: AMP Cache
▸ AMP pages will be cached
when they’re discovered (or
updates are found) 
▸ This saves the overhead of DNS
resolution & SSL handshake
https://developers.google.com/amp/cache/overview
https://blog.cloudﬂare.com/accelerated-mobile/

' Challenge #3: JS doing all the heavy lifting

Heavy JS: What’s slow?
▸ Synchronous JS pauses HTML parsing, it resumes once download completes
▸ Parsing the downloaded JS takes time (related to code size & other factors)
▸ ⚠ 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

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
🏖📦<script async src="">

Recap: Mobile web challenges
📱 Most devices are not powerful
📡 Cellular networks make connections slowly
' JS is usually doing all the heavy lifting

To AMP or not to AMP
▸ Feel locked into Google ecosystem
▸ Direct trafﬁc 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
▸ Limited analytics data
▸ AMP analytics API supports  
34 analytics platforms!
https://www.ampproject.org/docs/guides/analytics/analytics-vendors

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 & remote data:
▸ <amp-sidebar>, <amp-social-share>,  
<amp-list>, <amp-mustache>
http://bit.ly/amp-corgi-repo

LIVE DEMO
<amp-list>
▸ fetches dynamic content from a CORS JSON endpoint

▸ XHR batching: single JSON data request as data source

▸ renders response (data) in a speciﬁed template

▸ supports a placeholder and/or fallback

▸ AMP runtime to update height / show overﬂow element
https://www.ampproject.org/docs/reference/components/amp-list

<amp-mustache>
▸ mustache is a logic-less template syntax

▸ NO if statements, else clauses, for loops etc

▸ Expands {{ }} tags using values provided in a hash or object
https://www.ampproject.org/docs/reference/components/amp-mustache
{
"items": [
{
"title": "AMP By Example",
"url": "https://ampbyexample.com/"
},
{
"title": "AMPproject.org",
"url": "https://www.ampproject.org/"
}
]
}
JSON OBJECT
<template type="amp-mustache">
Hello {{title}}!
</template>
AMP-MUSTACHE TEMPLATE
<div role="list">
<div role="listitem">Hello AMP By Example</div>
<div role="listitem">Hello AMPproject.org</div>
</div>
HTML

AMP + Progressive Web Apps
https://www.ampproject.org/docs/guides/pwa-amp/amp-to-pwa

AMP with PWA features
▸ Add a Web App Manifest
for users to install to home
screen
▸ Use Service Worker to
enable ofﬂine 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-ofﬂine-access

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

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

🎉 Thank you! 🎉
Questions? 🤔
Twitter & Github: @lisaychuang
Email: lisa.yc.huang@gmail.com

Nodevember 2017: AMP Primer

Related slideshows

More Related Content

Nodevember 2017: AMP Primer