Successfully reported this slideshow.
The NEED FOR SPEED on WEB!<br />Vijay Rayapati<br />Product@GizaPage<br /> @amnigos<br />
Note : Do follow barcamp Rules!<br />
                       Performance Tuning Your Web Apps<br />Why SPEED matters?<br />
The most impatient creature on the earth <br />
RecentlyFred Wilson spoke about<br />
RecentlyFred Wilson spoke about<br />And the first GOLDEN rule is SPEED<br />
If VC’s are talking about WEB apps SPEED <br />                              that means the problem is mainstream<br />
What SPEED means for WEB?<br />Facebook created PHP HipHop to speedup=F****ing 50% savings!<br />Web would have been a gre...
But Why You Should Worry?<br />because<br />It is about User Experience and Engagement<br />Slow = High Bounce Rates = No ...
 AND…<br />Only DOGS can sleep while pages are loading <br />
 AND…<br />When was the last time you were waiting for the page to load without cursing it?<br />
What’s a Good Page Speed?<br />F**K this Page<br />10 seconds<br />SPEEED is not a feature, it’s a KILLER!<br />5 seconds<...
God once said SPEED first EVERYTHING next<br />* : Whom should I quote here? <br />
Lot’s of sites suck on the WEB!<br />
And it’s sick to use so many lousy pages<br />
Hey<br />Talk is cheap…Show me the code…<br />
Murphy's Law is usually more applicable than Moore's Law<br />Premature optimization is the root cause of all evils - Knut...
What Should I Do to SPEED UP?<br />Lets optimize JAVA/.NET/PHP CODE  = FUCK it<br />I think APACHE is better than IIS = FU...
The 80-20 Rule<br />Let’s not worry much<br />Problem is HERE<br />To Speed Up<br />To Scale Up<br />
What Browsers do?<br />Note : From big brother MS IE Blog!<br />
The Birth and Death of a Page<br />Note : Thanks to Steven Stefanov for this beauty<br />
Note : From big brother MS IE Blog!<br />
And the browser woes…<br />Number of connections per host = every browser does it’s own way!<br />Maximum numberof connect...
Good news – lot’s of tools<br />Page Speed<br />Speed Tracer<br />Y slow<br />Firebug<br />Webpage SpeedTest<br />Dynatrac...
The Golden Rules<br />1. Do LESS :  Reduce HTTP requests – combine JS files, CSS files, Use Image Sprites<br />2. Do SMALL...
Thumb Rulesfor 90% <br />Use Google Closure Compiler – easiest way to optimize your JS.<br />Play with Cuzillionto learn h...
Thumb Rulesfor 90% <br />Don’t put JS libraries on your server unless required – Use Google or MS public CDN’s<br />Burst ...
If you have just wordpress<br />Try one of those cache plug-ins like w3-total-cache<br />
Why you should focus on ordering your stuff?<br />
Increase Parallel Downloads<br />Note : Too many hosts will end up with DNS look up overhead<br />
How to do Async JS loading?<br />RequireJS– Awesome way to load JS async and also handle dependencies<br />
How to Measure Ajax actions?<br />Dynatrace Ajax – If John Resig is impressed then you should also be <br />
How to Measure Ajax actions?<br />Chrome Speed Tracer – This is a kick-ass <br />
How to Measure Ajax actions?<br />Chrome Speed Tracer – This is a kick-ass <br />
Geeky: How to do JS payload split?<br />Why load all the JS code upfront when you only need some of it?<br />Doloto - http...
Word of caution<br />A/B and Multivariate scripts will have impact on performance<br />Choose user screen captures tools c...
When NOT to optimize?<br />
The Future looks brighter!<br />Web workers – run multiple JS threads!<br />Hardware acceleration in Browsers – faster ren...
Hope All Browsers will have auto update, love you Chrome!<br />Can we do something for IE 6? – the death funerals haven’t ...
Follow Leaders<br />The Yahoo Developer Network Performance Section<br />Google Performance  Engineering Site<br />Steve S...
Let’s make WEB faster!<br />May god bless the speed<br />Vijay Rayapati<br />Product@GizaPage<br /> @amnigos<br />
Few last things<br />Thanks to friends at<br />#BCB9 Sponsorship!<br />
Credits<br />It’s due wherever I used images from Flickr CC, FindIcons.com  and Google Images Search <br />Thanks to Pall...
Upcoming SlideShare
Loading in …5
×

Performance Tuning Web Apps - The Need For Speed

5,432 views

Published on

Presentation at Barcamp Bangalore 2010 on "Performance Tuning Web Apps"

Published in: Technology

Performance Tuning Web Apps - The Need For Speed

  1. 1. The NEED FOR SPEED on WEB!<br />Vijay Rayapati<br />Product@GizaPage<br /> @amnigos<br />
  2. 2. Note : Do follow barcamp Rules!<br />
  3. 3.
  4. 4. Performance Tuning Your Web Apps<br />Why SPEED matters?<br />
  5. 5. The most impatient creature on the earth <br />
  6. 6. RecentlyFred Wilson spoke about<br />
  7. 7. RecentlyFred Wilson spoke about<br />And the first GOLDEN rule is SPEED<br />
  8. 8. If VC’s are talking about WEB apps SPEED <br /> that means the problem is mainstream<br />
  9. 9. What SPEED means for WEB?<br />Facebook created PHP HipHop to speedup=F****ing 50% savings!<br />Web would have been a great place if everything worked like a Google Instant<br />Lot’s of bad PR and Loose users! <br />Tip : Do join us at Facebook Developer Garage Bangalore on 24th, September for indepth discussion on HipHop.<br />
  10. 10. But Why You Should Worry?<br />because<br />It is about User Experience and Engagement<br />Slow = High Bounce Rates = No users <br />Average users are mostly likely to quit a slow page than geeks<br />It affects your SEO – think Google Instant<br />but IRCTC still works in India <br />
  11. 11. AND…<br />Only DOGS can sleep while pages are loading <br />
  12. 12. AND…<br />When was the last time you were waiting for the page to load without cursing it?<br />
  13. 13. What’s a Good Page Speed?<br />F**K this Page<br />10 seconds<br />SPEEED is not a feature, it’s a KILLER!<br />5 seconds<br />2.5 seconds<br />Google loads in 823 milliseconds*<br />* : Yotta report<br />
  14. 14. God once said SPEED first EVERYTHING next<br />* : Whom should I quote here? <br />
  15. 15. Lot’s of sites suck on the WEB!<br />
  16. 16. And it’s sick to use so many lousy pages<br />
  17. 17. Hey<br />Talk is cheap…Show me the code…<br />
  18. 18. Murphy's Law is usually more applicable than Moore's Law<br />Premature optimization is the root cause of all evils - Knuth<br />
  19. 19. What Should I Do to SPEED UP?<br />Lets optimize JAVA/.NET/PHP CODE = FUCK it<br />I think APACHE is better than IIS = FUCK it<br />Lets get Intel XYZ7 processor = FUCK it<br />Lets move to Cloud = FUCK It<br />
  20. 20. The 80-20 Rule<br />Let’s not worry much<br />Problem is HERE<br />To Speed Up<br />To Scale Up<br />
  21. 21. What Browsers do?<br />Note : From big brother MS IE Blog!<br />
  22. 22. The Birth and Death of a Page<br />Note : Thanks to Steven Stefanov for this beauty<br />
  23. 23. Note : From big brother MS IE Blog!<br />
  24. 24. And the browser woes…<br />Number of connections per host = every browser does it’s own way!<br />Maximum numberof connections from browser.<br />JavaScriptengines suck!<br />So many cool effects – I need more JAVASCRIPT<br />HTTP was built in B.C and we need SPEEDY!<br />Enough SHIT lets get to the POINT >><br />
  25. 25. Good news – lot’s of tools<br />Page Speed<br />Speed Tracer<br />Y slow<br />Firebug<br />Webpage SpeedTest<br />Dynatrace Ajax<br /> and<br />many more are there!<br />
  26. 26. The Golden Rules<br />1. Do LESS : Reduce HTTP requests – combine JS files, CSS files, Use Image Sprites<br />2. Do SMALL : Smush.it/PNG Crush Images, Minify JS/CSS, Remove fugly code<br />3. Do COOL : Cache JS/CSS/Images, Google “optimize” options for your server <br />4. Do MORE : Parallel connections, Order your stuff, Unblock JS & Use Google ajax libs<br />5. Do GEEKY : XHR use JSON, Flush() early, Gzip, Dump Etags, Cache on Server & CDN <br />6. Do SMART: Lazy load, Upgrade your JS libs, Cleanup JS files & Get of rid of<br /> comments/code – the EVIL<br />Tell me other 4 rules <br />
  27. 27. Thumb Rulesfor 90% <br />Use Google Closure Compiler – easiest way to optimize your JS.<br />Play with Cuzillionto learn how to order Images, inline/external Javascripts/CSS<br />Upgrade your jQuery/others libs regularly – faster and less memory<br />Do basic optimization of your JS code, just google – ton of resources<br />
  28. 28. Thumb Rulesfor 90% <br />Don’t put JS libraries on your server unless required – Use Google or MS public CDN’s<br />Burst the Cache on updates – use ? or include versioning in build script<br />Use SpritesMeand learn image sprites – saves you a ton of load.<br />Lazy load/Pre-fetch if have too much stuff after page load or anticipate next page – <br /> XHR, JSON : Love jQuery<br />
  29. 29. If you have just wordpress<br />Try one of those cache plug-ins like w3-total-cache<br />
  30. 30. Why you should focus on ordering your stuff?<br />
  31. 31. Increase Parallel Downloads<br />Note : Too many hosts will end up with DNS look up overhead<br />
  32. 32. How to do Async JS loading?<br />RequireJS– Awesome way to load JS async and also handle dependencies<br />
  33. 33. How to Measure Ajax actions?<br />Dynatrace Ajax – If John Resig is impressed then you should also be <br />
  34. 34. How to Measure Ajax actions?<br />Chrome Speed Tracer – This is a kick-ass <br />
  35. 35. How to Measure Ajax actions?<br />Chrome Speed Tracer – This is a kick-ass <br />
  36. 36. Geeky: How to do JS payload split?<br />Why load all the JS code upfront when you only need some of it?<br />Doloto - http://msdn.microsoft.com/en-us/devlabs/ee423534.aspx<br />
  37. 37. Word of caution<br />A/B and Multivariate scripts will have impact on performance<br />Choose user screen captures tools carefully – can get really sluggish<br />Get rid of asp.net ajax libs, bloated and lousy!<br />Choose your social or JS framework plug-ins carefully – most are lousy!<br />and<br />Look at your server logs – gives you ton of data on requests/responses<br />Do backend profiling – if you have high loads on the system<br />
  38. 38. When NOT to optimize?<br />
  39. 39. The Future looks brighter!<br />Web workers – run multiple JS threads!<br />Hardware acceleration in Browsers – faster rendering/scaling/layouts<br />The awesome HTML 5 – Async/Defer, local storage/app cache, Web SQL & more!<br />Expect better JS engines – run highly optimized and native vm code<br />May be SPEEDY/Web Resource Bundles Soon!<br />
  40. 40. Hope All Browsers will have auto update, love you Chrome!<br />Can we do something for IE 6? – the death funerals haven’t worked yet <br />
  41. 41. Follow Leaders<br />The Yahoo Developer Network Performance Section<br />Google Performance Engineering Site<br />Steve Souders((@souders)<br />Facebook Engineering Blog<br />Performance Planet<br />John Resig<br />High Scalability<br />InfoQ<br />Nicole Sullivan(@stubbornella)<br />Phillip Tellis((@bluesmoon))<br />
  42. 42. Let’s make WEB faster!<br />May god bless the speed<br />Vijay Rayapati<br />Product@GizaPage<br /> @amnigos<br />
  43. 43. Few last things<br />Thanks to friends at<br />#BCB9 Sponsorship!<br />
  44. 44. Credits<br />It’s due wherever I used images from Flickr CC, FindIcons.com and Google Images Search <br />Thanks to Pallav (FusionCharts ) for the background theme.<br />

×