with Pete Karl II @steyblind July 24, 2013 

...the amount of useful work accomplished by a computer system compared to the time & resources used. 

characteristics of performance 

Metrics Data Targets Revise establish collect make then 

Bottlenecks on the Web 

requests 

bandwidth 

throughput 

Under the (browser) hood 

requests http://jmarshall.com/easy/http/ (extra credit) 

scripts 

(re)painting 

Browser performance (wat do?) 

Audit for bad practices 

Identify slow resources 

JavaScript Performance Profiling 

Find time-consuming JavaScript 

Use efficient approaches http://jsperf.com/slow-js-demo (extra credit) 

Check for memory leaks 

CSS Performance 

Look for unnecessary DOM matches 

Optimize your CSS selectors http://josh.github.io/css-explain/ (extra credit) 

Avoid excessive repainting 

No content

Resources ★ Google’s Chrome Developer Tools Documentation https://developers.google.com/chrome-developer-tools/ ★ Google’s web performance best practices https://developers.google.com/speed/docs/best-practices/rules_intro ★ 14 Rules for High Performance Web Sites http://stevesouders.com/hpws/rules.php ★ Introduction to HTTP http://jmarshall.com/easy/http/ ★ Pete’s simple JSPerf demo http://jsperf.com/slow-js-demo ★ CSS Explain (webkit selector analysis) http://josh.github.io/css-explain/ ★ Improving the performance of your HTML5 app (applies to any web site) http://www.html5rocks.com/en/tutorials/speed/html5/ ★ MDN Introduction to Memory Management https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management