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.

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