Google Developers Live: Waterfall AntiPatterns - Web Performance Analysis
Google Developers Live: Waterfall AntiPatterns - Web Performance Analysis
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
More Related Content
Recently uploaded
Recently uploaded(20)
Featured
Featured(20)
Google Developers Live: Waterfall AntiPatterns - Web Performance Analysis
- 1. Waterfall AntiPatterns Google Developers Live June 13, 2013 Rick Viscomi Web Developer, YouTube
- 4. 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
- 5. 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
- 6. Waterfall
- 9. Anatomy of a Request ● DNS Lookup ● Initial Connection ● SSL Negotiation ● TTFB ● Content Download
- 10. HTTP Responses: Redirects ● 301 Moved Permanently ● 302 Found
- 11. 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
- 12. HTTP Responses: Errors ● 404 Not Found Extra Credit: What happened here?
- 13. Canceled Requests Internet Explorer only »
- 14. Navigation Timing ● domContentLoaded* (document.ready) ● Start Render (first paint) ● loadEvent* (onload) ● Document Complete (loadEventStart) * Chrome and Firefox only
- 18. Request Serialization ● "stair step" pattern ● many requests ● few connections ○ 2 - 6 ● HTTP 2.0?
- 21. Closed Connections ● TCP overhead ● Enable Keep-Alive ≈
- 22. Network Silence ● bandwidth utilization low ● CPU utilization high ○ why? Demo
- 23. Summary ● waterfall slope ● request components ● HTTP responses ○ redirects ○ conditional GETs ○ errors ● page load events ● request concurrency ● network utilization
- 24. Preview: Worst of WebPagetest ● 46 requests ○ 5 successful ● 21 seconds to Start Render ● 30% gzip savings www.aplia.com
- 25. Preview: Worst of WebPagetest ● 443 requests ● 8,000 DOM elements ● 1.6 MB of JavaScript ● 75 unique domains coder143.com
- 26. Preview: Worst of WebPagetest ● 2 MB page weight ● 26 second load time ● 17 second repeat view www.taboradelaide.edu.au/
- 27. Preview: Worst of WebPagetest ● 1.4 seconds to first byte ● 4.3 seconds of orange ● 84% images or JS comoeliminarlasestrias.org
- 28. Further Reading High Performance Browser Networking Ilya Grigorik WPT Documentation ● sites.google.com/.../docs/ Make the Web Faster ● developers.google.com/speed/ Planet Performance ● perfplanet.com
- 29. Thank You Rick Viscomi rick@jrvis.com +Rick Viscomi @rick_viscomi Hands-On Web Performance Optimization Workshop Coming Soon: June 18, 2013 Santa Clara, CA