Little Rock Tech Festival: AMP talk

24 views

Published on

In Oct 2016, mobile and tablet internet usage exceeded desktop for the first time worldwide! With over 50% of your users on their phones, is your web app optimised for them?

Accelerated Mobile Pages (AMP) is an open-source initiative, a Javascript library for building lightening speed mobile web apps. As of May 2017, there are over 2billion AMP pages and growing! The Washington Post, eBay, Airbnb - these are just some companies who are using AMP in their web products

We will look under the hood and learn about how AMP optimizes mobile web performance with resource allocation, invisible ink, sandbox iFrames and more. Attendees will learn about what makes AMP pages lightning fast on mobile, and get up and running with a code demo.

This talk is suitable for beginner and intermediate developers with experience in Javascript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
24
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Little Rock Tech Festival: AMP talk

  1. 1. Instant Mobile Web: An AMP Primer Lisa Huang Oct 2017 Slides: bit.ly/LRTF-AMP Twitter/Github: @lisaychuang
  2. 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. 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. 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. 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. 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
  7. 7. INSTANT MOBILE WEB: AN AMP PRIMER Who uses AMP Today?
  8. 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. 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. 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. 11. INSTANT MOBILE WEB: AN AMP PRIMER 📱 Challenge #1: Most devices are not powerful
  12. 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. 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. 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. 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. 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. 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. 18. INSTANT MOBILE WEB: AN AMP PRIMER So many network requests! 📱 🖥 50% of pages involve > 76 requests
  19. 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. 20. Tested From: Dulles, VA, “Good 2G speed” Chrome - Emulated Motorola G (Gen 4)📱 webpagetest.org Case Study: Adobe Typekit Blog
  21. 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. 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. 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. 24. INSTANT MOBILE WEB: AN AMP PRIMER ' Challenge #3: JS doing all the heavy lifting
  25. 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. 26. JS INSTANT MOBILE WEB: AN AMP PRIMER Case Study: Apple.com ▸ "good 3G" connection ▸ 10x CPU slowdown HTML CSS IMG IMG
  27. 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. 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. 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. 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. 31. 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
  32. 32. INSTANT MOBILE WEB: AN AMP PRIMER AMP + Progressive Web Apps https://www.ampproject.org/docs/guides/pwa-amp/amp-to-pwa
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. INSTANT MOBILE WEB: AN AMP PRIMER 🎉 Thank you! 🎉 Questions? 🤔 Twitter & Github: @lisaychuang Email: lisa.yc.huang@gmail.com

×