Speed Matters

Overview of why front-end performance matter, how to monitor it and the challenges faced when building for an increasingly mobile world.

Transcript

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. Walmart Wallmart 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.36s 1.37s 1.38s 1.39s 1.41s 1.44s 1.50s 1.63s 1.95s 3.11s Page Load Time 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 Page Load Time (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