2017 Silicon Valley Code Camp: Instant Mobile Web

Instant Mobile Web: An AMP Primer
Lisa Huang

Oct 2017

Slides: bit.ly/SVCC_AMP

Twitter/Github: @lisaychuang

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

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!

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

▸ 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/

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 uses 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!

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
▸ Restrictive branding / styling
▸ Limited analytics data
▸ AMP analytics API supports  
34 analytics platforms!
https://www.ampproject.org/docs/guides/analytics/analytics-vendors

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

🐢 Where does the slow come from?
▸ 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

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?

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

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

AMP custom components
▸ <amp-img>
▸ speciﬁed ﬁxed 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/

📡 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

So many network requests!
📱
🖥
50% of pages involve > 76 requests

🐢 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

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

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

AMP approach: Inlined CSS
▸ Inlined CSS stylesheet!
▸ When HTML lands —> Mobile page is ready for basic use!
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)

' Challenge #3: JS doing all the heavy lifting

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 ﬁrst 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

JS
Case Study: Apple.com
▸ "good 3G" connection
▸ 10x CPU slowdown
HTML
CSS
IMG
IMG

JS
▸ Synchronous JS, waiting for external scripts to
download
▸ 3 network requests before images
HTML
CSS
IMG
IMG

JS
▸ Not optimized for above the fold
▸ Slow time to ﬁrst paint & interactivity
HTML
CSS
IMG
IMG

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="">

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

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

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

2017 Silicon Valley Code Camp: Instant Mobile Web

More Related Content

What's hot

Similar to 2017 Silicon Valley Code Camp: Instant Mobile Web

Recently uploaded

2017 Silicon Valley Code Camp: Instant Mobile Web