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
   

   View Slide

2. View Slide

3. View Slide

4. Sloooowly
   

   View Slide

5. Even Slower
   

   View Slide

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)
   

   View Slide

7. Long-term Brand Effects
   Slowness damages
   the brand.

   (Google, Microsoft,
   2009)
   Google uses speed
   in search result
   ranking (SEO) and
   quality score
   (AdWords)
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

10. Fight for
    Features
    

    View Slide

11. Anti-Ads
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

15. Anti-Progress
    

    View Slide

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

    View Slide

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

    View Slide

18. Anti-Carousel
    

    View Slide

19. Fast Carousel
    just image
    

    View Slide

20. Fast Carousel
    loaded
    

    View Slide

21. Anti-Responsive Design
    

    View Slide

22. Load just enough code
    Use modern tech where
    aplicable
    Don’t copy desktop features
    1-to-1
    Fast and Responsive
    Tim
    Kadlec
    

    View Slide

23. Anti-Images
    

    View Slide

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/
    

    View Slide

25. Establish Speed Culture
    

    View Slide

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

    View Slide