Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Speed is feature #1

1,010 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Speed is feature #1

  1. 1. Speed is Feature #1 Sergey Chernyshev ! NY Web Performance & CSS/UX Meetup January 15, 2015
  2. 2. Sloooowly
  3. 3. Even Slower
  4. 4. 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)
  5. 5. Long-term Brand Effects Slowness damages the brand.
 (Google, Microsoft, 2009) Google uses speed in search result ranking (SEO) and quality score (AdWords)
  6. 6. 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)
  7. 7. 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
  8. 8. Fight for Features
  9. 9. Anti-Ads
  10. 10. Fast Ads Get rid of document.write! Load ads later, when ready
  11. 11. Anti-Content CMSs like WordPress, Drupal, Magento, etc. Search result, auto- complete, etc.
  12. 12. 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
  13. 13. Anti-Progress
  14. 14. Fast Progress Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
  15. 15. Fast Progress Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797
  16. 16. Anti-Carousel
  17. 17. Fast Carousel just image
  18. 18. Fast Carousel loaded
  19. 19. Anti-Responsive Design
  20. 20. Load just enough code Use modern tech where aplicable Don’t copy desktop features 1-to-1 Fast and Responsive Tim Kadlec
  21. 21. Anti-Images
  22. 22. 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/
  23. 23. Establish Speed Culture
  24. 24. Thank You! Sergey Chernyshev sergey.chernyshev@gmail.com http://sergeyche.com/ @SergeyChe

×