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

The UX of Speed

The UX of Speed

An ode to performance -- presented at #DIV15

Stefan Baumgartner

October 09, 2015
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

Transcript

  1. “Page Speed Score” tells you if you’ve followed a series

    of best practices for every component of your website
  2. The Speed Index is the average time at which visible

    parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port.
  3. Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  4. Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  5. Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  6. Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  7. Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  8. Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  9. Every page is fully loaded in 10 seconds 93% linear

    after 1 second 100% linear after 10 seconds 20% linear after 9 seconds 7% linear after 9 seconds 80% linear after 1 second 881 5000 8610
  10. Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms

    User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy
  11. Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms

    User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy We want to avoid this
  12. Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms

    User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy We want to be in this area
  13. Modern browser? Supports WOFF? Font in Storage Show Font No

    Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Pre-Render
  14. localStorage available? Download Font Save in localStorage Show Font No

    Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Post-Render