Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Improving Netflix
Performance
Bill Scott
Director, UI Engineering
Netflix




June 23, 2008

                           1
The Plan
   Accurately measure the full user experience performance

     Prior
     Page    Request      Response   Page...
Measuring: User Experience Performance Tracing




   Prior
           Request    Response   Page
   Page




            ...
Measuring: User Experience Performance Tracing



           A                    D      F    G




   Prior
             ...
Measuring: User Experience Performance Tracing


                         B      C        E

           A                 ...
Measuring: User Experience Performance Tracing


                                  B               emits C        emits
  ...
Measuring: User Experience Performance Tracing
                                                  Prior Page till Client Re...
Measuring: User Experience Performance Tracing
                                                   Prior Page till Client R...
Measuring: User Experience Performance Tracing
                                                   Prior Page till Client R...
Measuring: User Experience Performance Tracing
                                                   Prior Page till Client R...
Measuring: Firebug Panel
   Created a firebug extension that shows real time values
    for a given page being measured


...
Improve Performance
   Apache configuration
       gzip, far future expires, etag configuration
   Images
       far fut...
Improve Performance: Analysis of Queue
Where did the time go (180 item Q)                        Where did the time go (18...
5%
                    5%


                                                                   Images

                   ...
Improve Performance: Incrementally
   Get tracing fully in place
   Push performance improvements opportunistically
    ...
Improve Performance: Incrementally
   Get tracing fully in place
   Push performance improvements opportunistically
    ...
Improving Performance: Gzip
   Payload reduced in some cases 15x (typically in half)




   User experience performance ...
Improving Performance: Gzip
   Payload reduced in some cases 15x (typically in half)




   User experience performance ...
Improving Performance: Gzip
   Payload reduced in some cases 15x (typically in half)




   User experience performance ...
Improving Performance: Gzip
   Payload reduced in some cases 15x (typically in half)




   User experience performance ...
Queue Refactor
   Queue was completely re-written from scratch
       Changed from Java generated HTML to JSP generated ...
Interesting Browser Stats (from the Queue)
   Safari 3.1.1 is 3x faster than IE6




                                    ...
Lessons
   Most of the Yahoo! recommendations are a sure bet (far futures, gzip, etag, etc.)
   Not all pages are create...
Announcement: Jiffy Firebug Extension
   Firebug extension available that works with Jiffy-Web to give you a graphical
  ...
Upcoming SlideShare
Loading in …5
×

Improving Netflix Performance Experience

11,308 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

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

×