Waterfall AntiPatterns
Google Developers LiveJune 13, 2013
Rick ViscomiWeb Developer, YouTube
Web Performance
1 2 3 4 5 6 7 8 9
9 runs
Median Selection
1 2 3 4 5 6 7 8 9 10
10 runs
1 2 3 4 5 6 7 8 9
9 runs
Median Selection
1 2 3 4 5 6 7 8 9 10
10 runs
Waterfall AntiPatterns
Anatomy of a Request
● DNS Lookup● Initial Connection● SSL Negotiation● TTFB● Content Download
HTTP Responses: Redirects
● 301 Moved Permanently● 302 Found
HTTP Responses: Not Modified
● Conditional GET
● Cache static content with long TTL○ Cache-Control: max-age=31536000
Last-Modified: Thu, 13 Jun 2013 15:17:34 GMT
● Cache busting○ style_20130614.css
HTTP Responses: Errors
● 404 Not Found
Extra Credit: What happened here?
Canceled Requests
Internet Explorer only »
Navigation Timing
● domContentLoaded* (document.ready)● Start Render (first paint)● loadEvent* (onload)● Document Complete (loadEventStart)* Chrome and Firefox only
Navigation Timing
Navigation Timing
Navigation Timing
Request Serialization
● "stair step" pattern
● many requests
● few connections○ 2 - 6
● HTTP 2.0?
Request Serialization
Connection View
cssjavascriptimagesflash
Request Serialization
Connection View
cssjavascriptimagesflash
Closed Connections
● TCP overhead
● Enable Keep-Alive
≈
Network Silence
● bandwidth utilization low
● CPU utilization high○ why?
Demo
Summary
● waterfall slope● request components● HTTP responses
○ redirects○ conditional GETs○ errors
● page load events● request concurrency● network utilization
Preview: Worst of WebPagetest
● 46 requests○ 5 successful
● 21 seconds to Start Render
● 30% gzip savings
www.aplia.com
Preview: Worst of WebPagetest
● 443 requests
● 8,000 DOM elements
● 1.6 MB of JavaScript
● 75 unique domains
coder143.com
Preview: Worst of WebPagetest
● 2 MB page weight
● 26 second load time
● 17 second repeat view
www.taboradelaide.edu.au/
Preview: Worst of WebPagetest
● 1.4 seconds to first byte
● 4.3 seconds of orange
● 84% images or JS
comoeliminarlasestrias.org
Further Reading
High PerformanceBrowser Networking
Ilya Grigorik
WPT Documentation● sites.google.com/.../docs/
Make the Web Faster● developers.google.com/speed/
Planet Performance● perfplanet.com
Thank You
Rick [email protected]+Rick Viscomi@rick_viscomi
Hands-OnWeb Performance
Optimization Workshop
Coming Soon:
June 18, 2013Santa Clara, CA
