Open-source website performance tools

Artur Cistov - OSSBarcamp Dublin 2010

Why bother with web performance?

Business Reasons:

500ms slower = 20% drop in traffic (Google)400ms slower = 5-9% drop in full-page traffic (Yahoo)100ms slower = 1% drop in sales (Amazon)

Source: http://www.slideshare.net/stoyan/yslow-20-presentation

Why bother with web performance?Mobile Web Specifics

E.g. iPhone:small cache size (up to 25Kb per file) slow network speed (typical data download speed varies from 82 kbps to 150 kbps).

Source: http://yuiblog.com/blog/2008/02/06/iphone-cacheability/

Why bother with web performance?

Significant performance improvements allow to build new, more responsive web applications & expand into areas previously only covered by desktop software.

Sunspider 0.9.1 Results

IE8 10277.8ms +/- 1.9%Chrome 4.1 1123.9ms +/- 7.7%

Focus on the frontend80-90% of the end-user response time is spent on the frontend.

E.g. RTE.IE: 755/793Kb (95%)

Common Techniques

Fewer HTTP RequestsExpires & Cache control headersGzip compressionFilesize Make JavaScript and CSS ExternalLoad scripts without blockingSplit the initial payload

Google Page SpeedOpen-source Firefox/Firebug Add-on

Google Page SpeedUsed on Google Maps & GmailAutomatically compresses & saves JPEG and PNG filesLists potential savings from minifying & gzippingPresents network activity dataFinds unused CSS rulesFinds inefficient CSS rulesEstimates percentage of JavaScript code eligible for lazy-loadingAllows to export data in JSON formatPainting snapshots

Paint event snapshots

RTE.IEMinifying JS could save 25.8kB (16.4% reduction).Minifying CSS could save 11.0kB (32% reduction).Minifying HTML could save 9.5kB (24% reduction).Compressing with gzip could save 150.4kB (71% reduction) of relevant files.61.3% of the JavaScript loaded by this page had not been invoked by the time the onload handler completed.64.6% of CSS (estimated 21.7kB of 33.6kB) is not used by the current page.

Google Closure Compiler

Google Closure Compiler

Open-source, written in Java & easy to extendThree modes Up to 60-70% filesize savingsPerforms advanced code transforms based on syntax tree including constant & function inlining, dead code removal etc.Highlights code patterns that may not work well on all browsers

CuzillionOpen-source web performance exploration tool

Dustme Selectors Open-source Firefox Add-on

Finds unused CSS selectors Caters for common CSS hacksYou can test pages individually, or spider an entire site

v

Books

Links

Yahoo Exceptional performance teamhttp://developer.yahoo.com/performance/

Google Performance resourceshttp://code.google.com/speed/

Steve Souders, ex Chief Performance Yahoohttp://stevesouders.com/

Thankshttp://www.slideshare.net/cistov

http://www.twitter.com/cistov