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.

Transcript

1. Speed is Feature #1 Sergey Chernyshev ! NY Web Performance & CSS/UX Meetup January 15, 2015
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