web performance - learnings from velocity conference
DESCRIPTION
Web Performance - These are my Learnings from Velocity Conference.TRANSCRIPT
Web Performance
Learning's from Velocity Conference- New York
Hardik Shah @hardikjs Blog
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
• 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
Favorite Quotes from Velocity
• Testing• User Perception & Working Backwards• Rendering• Performance Culture
4 Things
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
Synthetic Monitoring
Home Wifi(century link)
AT&T LTE
Company network speed
• Generally 80-130Mbps Download speed
Average US Connection Speed 7.4Mbps
http://www.dslreports.com/shownews/Average-US-Connection-Speed-Now-74-Mbps-123988
We need to get the environment right
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/
Tools to measure performance
• Webpagetest.org• HTTPWatch for Mobile
Other Vendors:- Keynote- Catchpoint- Appurify- AppNeta
Demo of WebPageTest
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
Is it important to meet user’s perception?
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
Input Latency - Hardware
55-120+ ms for hardware to register the touch event!
(ouch...)
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.
Firing up the radio
LTE HSPA+ 3G
Idle to connected latency < 100 ms
< 100 ms < 2.5 s
User-plane one-way latency
< 5 ms < 10 ms < 50 ms
Core Network Latency
LTE HSPA+ HSPA EDGE GPRS
AT&T core network latency
40-50 ms 50-200 ms 150-400 ms
600-750 ms
600-750 ms
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
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
3G (200 ms RTT)
4G(100 ms 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 request
200 ms * 3
100 ms * 3
1055 - 4300 ms
555 - 1220 ms
Congrats, we’ve just fetched 40KB!
Input latency
Hardware 55 - 120+ ms
Software 0 - 300 ms
Critical Rendering
• Optimizing Critical Rendering Path– Rendering critical path(html) from the server– Inline Critical CSS in headhttp://www.youtube.com/watch?v=0nwopEYFhko
– Data URI’s http://www.youtube.com/watch?v=8hrtMOGXjAo
– Lazy Load Everything else
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
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
Chrome Dev Tools Demo
What works in one browser, may not work in other browsers, so its really important to test before we
commit to a particular solution
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)
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)
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
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
Finally…
Let’s attack performance problems from all the sides. Be Awesome!
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/
Thanks!