Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Optimize Web Performance by Learning from Velocity Conference
Similar to Optimize Web Performance by Learning from Velocity Conference (20)
Recently uploaded
Recently uploaded (20)
Optimize Web Performance by Learning from Velocity Conference
- 1. Web Performance Learning's from Velocity Conference- New York Hardik Shah @hardikjs Blog
- 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. 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 Things • • • • Testing User Perception & Working Backwards Rendering Performance Culture
- 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
- 8. AT&T LTE
- 9. Company network speed • Generally 80-130Mbps Download speed
- 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. 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. Tools to measure performance • Webpagetest.org • HTTPWatch for Mobile Other Vendors: - Keynote - Catchpoint - Appurify - AppNeta
- 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. Is it important to meet user’s perception?
- 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. Input Latency - Hardware 55-120+ ms for hardware to register the touch event! (ouch...)
- 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. 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. 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. 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. 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. 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. 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. 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. 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
- 28. Chrome Dev Tools Demo
- 29. What works in one browser, may not work in other browsers, so its really important to test before we commit to a particular solution
- 30. 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)
- 31. 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)
- 32. 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
- 33. 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
- 34. Finally… Let’s attack performance problems from all the sides. Be Awesome!
- 35. 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/
- 36. Thanks!
Editor's Notes
- They are awesome and always have something to say on twitter.
- I’ll be concentrating on this 4 things in my presentation
- Synthetic monitoring is a pretty powerful technique to identify regressions and is largely in our control. Let’s say I add twitter button tomorrow. How much latency does it add. What is its effect in our rendering.
- If we make an analogy between plumbing & internet, we consider bandwidth of the internet to be like the diameter of water pipe. A large pipes carries large amount of water. At the same time, if the pipe is empty and you want to get water from one point to another it takes time too….
- Onloadvs First load5MbpsMobile
- You have your mental context switch at 1s+There are a lot of competitors offering compelling products.
- This talk was pretty awesome. Although I need to research some more here.Garbage collection event happens only when the browser realizes that there are a lot of inactive objects. Garbage collection does take some time. So if we can somehow prevent the garbage collection from happening by eliminating as many cases of excessive object creation and release as you can.Static memory JS is a technique that involves preallocating at the start of your app, all the memory required for its lifetime. Basically creating a new data structure call object pool. We allocate the object and free them again.
- Not all browsers support this. Safari does not support performance timingapinavigationStart, requestStart - https://developer.mozilla.org/en-US/docs/Navigation_timingrequestAnimationFrame - http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/.Date.now – gives you time in milliseconds. Now its in sub milliseconds
- These are just some of the ideas the w3c group has. And this will probably take more than a year to even see some of this in the browser.Beacon – User agents ignore asynchronous XMLHTTPRequests made in unload handler.
- Etsy has done a pretty amazing job with this.
- Mlb.com has gained a whopping 600% increase in traffic by getting the Video Streaming performance rightIntuit has seen a 10% increase in Order pipelines by improving performance.