Waterfall   AntiPatterns    Rick Viscomi    Performance EngineerNY Web Performance Group      February 27, 2013
About Me● Performance Engineer  Scripps Networks Interactive  ○ Food Network  ○ Travel Channel  ○ HGTV● Open source develo...
Web Performance
Waterfall
Waterfall Slope
Waterfall AntiPatterns
Anatomy of a Request●   DNS Lookup●   Initial Connection●   SSL Negotiation●   TTFB●   Content Download
HTTP Responses● 301 Moved Permanently● 302 Found
HTTP Responses      ● 304 Not Modified      ● Cache static content with long TTL        ○   Cache-Control: max-age=3153600...
HTTP Responses● 404 Not FoundExtra Credit: What happened here?
Canceled RequestsInternet Explorer only »
Navigation Timing●    domContentLoaded* (document.ready)●    Start Render (first paint)●    loadEvent* (onload)●    Docume...
Navigation Timing
Navigation Timing
Navigation Timing
Request Serialization                 ● "stair step" pattern                 ● many requests                 ● few connect...
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●...
Thank You               Rick Viscomi                  jrvis.com                @rick_viscomiComing Soon:                  ...
Preview: Worst of WebPagetest                     www.aplia.com            ● 46 requests              ○ 5 successful      ...
Preview: Worst of WebPagetest                    coder143.com               ● 443 requests               ● 8,000 DOM      ...
Preview: Worst of WebPagetest                www.taboradelaide.edu.au/             ● 2 MB page weight             ● 26 sec...
Thank You               Rick Viscomi                  jrvis.com                @rick_viscomiComing Soon:                  ...
Waterfall AntiPatterns - Web Performance Analysis
Waterfall AntiPatterns - Web Performance Analysis
Upcoming SlideShare
Loading in...5
×

Waterfall AntiPatterns - Web Performance Analysis

379
-1

Published on

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/

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
379
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Waterfall AntiPatterns - Web Performance Analysis

  1. 1. Waterfall AntiPatterns Rick Viscomi Performance EngineerNY Web Performance Group February 27, 2013
  2. 2. About Me● Performance Engineer Scripps Networks Interactive ○ Food Network ○ Travel Channel ○ HGTV● Open source developer ○ trunk8 ○ red dwarf
  3. 3. Web Performance
  4. 4. Waterfall
  5. 5. Waterfall Slope
  6. 6. Waterfall AntiPatterns
  7. 7. Anatomy of a Request● DNS Lookup● Initial Connection● SSL Negotiation● TTFB● Content Download
  8. 8. HTTP Responses● 301 Moved Permanently● 302 Found
  9. 9. 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
  10. 10. HTTP Responses● 404 Not FoundExtra Credit: What happened here?
  11. 11. Canceled RequestsInternet Explorer only »
  12. 12. Navigation Timing● domContentLoaded* (document.ready)● Start Render (first paint)● loadEvent* (onload)● Document Complete (loadEventStart)* Chrome and Firefox only
  13. 13. Navigation Timing
  14. 14. Navigation Timing
  15. 15. Navigation Timing
  16. 16. Request Serialization ● "stair step" pattern ● many requests ● few connections ○ 2-6 ● HTTP 2.0?
  17. 17. Request Serialization Connection View cssjavascriptimagesflash
  18. 18. Closed Connections ≈● TCP overhead● Enable Keep-Alive
  19. 19. Network Silence● bandwidth utilization low● CPU utilization high ○ why?Demo
  20. 20. Summary● waterfall slope● request components● HTTP responses ○ redirects ○ conditional GETs ○ errors● page load events● request concurrency● network utilization
  21. 21. Thank You Rick Viscomi jrvis.com @rick_viscomiComing Soon: Hands-On Web Performance Optimization Workshop June 18, 2013 Santa Clara, CA
  22. 22. Preview: Worst of WebPagetest www.aplia.com ● 46 requests ○ 5 successful ● 21 seconds to Start Render ● 30% gzip savings
  23. 23. Preview: Worst of WebPagetest coder143.com ● 443 requests ● 8,000 DOM elements ● 1.6 MB of JavaScript
  24. 24. Preview: Worst of WebPagetest www.taboradelaide.edu.au/ ● 2 MB page weight ● 26 second load time ● 17 second repeat view
  25. 25. Thank You Rick Viscomi jrvis.com @rick_viscomiComing Soon: Hands-On Web Performance Optimization Workshop June 18, 2013 Santa Clara, CA
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×