We're Breaking the Mobile Web

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

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

people would rather uninstall an app than delete photos

@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

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

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