Building High Performance Web Applications .............................................................................................................. ..............................................................................................................
‣ #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
Let’s Get Started... .............................................................................................................. ..............................................................................................................
Building High Performance Web Applications ..............................................................................................................
High Performance? .............................................................................................................. ..............................................................................................................
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. .............................................................................................................. ..............................................................................................................
BUT THAT AIN’T ENOUGH ! .............................................................................................................. ..............................................................................................................
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. ..............................................................................................................
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. ..............................................................................................................
.............................................................................................................. Key Idea Download all Scripts in Parallel and Execute in Order.
GOOGLE SPDY! .............................................................................................................. ..............................................................................................................
Google SPDY vs Plain Ol’ HTTP .............................................................................................................. 0 25 50 75 100 Without SSL With SSL HTTP Google SPDY Normalized Data for Top 100 Sites
RUM (Real User Monitoring) .............................................................................................................. ..............................................................................................................
.............................................................................................................. Monitor in PRODUCTION ..............................................................................................................
Why RUM? .............................................................................................................. ‣ Get Real World Data. ‣ Monitor Perf. across Geographies, Browser Types. ‣ Roll out Optimizations and see how they perform with real data.
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
LIVE ON THE EDGE .............................................................................................................. ..............................................................................................................
I’m available to help ................................................................................................................................ ................................................................................................................................ Blog Twitter Email http://karthik.kastury.in/ [email protected] @KarthikDot Ask http://karthik.kastury.in/ask
THE END .............................................................................................................. .............................................................................................................. Or the start of something new.