Performance Matters

A talk about Front-end Performance with Danielle Eriksen for the Pixel Up! meetup group: https://www.meetup.com/pixelup/events/238796146/

Transcript

1. #perfmatters
2. Save users time and money Save us time and money
3. Big Faces
4. Agenda 1. What? 2. So what? 3. Now what?
5. 1. What?
6. (Front-end) Performance
7. 1. Speed
8. 2. Weight
9. 2. So what?
11. Bongani Cashier at Pluck n Pay R5,000 / month
12. "I want to look for a new job."
13. httparchive.org Average page size: 2.5MB
14. Vodacom pre-paid About R1.5 per page
15. Bongani looks for a job 10 pages a day: R15 Salary for the day: R240
16. Whisky Tango Foxtrot?
17. !!!
18. 2. So what? (Part 2)
19. Site Stat Effect
20. Yikes! !
21. Google 0.5s slower load time 25% fewer searches
22. Amazon 0.1s slower load time 1% decrease in revenue
23. Etsy 160kb more images on mobile 12% increase in bounce rate
24. Yay! !
25. YouTube 90% smaller page size large increase in traffic in areas with poor connectivity
26. Instagram 30% smaller page size increased impressions and interactions
27. AliExpress 36% faster load time 11% increase in orders
28. 2. So What? (Part 3)
29. Site Stats Why
30. The stats Requests MB Time
31. dailymaverick.co.za 310 requests, 3.6MB, 40s 1.7MB JS: ads and tracking
32. mg.co.za 290 requests, 9.9MB, 62s 8.2MB images: lots, large, HD
33. medium.com 90 requests, 3.7MB, 30s 0.5MB JS: for what? 2.9MB images: 67, really?
34. cellc.co.za 150 requests, 2MB, 33s 1MB images: carousel
35. capetown.gov.za 70 requests, 2.0MB, 20s 1.7MB JS for animations
36. 4. Now what?
37. Now what? Use less stuff
38. Images Threat Level: !
39. Carousels Threat Level: !!
40. Video Threat Level: !!!
41. Auto-playing Video Threat Level: ! + "
42. Animations Threat Level: ! or !!
43. Custom UI Threat Level: ! to !!!
44. Tracking, Ads Threat Level: !!!
45. Now what? Measure performance
46. Your browser's Dev Tools: "Network" panel
47. PageSpeed Insights WebPageTest
48. speedcurve.com
49. #perfmatters
50. Zgenda 1. What? 2. So what? 3. Now what?
51. Thanks! ✌ danielle.lisa.eriksen @gmail.com steve @naga.co.za naga.co.za/pup2017