Optimizing Modern Web Applications for High Performance

Optimizing Modern Web Applications for High Performance

2e36e370bb926513dcada13e69a52c65?s=128

Karthik Kastury

April 21, 2012
Tweet

Transcript

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

  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...
  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
  4. Let’s Get Started... .............................................................................................................. ..............................................................................................................

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

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

  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. .............................................................................................................. ..............................................................................................................
  8. BUT THAT AIN’T ENOUGH ! .............................................................................................................. ..............................................................................................................

  9. None
  10. Traditional Methods are no Longer Enough. ‣ Lazy Loading FTW!

    ‣ Prevent Frontend SPOF. ‣ Early Flush / Chunked Responses. ‣ Async Script Loading. ‣ Google SPDY. ..............................................................................................................
  11. http://blog.patrickmeenan.com/2011/10/testing-for- frontend-spof.html Frontend SPOF

  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. ..............................................................................................................
  13. None
  14. Real Perf. vs Perceived Perf. ‣ Progressively Show the Content.

    ‣ Flush Buffers Early <?php flush(); ?> ‣ Load the Static Assets while the backend generates response. ‣ Flush at Regular Intervals. ..............................................................................................................
  15. None
  16. Early Flush - PayPal Here

  17. Async JS Loading + Polyfills .............................................................................................................. yepnope({ test : Modernizr.geolocation,

    yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });
  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 ..............................................................................................................
  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 ..............................................................................................................
  20. .............................................................................................................. Key Idea Download all Scripts in Parallel and Execute

    in Order.
  21. Early Flush + Async JS Loading - PayPal Here

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

  23. Google SPDY vs Plain Ol’ HTTP ‣ Multiplexed Streams (Single

    TCP Connection) ‣ Request Prioritization ‣ Header Compression ‣ Server Push ..............................................................................................................
  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
  25. RUM (Real User Monitoring) .............................................................................................................. ..............................................................................................................

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

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

  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 ..............................................................................................................
  29. Why RUM? .............................................................................................................. ‣ Get Real World Data. ‣ Monitor

    Perf. across Geographies, Browser Types. ‣ Roll out Optimizations and see how they perform with real data.
  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
  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.
  32. REDUCE THE PAIN OF YOUR USERS

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

  34. I’m available to help ................................................................................................................................ ................................................................................................................................ Blog Twitter Email http://karthik.kastury.in/

    hello@karthik.kastury.in @KarthikDot Ask http://karthik.kastury.in/ask
  35. .............................................................................................................. .............................................................................................................. Q&A

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