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

Speed is feature #1

Speed is feature #1

Speed of interactive UI is a critical aspect of web experience, especially now when mobile consumption and responsive design became an integral part of web strategy.

Sergey Chernyshev talks about the most important feature of every web site and application and describes why you need to care about speed, what are the common performance issues and how to establish a process for web performance optimization in your team.

1e2ff8ee6ac0e790883b1cdc420f158d?s=128

Sergey Chernyshev

January 15, 2015
Tweet

Transcript

  1. Speed is Feature #1 Sergey Chernyshev ! NY Web Performance

    & CSS/UX Meetup January 15, 2015
  2. None
  3. None
  4. Sloooowly

  5. Even Slower

  6. Slowness Damages Business 100ms delay -> -1% of sales. (Amazon,

    2006) 400ms delay -> -5 - 9% full-page traffic. (Yahoo autos, 2008) 500ms delay -> -25% searches. (Google, 2007)
  7. Long-term Brand Effects Slowness damages the brand.
 (Google, Microsoft, 2009)

    Google uses speed in search result ranking (SEO) and quality score (AdWords)
  8. Speed Means Business +3% ad revenue, +17% page views per

    session. (Edmunds, 2010)! +7-12% conversions! 50% reduction in operation costs (Shopzilla, 2009)! +15% (+60M) downloads, each 1sec increased 2.7% downloads (Firefox, 2010)
  9. Fred Wilson Managing Partner, Union Square Ventures @ NYC http://www.aVC.com/

    “1. Speed is the most important feature.” 10 Golden Principles of Successful Web Apps http://vimeo.com/10510576
  10. Fight for Features

  11. Anti-Ads

  12. Fast Ads Get rid of document.write! Load ads later, when

    ready
  13. Anti-Content CMSs like WordPress, Drupal, Magento, etc. Search result, auto-

    complete, etc.
  14. Fast Content Static content Caches (APC, memcache, Varnish, CDN, browser)

    Flush HTTP stream early / multiple times
 http://calendar.perfplanet.com/2014/async-fragments-rediscovering-progressive-html- rendering-with-marko/ Optimize
  15. Anti-Progress

  16. Fast Progress Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

  17. Fast Progress Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

  18. Anti-Carousel

  19. Fast Carousel just image

  20. Fast Carousel loaded

  21. Anti-Responsive Design

  22. Load just enough code Use modern tech where aplicable Don’t

    copy desktop features 1-to-1 Fast and Responsive Tim Kadlec
  23. Anti-Images

  24. Responsive Images 0.000 1.000 2.000 3.000 4.000 Small Medium Large

    Source 3.818 1.454 1.233 0.407 http://responsiveimages.org/
  25. Establish Speed Culture

  26. Thank You! Sergey Chernyshev sergey.chernyshev@gmail.com http://sergeyche.com/ @SergeyChe