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