WaterfallAntiPatternsGoogle Developers LiveJune 13, 2013Rick ViscomiWeb Developer, YouTube
Web Performance
1 2 3 4 5 6 7 8 99 runsMedian Selection1 2 3 4 5 6 7 8 9 1010 runs
1 2 3 4 5 6 7 8 99 runsMedian Selection1 2 3 4 5 6 7 8 9 1010 runs
Waterfall
Waterfall Slope
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=31536000Last-Mod...
HTTP Responses: Errors● 404 Not FoundExtra Credit: What happened here?
Canceled RequestsInternet Explorer only »
Navigation Timing● domContentLoaded* (document.ready)● Start Render (first paint)● loadEvent* (onload)● Document Complete ...
Navigation Timing
Navigation Timing
Navigation Timing
Request Serialization● "stair step" pattern● many requests● few connections○ 2 - 6● HTTP 2.0?
Request SerializationConnection Viewcssjavascriptimagesflash
Request SerializationConnection Viewcssjavascriptimagesflash
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● reque...
Preview: Worst of WebPagetest● 46 requests○ 5 successful● 21 seconds to StartRender● 30% gzip savingswww.aplia.com
Preview: Worst of WebPagetest● 443 requests● 8,000 DOMelements● 1.6 MB of JavaScript● 75 unique domainscoder143.com
Preview: Worst of WebPagetest● 2 MB page weight● 26 second load time● 17 second repeat viewwww.taboradelaide.edu.au/
Preview: Worst of WebPagetest● 1.4 seconds to first byte● 4.3 seconds of orange● 84% images or JScomoeliminarlasestrias.org
Further ReadingHigh PerformanceBrowser NetworkingIlya GrigorikWPT Documentation● sites.google.com/.../docs/Make the Web Fa...
Thank YouRick Viscomirick@jrvis.com+Rick Viscomi@rick_viscomiHands-OnWeb PerformanceOptimization WorkshopComing Soon:June ...
Google Developers Live: Waterfall AntiPatterns - Web Performance Analysis
Upcoming SlideShare
Loading in …5
×

Google Developers Live: Waterfall AntiPatterns - Web Performance Analysis

1,319 views

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 on Google Developers Live on June 13, 2013. https://developers.google.com/live/shows/779042419

Published in: Technology, News & Politics
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,319
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Google Developers Live: Waterfall AntiPatterns - Web Performance Analysis

  1. 1. WaterfallAntiPatternsGoogle Developers LiveJune 13, 2013Rick ViscomiWeb Developer, YouTube
  2. 2. Web Performance
  3. 3. 1 2 3 4 5 6 7 8 99 runsMedian Selection1 2 3 4 5 6 7 8 9 1010 runs
  4. 4. 1 2 3 4 5 6 7 8 99 runsMedian Selection1 2 3 4 5 6 7 8 9 1010 runs
  5. 5. Waterfall
  6. 6. Waterfall Slope
  7. 7. Waterfall AntiPatterns
  8. 8. Anatomy of a Request● DNS Lookup● Initial Connection● SSL Negotiation● TTFB● Content Download
  9. 9. HTTP Responses: Redirects● 301 Moved Permanently● 302 Found
  10. 10. HTTP Responses: Not Modified● Conditional GET● Cache static content with long TTL○ Cache-Control: max-age=31536000Last-Modified: Thu, 13 Jun 2013 15:17:34GMT● Cache busting○ style_20130614.css
  11. 11. HTTP Responses: Errors● 404 Not FoundExtra Credit: What happened here?
  12. 12. Canceled RequestsInternet Explorer only »
  13. 13. Navigation Timing● domContentLoaded* (document.ready)● Start Render (first paint)● loadEvent* (onload)● Document Complete (loadEventStart)* Chrome and Firefox only
  14. 14. Navigation Timing
  15. 15. Navigation Timing
  16. 16. Navigation Timing
  17. 17. Request Serialization● "stair step" pattern● many requests● few connections○ 2 - 6● HTTP 2.0?
  18. 18. Request SerializationConnection Viewcssjavascriptimagesflash
  19. 19. Request SerializationConnection Viewcssjavascriptimagesflash
  20. 20. Closed Connections● TCP overhead● Enable Keep-Alive≈
  21. 21. Network Silence● bandwidth utilization low● CPU utilization high○ why?Demo
  22. 22. Summary● waterfall slope● request components● HTTP responses○ redirects○ conditional GETs○ errors● page load events● request concurrency● network utilization
  23. 23. Preview: Worst of WebPagetest● 46 requests○ 5 successful● 21 seconds to StartRender● 30% gzip savingswww.aplia.com
  24. 24. Preview: Worst of WebPagetest● 443 requests● 8,000 DOMelements● 1.6 MB of JavaScript● 75 unique domainscoder143.com
  25. 25. Preview: Worst of WebPagetest● 2 MB page weight● 26 second load time● 17 second repeat viewwww.taboradelaide.edu.au/
  26. 26. Preview: Worst of WebPagetest● 1.4 seconds to first byte● 4.3 seconds of orange● 84% images or JScomoeliminarlasestrias.org
  27. 27. Further ReadingHigh PerformanceBrowser NetworkingIlya GrigorikWPT Documentation● sites.google.com/.../docs/Make the Web Faster● developers.google.com/speed/Planet Performance● perfplanet.com
  28. 28. Thank YouRick Viscomirick@jrvis.com+Rick Viscomi@rick_viscomiHands-OnWeb PerformanceOptimization WorkshopComing Soon:June 18, 2013Santa Clara, CA

×