WE’RE BREAKING THE MOBILE WEB
Aw, Snap!
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 2
Slide 2 text
Simon Hearne
@SimonHearne
Senior Performance Consultant
NCC Group
Slide 3
Slide 3 text
a brief history of
web performance
Slide 4
Slide 4 text
Sept 21st 2007
web performance was ‘invented’
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 5
Slide 5 text
my phone
in 2007
Slide 6
Slide 6 text
Sept 21st 2007
web performance was invented
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 7
Slide 7 text
14 Steps to Faster-Loading Web Sites
Because in 2007, developers didn’t get it
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 8
Slide 8 text
“optimisation” was done on the server
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 9
Slide 9 text
because the application was on the server
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 10
Slide 10 text
even web2.0 was pretty static
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 11
Slide 11 text
May 13th 2013
I started work in web performance
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 12
Slide 12 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
My induction…
Slide 13
Slide 13 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
My induction…
Slide 14
Slide 14 text
LIFE WAS EASY
“Reduce blocking JavaScript”
“Use gzip compression”
“Compress images”
“Reduce TTFB”
…
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 15
Slide 15 text
but the way we consume the web has changed
2007 2016
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 16
Slide 16 text
2007 2016
and the way we develop for the web has changed
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 17
Slide 17 text
0%
10%
20%
30%
40%
50%
60%
70%
2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016
Non-Desktop Traffic
Single Page Apps
* this is totally made up
Solution:
Responsive Web Design
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 18
Slide 18 text
”
“ Responsive web design is a
fluid grid, flexible images and media queries
Ethan Marcotte
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 19
Slide 19 text
i.e.
cram a desktop site
into a mobile viewport
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 20
Slide 20 text
Unless your site is an application
Which is fine.
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 21
Slide 21 text
we increasingly rely on JavaScript,
while our users increasingly use mobile devices
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 22
Slide 22 text
”
“
Among our 5,400 panelists, approximately
15% do not have Javascript-enabled devices.
http://www.pewresearch.org/2015/04/08/results-2/#javascript
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 23
Slide 23 text
”
“ Website visitors tend to
care more about speed
than all the bells and whistles
we want to add to our websites
KISS Metrics
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 24
Slide 24 text
mobile web = web
Slide 25
Slide 25 text
”
“
Mobile applications are a bridging technology.
Like Flash.
Bruce Lawson
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 26
Slide 26 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
people would rather uninstall an app than delete photos
Slide 27
Slide 27 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 28
Slide 28 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 29
Slide 29 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 30
Slide 30 text
SELECT COUNT(*) FROM [httparchive:runs.latest_requests_mobile] WHERE firstHtml IS TRUE AND url like "%://m.%"
85%
of websites are ‘responsive’
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 31
Slide 31 text
SELECT COUNT(DISTINCT pageid) FROM [httparchive:runs.latest_requests_mobile] WHERE url LIKE "%modernizr%"
11%
of mobile pages use Modernizr
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 32
Slide 32 text
SELECT COUNT(DISTINCT pageid) FROM [httparchive:runs.latest_requests_mobile] WHERE
url LIKE "%angular%" OR url LIKE "%react%" OR url LIKE "%ember%" OR url LIKE "%meteor%"
10%
of mobile pages are SPAs
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
>
Slide 33
Slide 33 text
SELECT COUNT(DISTINCT pageid) FROM [httparchive:runs.latest_requests_mobile] WHERE
url LIKE "%optimizely%" or url LIKE "%maxymiser%" or url LIKE "%zarget%" or url LIKE "%visualwebsiteoptimizer%"
10%
of mobile pages have A/B testing
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 34
Slide 34 text
http://mobile.httparchive.org/trends.php#bytesJS&reqJS
422kB
average mobile JS payload
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 35
Slide 35 text
http://mobile.httparchive.org/trends.php#bytesJS&reqJS
422kB
average mobile JS payload
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 36
Slide 36 text
mobile web = slow
Slide 37
Slide 37 text
In the beginning, there was the network
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 38
Slide 38 text
”
“ the U.K. ranks near the bottom
of the list of 4G countries in terms of coverage
Open Signal
State of Mobile Networks 2016
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 39
Slide 39 text
then there was the cheap device
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 40
Slide 40 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889
”
“ we bet heavily on near-desktop JavaScript
performance on mobile devices.
That is clearly happening on iOS but it is quite
disastrously the opposite on Android.
Slide 41
Slide 41 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
iOS ~3s
Android ~6s
Android is consistently ~two times slower than iOS
Slide 42
Slide 42 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 43
Slide 43 text
JetStream JavaScript Benchmark
(bigger = better)
Galaxy S6 Moto G (3rd Ed.)
48 14
-71%
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 44
Slide 44 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 45
Slide 45 text
then there were the cores
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 46
Slide 46 text
JetStream JavaScript Benchmark
(bigger = better)
Galaxy S6 Moto G (3rd Ed.)
48 14
-71%
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Galaxy S6
(power saving)
37
-23%
Slide 47
Slide 47 text
JetStream JavaScript Benchmark
(bigger = better)
iPhone 6 iPhone 5S iPhone 5C
63 21
-17% -67%
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
52
Slide 48
Slide 48 text
We are developing for people like us,
with devices like ours
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 49
Slide 49 text
”
“
Most low- and moderate-income families …
are under-connected, with mobile-only access
Opportunity for all?
Victoria Rideout & Vikki S. Katz
Winter 2016
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 50
Slide 50 text
knowing your
performance
Slide 51
Slide 51 text
WebPageTest
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
https://sites.google.com/a/webpagetest.org/docs/advanced-features/raw-test-results
Slide 52
Slide 52 text
Fast Phone / Slow Phone
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 53
Slide 53 text
FastPhone / SlowPhone
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
http://bit.ly/29QGQ97
Slide 54
Slide 54 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
http://larahogan.me/devicelab/
Slide 55
Slide 55 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Slide 56
Slide 56 text
back to m.
?
Slide 57
Slide 57 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/
”
“ Maybe we could tone
down the JavaScript
Slide 58
Slide 58 text
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Progressive Enhancement FTW
(that means it works without JavaScript)
Slide 59
Slide 59 text
Stay in touch!
@SimonHearne
webperf.ninja
Thank you