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. 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...
  2. ‣ #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
  3. 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. .............................................................................................................. ..............................................................................................................
  4. Traditional Methods are no Longer Enough. ‣ Lazy Loading FTW!

    ‣ Prevent Frontend SPOF. ‣ Early Flush / Chunked Responses. ‣ Async Script Loading. ‣ Google SPDY. ..............................................................................................................
  5. 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. ..............................................................................................................
  6. 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. ..............................................................................................................
  7. 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 ..............................................................................................................
  8. 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 ..............................................................................................................
  9. Google SPDY vs Plain Ol’ HTTP ‣ Multiplexed Streams (Single

    TCP Connection) ‣ Request Prioritization ‣ Header Compression ‣ Server Push ..............................................................................................................
  10. 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 ..............................................................................................................
  11. Why RUM? .............................................................................................................. ‣ Get Real World Data. ‣ Monitor

    Perf. across Geographies, Browser Types. ‣ Roll out Optimizations and see how they perform with real data.
  12. 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
  13. 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.