waterfall antipatterns - web performance analysis (san francisco)
DESCRIPTION
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 San Francisco Web Performance Group on June 6, 2013. http://www.meetup.com/SF-Web-Performance-Group/events/121034862/TRANSCRIPT
![Page 1: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/1.jpg)
Waterfall AntiPatterns
San Francisco Web Performance Group
June 6, 2013
Rick ViscomiPerformance Engineer
![Page 2: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/2.jpg)
About Me
● Web Developer○ YouTube○ Google
● Performance Engineer○ Food Network○ Travel Channel○ HGTV
● Open source developer○ trunk8 ○ red dwarf
jrvis.com
![Page 3: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/3.jpg)
Web Performance
![Page 4: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/4.jpg)
![Page 7: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/7.jpg)
Waterfall AntiPatterns
![Page 8: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/8.jpg)
Anatomy of a Request
● DNS Lookup● Initial Connection● SSL Negotiation● TTFB● Content Download
![Page 9: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/9.jpg)
HTTP Responses: Redirects
● 301 Moved Permanently● 302 Found
![Page 10: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/10.jpg)
HTTP Responses: Not Modified
● Conditional GET
● Cache static content with long TTL○ Cache-Control: max-age=31536000
Last-Modified: Thu, 06 Jun 2013 15:17:34 GMT
● Cache busting○ style_20130606.css
![Page 11: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/11.jpg)
HTTP Responses: Errors
● 404 Not Found
Extra Credit: What happened here?
![Page 12: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/12.jpg)
Canceled Requests
Internet Explorer only »
![Page 13: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/13.jpg)
Navigation Timing
● domContentLoaded* (document.ready)● Start Render (first paint)● loadEvent* (onload)● Document Complete (loadEventStart)* Chrome and Firefox only
![Page 14: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/14.jpg)
Navigation Timing
![Page 15: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/15.jpg)
Navigation Timing
![Page 16: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/16.jpg)
Navigation Timing
![Page 17: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/17.jpg)
Request Serialization
● "stair step" pattern
● many requests
● few connections○ 2 - 6
● HTTP 2.0?
![Page 18: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/18.jpg)
Request Serialization
Connection View
cssjavascriptimagesflash
![Page 19: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/19.jpg)
Request Serialization
Connection View
cssjavascriptimagesflash
![Page 20: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/20.jpg)
Closed Connections
● TCP overhead
● Enable Keep-Alive
≈
![Page 21: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/21.jpg)
![Page 22: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/22.jpg)
Network Silence
● bandwidth utilization low
● CPU utilization high○ why?
Demo
![Page 23: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/23.jpg)
Summary
● waterfall slope● request components● HTTP responses
○ redirects○ conditional GETs○ errors
● page load events● request concurrency● network utilization
![Page 24: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/24.jpg)
Thank You
Rick [email protected]@rick_viscomi
Hands-OnWeb Performance
Optimization Workshop
Coming Soon:
June 18, 2013Santa Clara, CA
![Page 25: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/25.jpg)
Preview: Worst of WebPagetest
● 46 requests○ 5 successful
● 21 seconds to Start Render
● 30% gzip savings
www.aplia.com
![Page 26: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/26.jpg)
Preview: Worst of WebPagetest
● 443 requests
● 8,000 DOM elements
● 1.6 MB of JavaScript
● 75 unique domains
coder143.com
![Page 27: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/27.jpg)
Preview: Worst of WebPagetest
● 2 MB page weight
● 26 second load time
● 17 second repeat view
www.taboradelaide.edu.au/
![Page 28: Waterfall AntiPatterns - Web Performance Analysis (San Francisco)](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589b2ecd8b42a84258b46f0/html5/thumbnails/28.jpg)
Thank You
Rick [email protected]@rick_viscomi
Hands-OnWeb Performance
Optimization Workshop
Coming Soon:
June 18, 2013Santa Clara, CA