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/

Steve Barnett

April 04, 2017
Tweet

More Decks by Steve Barnett

Other Decks in Programming

Transcript

  1. #perfmatters

    View full-size slide

  2. Save users
    time and money
    Save us
    time and money

    View full-size slide

  3. Agenda
    1. What?
    2. So what?
    3. Now what?

    View full-size slide

  4. (Front-end)
    Performance

    View full-size slide

  5. Bongani
    Cashier at Pluck n Pay
    R5,000 / month

    View full-size slide

  6. "I want to look for
    a new job."

    View full-size slide

  7. httparchive.org
    Average page size: 2.5MB

    View full-size slide

  8. Vodacom pre-paid
    About R1.5 per page

    View full-size slide

  9. Bongani looks for a job
    10 pages a day: R15
    Salary for the day: R240

    View full-size slide

  10. Whisky
    Tango
    Foxtrot?

    View full-size slide

  11. 2. So what?
    (Part 2)

    View full-size slide

  12. Site
    Stat
    Effect

    View full-size slide

  13. Google
    0.5s slower load time
    25% fewer searches

    View full-size slide

  14. Amazon
    0.1s slower load time
    1% decrease in revenue

    View full-size slide

  15. Etsy
    160kb more images
    on mobile
    12% increase in
    bounce rate

    View full-size slide

  16. YouTube
    90% smaller page size
    large increase in traffic
    in areas with
    poor connectivity

    View full-size slide

  17. Instagram
    30% smaller page size
    increased impressions
    and interactions

    View full-size slide

  18. AliExpress
    36% faster load time
    11% increase in orders

    View full-size slide

  19. 2. So What?
    (Part 3)

    View full-size slide

  20. Site
    Stats
    Why

    View full-size slide

  21. The stats
    Requests
    MB
    Time

    View full-size slide

  22. dailymaverick.co.za
    310 requests, 3.6MB, 40s
    1.7MB JS:
    ads and tracking

    View full-size slide

  23. mg.co.za
    290 requests, 9.9MB, 62s
    8.2MB images:
    lots, large, HD

    View full-size slide

  24. medium.com
    90 requests, 3.7MB, 30s
    0.5MB JS: for what?
    2.9MB images: 67, really?

    View full-size slide

  25. cellc.co.za
    150 requests, 2MB, 33s
    1MB images: carousel

    View full-size slide

  26. capetown.gov.za
    70 requests, 2.0MB, 20s
    1.7MB JS for animations

    View full-size slide

  27. 4. Now what?

    View full-size slide

  28. Now what?
    Use less stuff

    View full-size slide

  29. Images
    Threat Level: !

    View full-size slide

  30. Carousels
    Threat Level: !!

    View full-size slide

  31. Video
    Threat Level: !!!

    View full-size slide

  32. Auto-playing
    Video
    Threat Level: ! + "

    View full-size slide

  33. Animations
    Threat Level: ! or !!

    View full-size slide

  34. Custom UI
    Threat Level: ! to !!!

    View full-size slide

  35. Tracking, Ads
    Threat Level: !!!

    View full-size slide

  36. Now what?
    Measure
    performance

    View full-size slide

  37. Your browser's Dev Tools:
    "Network" panel

    View full-size slide

  38. PageSpeed Insights
    WebPageTest

    View full-size slide

  39. speedcurve.com

    View full-size slide

  40. #perfmatters

    View full-size slide

  41. Zgenda
    1. What?
    2. So what?
    3. Now what?

    View full-size slide

  42. Thanks! ✌
    danielle.lisa.eriksen
    @gmail.com
    steve
    @naga.co.za
    naga.co.za/pup2017

    View full-size slide