You've been asked to investigate why your web site is loading slowly. You've heard of WebPagetest.org so you enter the URL and run a test. What appears next is a colorful chart that looks like a Dr. Seuss illustration. Some bars are long, some are short. Some bars are blue, some are green. "That's nice," you say to yourself, wondering what to do next. It looks benign, innocently simple. But you know it holds many secrets. The waterfall chart is a mysterious force to some developers. Performance gurus seem to be able to divine the ailments of a slow site at one quick glance. "How?" you wonder. The reality is that anyone can read a waterfall chart - if they know that they are looking for. This presentation will bestow upon you the ability to recognize specific patterns in a waterfall chart, patterns which are the signs of a slow site. Using these newfound skills, you will become that performance guru and everyone will rejoice. Presented to the NY Web Performance Group on February 27, 2013. http://www.meetup.com/Web-Performance-NY/events/101056702/

1. Waterfall
AntiPatterns
Rick Viscomi
Performance Engineer
NY Web Performance Group
February 27, 2013

2. About Me
● Performance Engineer
Scripps Networks Interactive
○ Food Network
○ Travel Channel
○ HGTV
● Open source developer
○ trunk8
○ red dwarf

3. Web Performance

5. Waterfall

6. Waterfall Slope

7. Waterfall AntiPatterns

8. Anatomy of a Request
● DNS Lookup
● Initial Connection
● SSL Negotiation
● TTFB
● Content Download

9. HTTP Responses
● 301 Moved Permanently
● 302 Found

10. HTTP Responses
● 304 Not Modified
● Cache static content with long TTL
○ Cache-Control: max-age=31536000
Last-Modified: Wed, 27 Feb 2013 15:17:34
GMT
● Cache busting
○ style_20130228.css

11. HTTP Responses
● 404 Not Found
Extra Credit: What happened here?

12. Canceled Requests
Internet Explorer only »

13. Navigation Timing
● domContentLoaded* (document.ready)
● Start Render (first paint)
● loadEvent* (onload)
● Document Complete (loadEventStart)
* Chrome and Firefox only

14. Navigation Timing

15. Navigation Timing

16. Navigation Timing

17. Request Serialization
● "stair step" pattern
● many requests
● few connections
○ 2-6
● HTTP 2.0?

18. Request Serialization
Connection View
cssjavascriptimagesflash

19. Closed Connections
≈
● TCP overhead
● Enable Keep-Alive

21. Network Silence
● bandwidth utilization low
● CPU utilization high
○ why?
Demo

22. Summary
● waterfall slope
● request components
● HTTP responses
○ redirects
○ conditional GETs
○ errors
● page load events
● request concurrency
● network utilization

23. Thank You
Rick Viscomi
jrvis.com
@rick_viscomi
Coming Soon:
Hands-On
Web Performance
Optimization
Workshop
June 18, 2013
Santa Clara, CA

24. Preview: Worst of WebPagetest
www.aplia.com
● 46 requests
○ 5 successful
● 21 seconds to Start
Render
● 30% gzip savings

25. Preview: Worst of WebPagetest
coder143.com
● 443 requests
● 8,000 DOM
elements
● 1.6 MB of JavaScript

26. Preview: Worst of WebPagetest
www.taboradelaide.edu.au/
● 2 MB page weight
● 26 second load time
● 17 second repeat view

27. Thank You
Rick Viscomi
jrvis.com
@rick_viscomi
Coming Soon:
Hands-On
Web Performance
Optimization
Workshop
June 18, 2013
Santa Clara, CA