Why speed matters, examples of the impact saving a few seconds of load time has had on revenue and engagement. The network constraints and what makes the web slow? Bandwidth, latency and it's fundamental impact on the speed of the web. An overview of tools for measuring performance, uptime monitoring, real user monitoring and performance benchmarking. How to make your website faster. Optimization tools and techniques. Muti-device challenges. Responsive vs Adaptive and delivering to mobile within a second. Drop that donut superman! Learn more on the SpeedCurve blog http://speedcurve.com/blog/

1. SPEED
MATTERS

2. 100ms 1s 10s
Response Time in Man-computer Conversational Transactions
Robert B. Miller, 1968
Instant
Seamless Yawn!
Our perception of response time
3s - Recommended
Load Time
6.5s - Alexa 2000
Fall 2012
Miller Response Time 1968

3. Bing did some experiments
+1s - 2.8%
+1s$/
Time to click +2s
Bing

5. WalmartWallmart made some improvements
-1s +2%

6. Shopzilla
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
From 6-9s down to 1.2s

7. Strangeloop Networks

8. Strangeloop Networks

9. Strangeloop Networks

10. The network

11. 1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s
1.63s
1.95s
3.11s
PageLoadTime
Bandwidth (Mbps)
Bandwidth doesn’t matter
(much)

12. 300k image downloading slowed 40x
Browser Server

13. Minimum round trips to
download a file
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size

14. Impact of latency
1
2
3
4
0 20 40 60 80 100 120 140 160 180 200 220 240
PageLoadTime(s)
Round Trip Time (ms)

16. The front-end
really matters

17. 80% of time is front-end
news.bbc.co.uk
ebay.co.uk
debenhams.co.uk
direct.gov.uk
amazon.co.uk
mumsnet.com
guardian.co.uk
0 1 2 3 4 5
Backend
Frontend

18. Still got to fix the backend!

19. 327k (32%) bigger in one year

20. Onload ≠ User perception
2.0s 88% rendered 5.2s window.onload

21. So how do we
measure speed?

22. Uptime monitoring (Pingdom)

23. Synthetic testing

24. Only the HTML request measured

25. Real user monitoring (RUM)

26. New Relic RUM

28. APDEX

29. GA site speed

30. GA site speed

31. GA site speed

32. GA Site speed sample rate
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-XX']);
_gaq.push(['_setSiteSpeedSampleRate', 100]);
_gaq.push(['_trackPageview']);

36. 1
2 3
4
5 6
10
8
9
4
11
13
12
7
14
7

38. GA User timing
_gaq.push([‘_trackTiming’,
‘jQuery’,‘Load Library’, 20,
‘Google CDN’,50]);

39. GA User timing

40. GA User timing

41. Performance benchmarking

42. How do I make
it faster?

43. Google PageSpeed Insight

44. WebPagetest

45. stevesouders.com/hpws/

46. browserdiet.com

47. How do I make
it faster across
all those devices?

49. Responsive Design

51. 1. Build mobile first responsive designs
2. Keep CSS background images in scoped media
queries
3. Conditionally load JavaScript and even HTML
fragments based on screen size and capabilities
4. Implement a responsive images solution
5. Handle retina images very carefully and err on the
side of performance
Jason Grigsby

52. Responsive Images using
Picturefill & WebP

53. Dynamic image generation

54. CSS focal point
Adam Bradley

55. github.com/blog/
Adaptive Design

56. Device detection (WURFL)

57. Going mobile
first is harder
than you think

58. igvita.com

59. igvita.com

60. igvita.com

63. speedcurve.com
@markzeman