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
   

   View Slide

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

   View Slide

3. characteristics of performance
   

   View Slide

4. Metrics Data Targets Revise
   establish collect make then
   

   View Slide

5. Bottlenecks on the Web
   

   View Slide

6. requests
   

   View Slide

7. bandwidth
   

   View Slide

8. throughput
   

   View Slide

9. Under the (browser) hood
   

   View Slide

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

    View Slide

11. scripts
    

    View Slide

12. (re)painting
    

    View Slide

13. Browser performance (wat do?)
    

    View Slide

14. Audit for bad practices
    

    View Slide

15. Identify slow resources
    

    View Slide

16. JavaScript
    Performance
    Profiling
    

    View Slide

17. Find time-consuming JavaScript
    

    View Slide

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

    View Slide

19. Check for memory leaks
    

    View Slide

20. CSS Performance
    

    View Slide

21. Look for unnecessary DOM matches
    

    View Slide

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

    View Slide

23. Avoid excessive repainting
    

    View Slide

24. View Slide

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
    

    View Slide