The document summarizes key learnings from the Velocity Conference in New York about improving web performance. It discusses the importance of measuring performance before optimizing, testing sites using WebPageTest, identifying sources of latency on mobile, optimizing the critical rendering path by rendering critical content on the server and lazy loading other content, and new browser APIs for performance timing and page visibility.

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!