Slide 1

Slide 1 text

Speed is Feature #1 Sergey Chernyshev ! NY Web Performance & CSS/UX Meetup January 15, 2015

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Sloooowly

Slide 5

Slide 5 text

Even Slower

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

Long-term Brand Effects Slowness damages the brand.
 (Google, Microsoft, 2009) Google uses speed in search result ranking (SEO) and quality score (AdWords)

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Fight for Features

Slide 11

Slide 11 text

Anti-Ads

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Anti-Progress

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Anti-Carousel

Slide 19

Slide 19 text

Fast Carousel just image

Slide 20

Slide 20 text

Fast Carousel loaded

Slide 21

Slide 21 text

Anti-Responsive Design

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Anti-Images

Slide 24

Slide 24 text

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/

Slide 25

Slide 25 text

Establish Speed Culture

Slide 26

Slide 26 text

Thank You! Sergey Chernyshev [email protected] http://sergeyche.com/ @SergeyChe