Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing Modern Web Applications for High Performance

Optimizing Modern Web Applications for High Performance

Karthik Kastury

April 21, 2012
Tweet

More Decks by Karthik Kastury

Other Decks in Technology

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/
    [email protected]
    @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/
    [email protected]
    @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