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.

Pete Karl II

July 24, 2013
Tweet

More Decks by Pete Karl II

Other Decks in Technology

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