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