Transcript
Page 1: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Waterfall AntiPatterns

Boston Web Performance GroupApril 11, 2013

Rick ViscomiPerformance Engineer

Page 2: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

About Me

● Performance EngineerScripps Networks Interactive○ Food Network○ Travel Channel○ HGTV

● Open source developer○ trunk8○ red dwarf

Page 3: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Web Performance

Page 4: Waterfall Anti-Patterns - Web Performance Analysis (Boston)
Page 7: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Waterfall AntiPatterns

Page 8: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Anatomy of a Request

● DNS Lookup● Initial Connection● SSL Negotiation● TTFB● Content Download

Page 9: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

HTTP Responses

● 301 Moved Permanently● 302 Found

Page 10: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

HTTP Responses

● 304 Not Modified

● Cache static content with long TTL○ Cache-Control: max-age=31536000

Last-Modified: Thu, 11 Apr 2013 15:17:34 GMT

● Cache busting○ style_20130412.css

Page 11: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

HTTP Responses

● 404 Not Found

Extra Credit: What happened here?

Page 13: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Navigation Timing

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

Page 14: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Navigation Timing

Page 15: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Navigation Timing

Page 16: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Navigation Timing

Page 17: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Request Serialization

● "stair step" pattern

● many requests

● few connections○ 2 - 6

● HTTP 2.0?

Page 18: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Request Serialization

Connection View

cssjavascriptimagesflash

Page 19: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Request Serialization

Connection View

cssjavascriptimagesflash

Page 20: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Closed Connections

● TCP overhead

● Enable Keep-Alive

Page 21: Waterfall Anti-Patterns - Web Performance Analysis (Boston)
Page 23: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Summary

● waterfall slope● request components● HTTP responses

○ redirects○ conditional GETs○ errors

● page load events● request concurrency● network utilization

Page 24: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Thank You

Rick Viscomijrvis.com

@rick_viscomi

Hands-OnWeb Performance

Optimization Workshop

Coming Soon:

June 18, 2013Santa Clara, CA

Page 25: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Preview: Worst of WebPagetest

● 46 requests○ 5 successful

● 21 seconds to Start Render

● 30% gzip savings

www.aplia.com

Page 26: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Preview: Worst of WebPagetest

● 443 requests

● 8,000 DOM elements

● 1.6 MB of JavaScript

● 75 unique domains

coder143.com

Page 27: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Preview: Worst of WebPagetest

● 2 MB page weight

● 26 second load time

● 17 second repeat view

www.taboradelaide.edu.au/

Page 28: Waterfall Anti-Patterns - Web Performance Analysis (Boston)

Thank You

Rick Viscomijrvis.com

@rick_viscomi

Hands-OnWeb Performance

Optimization Workshop

Coming Soon:

June 18, 2013Santa Clara, CA


Top Related