open-source website performance tools
DESCRIPTION
Presented at Open Source Barcamp 2010 in DublinTRANSCRIPT
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