Web Performance: An Overview

This was a quick afternoon chat that I put together for a team of designers and developers. The talk covered the basic premises of performance, and then discussed performance through the lens of our every day work with web technologies.

This exposed the designers to tools and practices in development, and exposed the developers to tooling and profiling with regards to CSS and layout.

Transcript

1. with Pete Karl II @steyblind July 24, 2013
2. ...the amount of useful work accomplished by a computer system compared to the time & resources used.
3. characteristics of performance
4. Metrics Data Targets Revise establish collect make then
5. Bottlenecks on the Web
6. requests
7. bandwidth
8. throughput
9. Under the (browser) hood
10. requests http://jmarshall.com/easy/http/ (extra credit)
11. scripts
12. (re)painting
13. Browser performance (wat do?)
14. Audit for bad practices
15. Identify slow resources
16. JavaScript Performance Profiling
17. Find time-consuming JavaScript
18. Use efficient approaches http://jsperf.com/slow-js-demo (extra credit)
19. Check for memory leaks
20. CSS Performance
21. Look for unnecessary DOM matches
22. Optimize your CSS selectors http://josh.github.io/css-explain/ (extra credit)
23. Avoid excessive repainting
25. 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