This is the lightning talk I gave at Seattle Google Dev Group.

1. Web Performance
Learning's from Velocity Conference- New York
Hardik Shah
@hardikjs
http://hardikjs.wordpress.com

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

3. Summary
•
•
•
•
Testing – WebPageTest
Latency on Mobile
Optimizing Critical Rendering Path
New API’s for Web Development

4. Testing
WebPageTest.org Demo

5. If we were given a budget of 1000ms
on Mobile…
Let’s work backward and identify where we spend our time
Ilya Grigorik from Google

6. Input
latency
Hardware 55 - 120+
ms
Software
0 - 300
ms
3G (200 ms
4G(100 ms
RTT)
RTT)
Cell Network (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
These are the
latency you
will encounter
when
someone
clicks a URL
on phone

7. Critical Rendering
• Optimizing Critical Rendering Path
– Render critical path(html) on the server
– Inline Critical CSS in head
– Data URI’s (for images)
– Lazy Load Everything else

8. New API’s available in Latest
Implementation of Browsers
• window.performance.timing
• Page Visibility (document.hidden)

9. References
– http://velocityconf.com/velocityny2013/public/sc
hedule/proceedings
– http://jakearchibald.com/
– http://www.igvita.com/
– http://blog.patrickmeenan.com/
– http://stevesouders.com/

10. Thanks!