Optimising for 25,000 devices
The five stages of Android Performance grief :(
@SimonHearne ● London Web Performance ● 7/2/17
There were 25,000 unique
Android devices detected in 2015
Only 15 iPhone models have ever been produced
...
I’ve recognised a theme when speaking with clients
(thanks to children’s TV)
Denial
Bargaining
Anger
Depression
Acceptance
We don’t have much Smartphone traffic
Denial
Three <<large>> UK retailers.
Which is the fastest site?
Three large UK retailers.
Which site is faster?
Median smartphone DOM Content Loaded time
5.8s
1.8s
3.8s
Retailers with faster mobile experiences have more mobile traffic
Android doesn’t convert as well as iPhone
The Android-iOS conversion rate gap is now a mere 5%
MoovWeb - Q1 2015
We don’t have much Android traffic
53%
of mobile visits over 3 seconds are lost
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
53%
of mobile visits over 3 seconds are lost
like, proper lost
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
53%
of mobile visits over 3 seconds are lost
like, proper lost
not bounces, just silent echoes in an analytics void
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
iOS median = 3.9s
Android median = 8.8s
Android users are sensitive, but forgiving
Bargaining
We’ve got an app!
That takes guts
https://medium.freecodecamp.com/all-of-2016s-top-mobile-apps-are-owned-by-either-google-or-facebook-a9c56d77a74b
https://medium.freecodecamp.com/all-of-2016s-top-mobile-apps-are-owned-by-either-google-or-facebook-a9c56d77a74b
People with cheap phones expect a slow experience
On mobile you are competing with the experience of native applications
Can we pay someone to fix this?
Anger
Why is Android so slow?!
Javascript :(
Image rendering :(
DOM creation & manipulation :(
Depression
Why did we choose Angular?
Legit stock photo
Optimising for everything is hard
Ethan Marcotte - Started that whole ‘Responsive Web Design’ thing
AMP :(
https://www.ampproject.org/
Acceptance
What can we do?
Reduce DOM complexity
SOASTA
yellowlab.tools has your back
https://github.com/gmetais/YellowLabTools/
Serve the right images
<img src="one.png" � srcset="two.png 100w, three.png 500w, four.png 1000w"�� sizes="<media condition> <width>,� <media condition> <width>,� <optional default image width>">
Responsive images are simple, right?
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
...
<picture>
<source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing">
<img sizes="100vw" src="/image/thing-crop">
</picture>
Responsive images are simple, right?
Serve the right images
(you don’t have to do it yourself)
Don’t enhance
(not even progressively)
The Guardian. Moto G1. 100Mb/s.
https://www.webpagetest.org/result/170207_NV_130V/
14s
Bite the PWA bullet
If we can do it for AMP...
https://medium.com/engineering-housing/progressing-mobile-web-fac3efb8b454
Device detection
at the edge!
Test with real devices (they’re cheap!)
Using WebPageTest. O’Reilly.
To get great performance on Android...
You’ve been great,
I’ve been Simon
Let’s keep in touch!
@simonhearne
simon@hearne.me
webperf.ninja