Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Turbocharging Walmart.com: Speed without compromise

Eb91a436fc26c9864b8ae8e27ee911db?s=47 Vasa
April 01, 2020

Turbocharging Walmart.com: Speed without compromise

Talk: https://www.youtube.com/watch?v=vB8JUx9Dp08
eCommerce market is highly competitive and site speed plays a major role in improving overall buying experience and fulfilling user needs. In most companies there is always a constant push and pull towards spending time adding new features vs improving performance. There are also constraints around 3rd party integrations, ads & making changes happen across various teams can also be a challenge. In this talk we're going to look into ways by which you can smartly improve performance without cutting down on features and without changing much of the user's experience. We'll talk about different modern techniques that helped improve Walmart.com's speed and how understanding user behavior can go a long way in optimizing performance.

Eb91a436fc26c9864b8ae8e27ee911db?s=128

Vasa

April 01, 2020
Tweet

Transcript

  1. Turbocharging Walmart.com: Speed without compromise Vasanth Krishnamoorthy v a s

    a n t h _ k v a s a n t h k
  2. Focus Areas 7 Key Optimizations Approaching Performance Guardrails for Performance

  3. Over 30% growth YoY 100 million+ customers per month

  4. Performance as a Measure Of User Happiness

  5. Home Page Search Product Page Cart Checkout Tech Stack Typical

    Customer Journey
  6. Customer Journey TTI - 95th %ile mobile web 42% Improvement

  7. PART 1 Approaching Performance

  8. Where do you start?

  9. “You can’t improve what you don’t measure”

  10. Measure What Matters TTI – Time to interactive (custom) TTFB

    – Time to first byte TLOAD - Page is fully loaded (custom) TTFB TTI TLOAD
  11. Define Your Scope

  12. Define Your Scope & Constraints 01 02 03 No compromise

    to existing product features No slowdown on new product features being built No big rewrites or tech stack changes
  13. Identify The Right Opportunities

  14. Empathize With Your Users Use data to understand user pain

    points Understand common user flows Step progression User distribution by browsers/devices/connection Revenue distribution by browsers & platform
  15. Audit Your Application Chrome’s Dev Tools WebPageTest & Lighthouse Webpack

    Bundle Analyzer Make visible the invisible
  16. Apply First Principles

  17. Principles of Web Performance 1 2 3 Do only what

    is needed Minimize round trip time Optimize Perceived Performance
  18. PART 2 7 Key Optimizations

  19. Do only what is needed

  20. Reduce Bundle Size

  21. Code Splitting & Lazy Loading Cumulative TTI Improvement 18.2% “Get

    it when you need it” Component centric code splitting via dynamic imports (ES2020) Code split user/item specific feature code Lazy load components which are below the fold TTI 18.2% 1
  22. Code Splitting - Learnings Duplicates in chunks Our sweet spot

    < 15 split bundles Aggressive code splitting increased overall bytes downloaded Reduced Compression Cumulative TTI Improvement 18.2% 1
  23. Slim Down Libraries Recompose React API / Hooks 5KB Upgrade

    from Webpack v3 to v4 reduced bundle size by 10% Cumulative TTI Improvement 18.2% TTI 9.7% From Switch To Gains (compressed) Moment.js date-fns 50KB React v15 React v16 15KB React-Intl Custom utility 14KB 26.1% 2
  24. 26.1% Differential Serving Enables us to serve modern JS code

    to users Why do we need it? • Transformed ES5 code is verbose (more KB) • Cut down on polyfills needed (~35KB for us) Cumulative TTI Improvement TTI 3.3% 28.5% 3
  25. Differential Serving Module No-Module Pattern 3 26.1% Cumulative TTI Improvement

    28.5%
  26. Differential Serving - Learnings On a few browser versions both

    ES5 & ES6 scripts were downloaded/executed leading to degraded experience for those customers Problem 3 26.1% Cumulative TTI Improvement 28.5%
  27. Differential Serving - Learnings On Server side, we check for

    the user agent passed and depending on whether the browser supports modern syntax or not we include the right bundle into the page. Solution 3 26.1% Cumulative TTI Improvement 28.5%
  28. Minimize round trip time

  29. Sharing is caring for our users

  30. Shared Bundles 1P/3P bundles • Shared across whole site Webpack

    DLL Plugin Functional shared bundles • Shared across Cart & Checkout TTI 10.2% 25.8% Cumulative TTI Improvement 35.8% 4
  31. Shared Bundles - Learnings Needs unification of package versions across

    applications Updates to shared bundles require coordination with multiple teams Functional shared bundles Updates frequently and requires changes across all shared web-apps Testing/validations & Release effort 1P/3P shared bundle Cumulative TTI Improvement 28.5% 35.8% 4
  32. Shared Header/Footer Header/Footer package was bundled into each app leading

    to bloat Any change required testing/validation & deployments across for all teams Problem 5
  33. Shared Header/Footer Solution Endpoint returning header/footer HTML Fragment Markup &

    bundles get cached Render Header/Footer & rest of the App in parallel during SSR 5
  34. 35.8% Shared Header/Footer 70% reduction in client side JS Cumulative

    TTI improvement TTI 8.1% Reuse existing code and render with React on Server Side Use Vanilla JS for handling events on client Optimization 41% 5
  35. 41% Brotli Compression 12% smaller bundles than GZIP Cumulative TTI

    Improvement TTI 9.8% “It’s like GZIP on steroids” 46.7% 6
  36. Brotli Compression – Learnings For Best Perf - Pre-build compressed

    assets and serve it from a CDN to save the runtime cost. Dynamic compression can be slow 41% Cumulative TTI Improvement 46.7% 6
  37. For Differential Serving Brotli compressed ES5 bundles pretty well ES6

    vs ES5 bundle difference dropped from 10% to 4%* *YMMV Brotli Compression - Learnings 41% Cumulative TTI Improvement 46.7% 6
  38. Optimize Perceived Performance

  39. 46.7% <script> Leverage Priorities & Resource Hints <script async> <script

    defer> TTI 5.7% Cumulative TTI improvement HTML parsing HTML parsing paused Script download Script execution 49.7% 7
  40. Leverage Priorities & Resource Hints Tells the browser to download

    and cache a resource to have them available for execution when it is needed 46.7% Cumulative TTI Improvement 49.7% 7
  41. Leverage Priorities & Resource Hints dns-prefetch DNS lookup preconnect DNS

    lookup, TLS negotiation, and TCP handshake 46.7% Cumulative TTI Improvement 49.7% 7
  42. Can we make it faster?

  43. “The fastest HTTP request is the one not made”

  44. Prefetch Downloads scripts with lower priority & stores it in

    prefetch cache Cached for at least 5mins Does not execute JS Cumulative TTI Improvement 49.7% TTI 12.1% 55.8% 8
  45. Prefetch - Learnings Problem Impacts current page’s load times Workaround

    • We include prefetch tags into the page after onLoad event is fired • We do not prefetch if the user has data saver on Cumulative TTI Improvement 49.7% 55.8% 8
  46. Video Comparison Before After

  47. Key Takeaways

  48. Perf Optimizations – Key Takeaways Reduce Bundle Size • Code

    Splitting & Lazy Loading • Slim down libraries • Differential Serving Shared bundles • 1P/3P & functional shared bundles • Header/Footer HTML fragment Better compression • Brotli Priorities & resource hints • Prefer defer over async • dns-prefetch & preconnect • Prefetch Font Optimization • Remove unused glyphs & styles • WOFF & WOFF2 for better compression Image • Lazy load images • WEBP • SVG Redux State transfer optimization • Send state to client in an inert tag Other Cleanup • Code which you have always wanted to delete. You know what they are J Cumulative TTI Improvement 55.8% 60%
  49. Perf Improvements Over Time TTI Time (months) What you think

    it was What it actually was
  50. Challenges 3rd Party Scripts: Ads, Marketing Tags Cross-team initiatives Time

    to complete A/B Tests Performance Regressions
  51. Guardrails For Performance PART 3

  52. Performance Budgets TTFB Speed Index TTI Page Complete

  53. Performance Metrics Per PR Bundle Size check at PR

  54. Performance Metrics Per PR View perf metrics over time Lighthouse

    metrics for each PR
  55. Compare Metrics Across Branches Teams can compare branch performance to

    production performance Click through commits and see what caused the degradation Results used to accept or reject release
  56. Sustaining A Performance Culture Embed performance thinking early in the

    product development process Use tooling and data to help drive decisions on performance tradeoffs Maintain gains by monitoring key metrics, tooling and having guardrails Recognize performance is hard and there will be tradeoffs
  57. The Team Bryan Morgan Ah Hyun Cho Hiren Patel Madhav

    Deverkonda Test Armada & Torbit Team Denys Mikhalenko Gauri Shankar Rodrigo Delgado Jon Campbell Uma Mahesh Cory Dang Meet Parikh Megha Gupta Patrick Stapleton Vijay Muniswamy
  58. Future Plans 01 03 04 02 Progressive Web App (PWA)

    Experimenting with alternative UI libraries Streaming SSR Different experiences based on Speed Profiles
  59. Performance Is A Journey, Not A Destination

  60. THANK YOU va s a nth_ k va s a

    nthk