We're Breaking the Mobile Web

A presentation at Bristol Web Performance Meetup in July 2016 in Bristol, UK by Simon Hearne

WE’RE BREAKING THE MOBILE WEB
Aw, Snap!
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

Simon Hearne
@SimonHearne
Senior Performance Consultant
NCC Group

a brief history of
web performance

Sept 21 st
2007
web performance was ‘invented’
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

my phone
in 2007

Sept 21 st
2007
web performance was invented
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

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

“optimisation” was done on the server
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

because the application was on the server
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

even web2.0 was pretty static
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

May 13 th
2013
I started work in web performance
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
My induction…

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
My induction…

LIFE WAS EASY
“Reduce blocking JavaScript”
“Use gzip
compression”
“Compress images”
“Reduce TTFB”
…
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

but the way we consume the web has changed
2007
2016
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

2007
2016
and the way we develop for the web has changed
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

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

”
“
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

i.e.
cram
a desktop site
into
a mobile
viewport
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

Unless
your
site
is
an
application
Which
is
fine.
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

w e
increasingly
rely
on
JavaScript,
w hile
our
users
increasingly
use mobile
devices
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

”
“
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

”
“
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

mobile web = web

”
“
Mobile applications
are a bridging
technology .
Like
Flash.
Bruce Lawson
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
people would rather uninstall an app than delete photos

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

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

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

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

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

http://mobile.httparchive.org/trends.php#bytesJS&reqJS
422kB
average
mobile JS payload
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

http://mobile.httparchive.org/trends.php#bytesJS&reqJS
422kB
average
mobile JS payload
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

mobile web = slow

In the beginning, there was the network
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

”
“
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

then there was the cheap device
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

@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.

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
iOS
~3s
Android
~6s
Android is consistently ~two times slower than iOS

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

JetStream
JavaScript Benchmark
(bigger = better)
Galaxy S6
Moto G (3 rd
Ed.)
48
14
71%
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

then there were the cores
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

JetStream
JavaScript Benchmark
(bigger = better)
Galaxy S6
Moto G (3 rd
Ed.)
48
14
71%
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Galaxy S6
(power saving)
37
23%

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

We are developing for people like us,
with devices like ours
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

”
“
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

knowing your
performance

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

Fast Phone / Slow Phone
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

FastPhone
/ SlowPhone
@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
http://bit.ly/29QGQ97

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
http://larahogan.me/devicelab/

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup

back to m.
?

@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

@SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
Progressive Enhancement FTW
(that means it works without JavaScript)

Stay in touch!
@SimonHearne
webperf.ninja
Thank you

Simon Hearne
@simonhearne

1 / 59

We rely on our customer's browser to process large JavaScript applications, communicate in real-time and execute code from tens of third-parties. The increasing diversity of customer devices and network connections means that ensuring a fast experience for all customers is nearly impossible: we understand web performance over the network, but in 2016 the CPU is our biggest challenge.

In this talk Simon demonstrates the impact of device diversity on site speed on live sites and shares tips and tools that he uses when diagnosing these issues.