Optimizing Modern Web Applications for High Performance

The Slide Deck from my talk at MetaRefresh (http://funnel.hasgeek.com/metarefresh/267-optimizing-modern-web-applications-for-performance).

Videos Used in the Slides are here : http://dl.dropbox.com/u/2444/MetaRefresh%20Videos.zip

Transcript

1. Building
   High Performance
   Web Applications
   ..............................................................................................................
   ..............................................................................................................
   

   View Slide

2. Karthik Kastury
   Perf. Engineer @ PayPal India
   Engineer / Hacker / Blogger / Apple fanboi
   and evil minded. *Pun Intended*
   24x7 Internet Geek | Unlucky in Cards
   ................................................................................................................................
   ................................................................................................................................
   Blog
   Twitter
   Email
   http://karthik.kastury.in/
   hello@karthik.kastury.in
   @KarthikDot
   Internet Addict for 12+ Years...
   

   View Slide

3. ‣ #17 Best Places to Work - India (2011)
   ‣ #6 in Technology Companies in India
   ‣ Most Innovative Company in the Finance
   Industry and amongst Top 50 Most Innovative
   Companies in the World.
   [1] Best Place to Work Survey - India
   [2] Forbes Most Innovative Companies
   

   View Slide

4. Let’s Get Started...
   ..............................................................................................................
   ..............................................................................................................
   

   View Slide

5. Building
   High Performance
   Web Applications
   ..............................................................................................................
   

   View Slide

6. High Performance?
   ..............................................................................................................
   ..............................................................................................................
   

   View Slide

7. Performance Engineering
   ‣Reduce HTTP Requests.
   ‣ Use Image Sprites.
   ‣ CSS at the top, JS at the Bottom.
   ‣ CSS & JS Minified and Concatenated.
   ‣ Use a CDN for Static Assets.
   ..............................................................................................................
   ..............................................................................................................
   

   View Slide

8. BUT THAT AIN’T ENOUGH !
   ..............................................................................................................
   ..............................................................................................................
   

   View Slide

9. View Slide

10. Traditional Methods are no Longer
    Enough.
    ‣ Lazy Loading FTW!
    ‣ Prevent Frontend SPOF.
    ‣ Early Flush / Chunked Responses.
    ‣ Async Script Loading.
    ‣ Google SPDY.
    ..............................................................................................................
    

    View Slide

11. http://blog.patrickmeenan.com/2011/10/testing-for-
    frontend-spof.html
    Frontend SPOF
    

    View Slide

12. Lazy Loading
    ‣ Load Scripts on Demand.
    ‣ Progressive Rendering - Show Only the most
    important parts, and progressively enhance/decorate.
    ‣ Render Content above the fold ASAP; and then render
    below the fold.
    ..............................................................................................................
    

    View Slide

13. View Slide

14. Real Perf. vs Perceived Perf.
    ‣ Progressively Show the Content.
    ‣ Flush Buffers Early
    ‣ Load the Static Assets while the backend generates
    response.
    ‣ Flush at Regular Intervals.
    ..............................................................................................................
    

    View Slide

15. View Slide

16. Early Flush - PayPal Here
    

    View Slide

17. Async JS Loading + Polyfills
    ..............................................................................................................
    yepnope({
    test : Modernizr.geolocation,
    yep : 'normal.js',
    nope : ['polyfill.js', 'wrapper.js']
    });
    

    View Slide

18. yepnope([{
    load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/
    jquery.min.js',
    complete: function () {
    if (!window.jQuery) {
    yepnope('local/jquery.min.js');
    }
    }
    }, {
    load: 'jquery.plugin.js',
    complete: function () {
    jQuery(function () {
    jQuery('div').plugin();
    });
    }
    }]);
    Async JS Loading + Resource
    Fallbacks
    ..............................................................................................................
    

    View Slide

19. yepnope({
    load: 'preload!jquery.1.5.0.js',
    callback: function (url, result, key) {
    window.jQuery; // undefined (but it's cached!);
    }
    });
    Async JS Loading + Resource
    Preloading
    ..............................................................................................................
    

    View Slide

20. ..............................................................................................................
    Key Idea
    Download all Scripts in Parallel and
    Execute in Order.
    

    View Slide

21. Early Flush + Async JS Loading -
    PayPal Here
    

    View Slide

22. GOOGLE SPDY!
    ..............................................................................................................
    ..............................................................................................................
    

    View Slide

23. Google SPDY vs Plain Ol’ HTTP
    ‣ Multiplexed Streams (Single TCP Connection)
    ‣ Request Prioritization
    ‣ Header Compression
    ‣ Server Push
    ..............................................................................................................
    

    View Slide

24. Google SPDY vs Plain Ol’ HTTP
    ..............................................................................................................
    0
    25
    50
    75
    100
    Without SSL
    With SSL
    HTTP Google SPDY
    Normalized Data for Top 100 Sites
    

    View Slide

25. RUM
    (Real User Monitoring)
    ..............................................................................................................
    ..............................................................................................................
    

    View Slide

26. ..............................................................................................................
    Monitor in
    PRODUCTION
    ..............................................................................................................
    

    View Slide

27. The Real Story!
    ..............................................................................................................
    

    View Slide

28. Yahoo! Boomerang
    ‣ Doc Complete, Page Response, Page Processing, TTFB,
    DNS, Connect & more
    ‣ Cookie data (for parent domain)
    ‣ Location (geolookup on IP)
    ‣ Referrer
    ‣ User Agent
    ‣ Anything else you want to stuff into the beacon
    https://github.com/yahoo/boomerang
    ..............................................................................................................
    

    View Slide

29. Why RUM?
    ..............................................................................................................
    ‣ Get Real World Data.
    ‣ Monitor Perf. across Geographies, Browser Types.
    ‣ Roll out Optimizations and see how they perform
    with real data.
    

    View Slide

30. What to Capture?
    ..............................................................................................................
    ‣ Geo Split.
    ‣ 95 %ile, 90 %ile, 75 %ile and 50 %ile Load times.
    ‣ Browser Data.
    ‣ Connect times in the Wild.
    Readymade solutions for RUM
    

    View Slide

31. Summary
    ..............................................................................................................
    Reduce HTTP Requests.
    Use a CDN for Static Assets.
    Lazy Loading FTW!
    Prevent Frontend SPOF.
    Early Flush / Chunked Responses.
    Async Script Loading.
    Google SPDY.
    

    View Slide

32. REDUCE THE PAIN OF YOUR USERS
    

    View Slide

33. LIVE ON THE EDGE
    ..............................................................................................................
    ..............................................................................................................
    

    View Slide

34. I’m available to help
    ................................................................................................................................
    ................................................................................................................................
    Blog
    Twitter
    Email
    http://karthik.kastury.in/
    hello@karthik.kastury.in
    @KarthikDot
    Ask http://karthik.kastury.in/ask
    

    View Slide

35. ..............................................................................................................
    ..............................................................................................................
    Q&A
    

    View Slide

36. THE END
    ..............................................................................................................
    ..............................................................................................................
    Or the start of something new.
    

    View Slide