Improving Netflix Performance Experience

10,712 views

Published on

Given at the Velocity 2008 Conference. Covers some of the ways Netflix is approaching improving performance and lessons learned.

Published in: Technology, Design
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
10,712
On SlideShare
0
From Embeds
0
Number of Embeds
676
Actions
Shares
0
Downloads
254
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Improving Netflix Performance Experience

  1. Improving Netflix Performance Bill Scott Director, UI Engineering Netflix June 23, 2008 1
  2. The Plan  Accurately measure the full user experience performance Prior Page Request Response Page Web App  Incrementally improve site performance 2
  3. Measuring: User Experience Performance Tracing Prior Request Response Page Page Web App 3
  4. Measuring: User Experience Performance Tracing A D F G Prior Request Response Page Page Web App 3
  5. Measuring: User Experience Performance Tracing B C E A D F G Prior Request Response Page Page Web App 3
  6. Measuring: User Experience Performance Tracing B emits C emits E <HEAD> </BODY> A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired Prior Request Response Page Page Web App 3
  7. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response Client Render B emits C emits E <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page Web App 3
  8. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response Client Render B emits C emits E <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page HTTP request/ response for Web App HTML page 3
  9. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response Client Render B emits C emits E <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page HTTP request/ responses for CSS, JS, HTTP images, etc. request/ response for Web App HTML page 3
  10. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response B emits C emits E Client Render ← Logging Database <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page HTTP request/ responses for CSS, JS, HTTP images, etc. request/ response for Web App HTML page 3
  11. Measuring: Firebug Panel  Created a firebug extension that shows real time values for a given page being measured 4
  12. Improve Performance  Apache configuration  gzip, far future expires, etag configuration  Images  far future expires, sprites  move to CSS based buttons, navigation, vignettes, star bars  Javascript/CSS  Switch to YUI minifier  Refactor, migrate to jQuery  Correctly position CSS & Javascript 5
  13. Improve Performance: Analysis of Queue Where did the time go (180 item Q) Where did the time go (180 item Q) Images 57.1% 3873 2500 Images 31.7% 3873 Javascript 7.3% 493 300 Star bars 25.4% 1723 CSS 1.3% 91 Javascript 7.3% 493 HTML 23.9% 1624 CSS 1.3% 91 Redirect 5.2% 356 HTML 23.9% 1624 Other 5.1% 346 Redirect 5.2% 356 6783 Other 5.1% 346 6783 Everthing Else 74.6% Star bars 25.4% 1723 Everthing Else 74.6% 5% 5% Images Javascript 24% CSS HTML Redirect 58% Other 1% 7% Lots of Time for Star Bars 25% 6
  14. 5% 5% Images Javascript 24% CSS HTML Redirect 58% Other 1% Improve Performance: Analysis of Queue 7% Lots of Time for Star Bars 25% Everthing Else Star bars 75% 5% 5% 33% Images 24% Star bars Javascript CSS HTML Redirect Other 1% 7% 25% 7
  15. Improve Performance: Incrementally  Get tracing fully in place  Push performance improvements opportunistically  This allows us to measure and verify  Star bar example • 50+ images originally • Changed to 2 images (sliding sprite) • Performance actually degraded • Request cut in half - GOOD • Extra HTML payload • Event Handlers on each star - BAD 8
  16. Improve Performance: Incrementally  Get tracing fully in place  Push performance improvements opportunistically  This allows us to measure and verify  Star bar example • 50+ images originally • Changed to 2 images (sliding sprite) • Performance actually degraded • Request cut in half - GOOD • Extra HTML payload • Event Handlers on each star - BAD 8
  17. Improving Performance: Gzip  Payload reduced in some cases 15x (typically in half)  User experience performance improvement 13% - 25%  Network outbound traffic cut in half 9
  18. Improving Performance: Gzip  Payload reduced in some cases 15x (typically in half)  User experience performance improvement 13% - 25%  Network outbound traffic cut in half 9
  19. Improving Performance: Gzip  Payload reduced in some cases 15x (typically in half)  User experience performance improvement 13% - 25%  Network outbound traffic cut in half 9
  20. Improving Performance: Gzip  Payload reduced in some cases 15x (typically in half)  User experience performance improvement 13% - 25%  Network outbound traffic cut in half 9
  21. Queue Refactor  Queue was completely re-written from scratch  Changed from Java generated HTML to JSP generated HTML  Moved to jQuery  Performance slightly degraded for page load  But interactivity ready time improved dramatically (5-10x)  Gzip bought back any loss in larger payload (white space) and then some 10
  22. Interesting Browser Stats (from the Queue)  Safari 3.1.1 is 3x faster than IE6 11
  23. Lessons  Most of the Yahoo! recommendations are a sure bet (far futures, gzip, etag, etc.)  Not all pages are created equal  A lot of time is spent fetching images  Nothing beats simple design, separation of concerns, clean architecture  The surest way to improve performance is to measure, measure, measure  Use some way to capture the full user experience time  Be able to log & graph trends  Median works best  Make sure your numbers are statistically signficant 12
  24. Announcement: Jiffy Firebug Extension  Firebug extension available that works with Jiffy-Web to give you a graphical view of your measurement data  http:/billwscott.com/jiffyext 13

×