A presentation at Bristol Web Performance Meetup in 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
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
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
enabled devices.
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
poor/33889
”
“
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
”
“
income families …
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
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
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
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.