Web Performance - Learnings from Velocity Conference

838 views

Published on

Web Performance - These are my Learnings from Velocity Conference.

Published in: Technology, Design
  • Be the first to comment

Web Performance - Learnings from Velocity Conference

  1. 1. Web Performance Learning's from Velocity Conference- New York Hardik Shah @hardikjs Blog
  2. 2. Follow • • • • • • • • • • • Steve Souders @Souders Jake Archibald @jaffathecake Patrick Meenan @PatMeenan Ilya Grigorik @igrigorik Tim Kadlec @tkadlec Andy Davies @andydavies Phillipe Le Hegaret @plhw3org Seth Walker @sethwalker Colt McAnlis @duhroach Guy Podjarny @guypod John Allspaw @allspaw
  3. 3. Favorite Quotes from Velocity • Don't optimize anything unless you measure it – Patrick Meenan • Don’t take performance advice. Test it – Jake Archibald • Embrace the pain. Become a performance masochist – Tim Kadlec
  4. 4. 4 Things • • • • Testing User Perception & Working Backwards Rendering Performance Culture
  5. 5. Testing Performance • Synthetic Monitoring - Synthetic monitoring is website monitoring that is done using a web browser emulation or scripted real browsers. Behavioral scripts are created to simulate an action or path that customer or end user would take on the site. Those paths are then continuously monitored for performance, such as availability and response times.(wikipedia) • Real User Monitoring – Passive monitoring technique that records all user interactions
  6. 6. Synthetic Monitoring
  7. 7. Home Wifi(century link)
  8. 8. AT&T LTE
  9. 9. Company network speed • Generally 80-130Mbps Download speed
  10. 10. Average US Connection Speed 7.4Mbps We need to get the environment right http://www.dslreports.com/shownews/Average-US-Connection-Speed-Now-74-Mbps-123988
  11. 11. Bandwidth is not the only factor… we need to consider Round Trip Time (RTT) ! https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
  12. 12. Tools to measure performance • Webpagetest.org • HTTPWatch for Mobile Other Vendors: - Keynote - Catchpoint - Appurify - AppNeta
  13. 13. Demo of WebPageTest
  14. 14. Speed, Performance & Human Perception Delay User reaction 0 - 100 ms Instant 100 - 300 ms Feels sluggish 300 - 1000 ms Machine is working... 1 s+ Mental context switch 10 s+ I'll come back later... Speed, performance and human perception
  15. 15. Is it important to meet user’s perception?
  16. 16. If we were given a budget of 1000ms budget on Mobile… Let’s work backward and identify where we spend our time Ilya Grigorik from Google
  17. 17. Input Latency - Hardware 55-120+ ms for hardware to register the touch event! (ouch...)
  18. 18. Input Latency - Software Is it a tap, double tap, drag, flick? Let’s wait a bit to find out… To be exact, let’s wait ~300 ms! ● <meta name=”viewport” content=”user-scalable=no”> ○ ○ Disables pinch zoom, fires tap event immediately. Chrome is working on a more aggressive strategy… ● For older browsers, you can use FastClick to override this behavior.
  19. 19. Firing up the radio LTE Idle to connected latency User-plane one-way latency HSPA+ 3G < 100 ms < 100 ms < 2.5 s < 5 ms < 10 ms < 50 ms
  20. 20. Core Network Latency LTE AT&T core network latency HSPA+ HSPA EDGE GPRS 40-50 ms 50-200 ms 150-400 ms 600-750 ms 600-750 ms
  21. 21. Short Life of Web Request • • • • • DNS lookup to resolve the hostname to IP address New TCP connection requiring a full roundtrip to the server TLS handshake (not shown) with up to two extra server roundtrips! HTTP request requiring a full roundtrip to the server Server processing time
  22. 22. Let's fetch 40 KB over a new TCP connection • • • • 5 Mbps connection 200 ms roundtrip time 100 ms server processing time IW10 means ~14KB in first RTT
  23. 23. Input latency Hardware 55 - 120+ ms Software 0 - 300 ms 3G (200 ms 4G(100 ms RTT) RTT) Control plane (200-2500 ms) (50-100 ms) DNS lookup 200 ms 100 ms TCP Connection 200 ms 100 ms TLS handshake (200-400 ms) (100-200 ms) 40 KB HTTP 200 ms * request 3 100 ms * 3 1055 4300 ms 555 1220 ms Congrats, we’ve just fetched 40KB!
  24. 24. Critical Rendering • Optimizing Critical Rendering Path – Rendering critical path(html) from the server – Inline Critical CSS in head http://www.youtube.com/watch?v=0nwopEYFhko – Data URI’s http://www.youtube.com/watch?v=8hrtMOGXjAo – Lazy Load Everything else
  25. 25. Prebrowsing The browser is already trying to predict and anticipate user activity, but you have the app-specific insights -- leverage them! Help the browser with: 1. <link rel="dns-prefetch" href="hostname_to_resolve.com"> Pre-resolve DNS hostnames for assets later in the page! (Most browsers) 2. <link rel="subresource" href="/javascript/myapp.js”> Initiate early resource fetch for current navigation (Chrome only) 3. <link rel="prefetch" href="/images/big.jpeg”> Prefetch asset for a future navigation, place in cache… (Most browsers) 4. <link rel="prerender" href="//example.org/next_page.html”> Prerender page in background tab for future navigation
  26. 26. Rendering without Lumps • Web Performance have always been about delivering pixels on time, but the target has shifted. Optimizing pure JavaScript (loop, string concatenation, arithmetic) is less relevant, performance gains are to be found in DOM, layout dependencies, and interaction with the GPU – Jake Archibald
  27. 27. Chrome Dev Tools Demo
  28. 28. What works in one browser, may not work in other browsers, so its really important to test before we commit to a particular solution
  29. 29. Joys of Static Memory JavaScript • Lots of Garbage collection happening • Garbage collection takes some time • Static memory JS is a technique which involves preallocating at the start of our app • Object Pool (allocate or deallocate C++ style)
  30. 30. W3C Performance Group • Navigation and Resource timing (window.performance.timing) • User timing window.performance.mark(), .measure() • Page Visibility (document.hidden) • requestAnimationFrame • .now(in sub milliseconds)
  31. 31. What’s Next • Navigation Timing 2 (Network interface on/off timings) • Pre-render (preemptively fetching and load the specific resource) • Resource Priorities (lazyload and postpone) • Beacon (asynchronous transfer of data from user agent to web server) • Diagnostics: Error window.performance.getEntriesByType(“error”) • Javascript Preflight injection (Monitoring Web Applications) • Display Performance & Async Scroll – FrameRate of Display paint – Monitor scroll performance of the viewport
  32. 32. Performance Culture • Everyone is responsible for performance • Publish metrics data as you would publish financial data • Celebrate performance success as you would when you get more users or deliver new features
  33. 33. Finally… Let’s attack performance problems from all the sides. Be Awesome!
  34. 34. References • Most of the stuff is taken from the presentations(slides) I saw at Velocity. – http://velocityconf.com/velocityny2013/public/sc hedule/proceedings – http://jakearchibald.com/ – http://www.igvita.com/ – http://blog.patrickmeenan.com/ – http://stevesouders.com/
  35. 35. Thanks!

×