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

8,502

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
8,502
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
252
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Improving Netflix Performance Experience

  1. 1. Improving Netflix Performance Bill Scott Director, UI Engineering Netflix June 23, 2008 1
  2. 2. The Plan  Accurately measure the full user experience performance Prior Page Request Response Page Web App  Incrementally improve site performance 2
  3. 3. Measuring: User Experience Performance Tracing Prior Request Response Page Page Web App 3
  4. 4. Measuring: User Experience Performance Tracing A D F G Prior Request Response Page Page Web App 3
  5. 5. Measuring: User Experience Performance Tracing B C E A D F G Prior Request Response Page Page Web App 3
  6. 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. 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. 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. 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. 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. 11. Measuring: Firebug Panel  Created a firebug extension that shows real time values for a given page being measured 4
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. Interesting Browser Stats (from the Queue)  Safari 3.1.1 is 3x faster than IE6 11
  23. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×