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!