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
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
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
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
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
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/
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.