The NEED FOR SPEED on WEB!

Vijay Rayapati Product@GizaPage @amnigos

Note : Do follow barcamp Rules!

Performance Tuning Your Web Apps

Why SPEED matters?

The most impatient creature on the earth

Recently Fred Wilson spoke about

And the first GOLDEN rule is SPEED

Recently Fred Wilson spoke about

If VC’s are talking about WEB apps SPEED

that means the problem is mainstream

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!

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

Only DOGS can sleep while pages are loading

AND…

When was the last time you were waiting for the page to load without cursing it?

AND…

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!

* : Whom should I quote here?

God once said SPEED first EVERYTHING next

Lot’s of sites suck on the WEB!

And it’s sick to use so many lousy pages

Talk is cheap…Show me the code…

Hey

Murphy's Law is usually more applicable than Moore's Law

Premature optimization is the root cause of all evils - Knuth

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?

Problem is HERE Let’s not worry much

The 80-20 Rule

To Speed Up To Scale Up

What Browsers do?

Note : From big brother MS IE Blog!

The Birth and Death of a Page

Note : Thanks to Steven Stefanov for this beauty

Note : From big brother MS IE Blog!

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

Good news – lot’s of tools

Page Speed Speed Tracer

FirebugWebpage SpeedTestDynatrace Ajax

Y slow

and

many more are there!

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

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

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

If you have just wordpressTry one of those cache plug-ins like w3-total-cache

Why you should focus on ordering your stuff?

Increase Parallel Downloads

Note : Too many hosts will end up with DNS look up overhead

How to do Async JS loading?

RequireJS – Awesome way to load JS async and also handle dependencies

How to Measure Ajax actions?

Dynatrace Ajax – If John Resig is impressed then you should also be

How to Measure Ajax actions?

Chrome Speed Tracer – This is a kick-ass

How to Measure Ajax actions?

Chrome Speed Tracer – This is a kick-ass

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?

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

When NOT to optimize?

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

Hope All Browsers will have auto update, love you

Chrome!

Can we do something for IE 6? – the death funerals haven’t worked yet

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

Let’s make WEB faster!

Vijay Rayapati Product@GizaPage @amnigos

May god bless the speed

Few last things

Thanks to friends at

#BCB9 Sponsorship!

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.