Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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...

Slide 3

Slide 3 text

‣ #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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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. .............................................................................................................. ..............................................................................................................

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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. ..............................................................................................................

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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. ..............................................................................................................

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Early Flush - PayPal Here

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 ..............................................................................................................

Slide 19

Slide 19 text

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 ..............................................................................................................

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Early Flush + Async JS Loading - PayPal Here

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 ..............................................................................................................

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

REDUCE THE PAIN OF YOUR USERS

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

I’m available to help ................................................................................................................................ ................................................................................................................................ Blog Twitter Email http://karthik.kastury.in/ [email protected] @KarthikDot Ask http://karthik.kastury.in/ask

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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