Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance Matters

Performance Matters

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

28a7165396905ffabc4d1f45609efc39?s=128

Steve Barnett

April 04, 2017
Tweet

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?

  10. None
  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