Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Performance: An Overview

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.

40d385336942122c60666059779582ee?s=128

Pete Karl II

July 24, 2013
Tweet

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

  24. None
  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