We're Breaking the Mobile Web

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

Slide 1

Slide 1

WE’RE BREAKING THE MOBILE WEB

Aw, Snap!

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

Slide 2

Slide 2

Simon Hearne

@SimonHearne

Senior Performance Consultant

NCC Group

Slide 3

Slide 3

a brief history of

web performance

Slide 4

Slide 4

Sept 21 st

2007

web performance was ‘invented’

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

Slide 5

Slide 5

my phone

in 2007

Slide 6

Slide 6

Sept 21 st

2007

web performance was invented

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

Slide 7

Slide 7

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

“optimisation” was done on the server

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

Slide 9

Slide 9

because the application was on the server

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

Slide 10

Slide 10

even web2.0 was pretty static

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

Slide 11

Slide 11

May 13 th

2013

I started work in web performance

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

Slide 12

Slide 12

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

My induction…

Slide 13

Slide 13

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

My induction…

Slide 14

Slide 14

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

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

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

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

”

“

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

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

Unless

your

site

is

an

application

Which

is

fine.

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

Slide 21

Slide 21

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

Slide 22

Slide 22

”

“

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

”

“

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

mobile web = web

Slide 25

Slide 25

”

“

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

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

people would rather uninstall an app than delete photos

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

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

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

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

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

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

mobile web = slow

Slide 37

Slide 37

In the beginning, there was the network

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

Slide 38

Slide 38

”

“

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

then there was the cheap device

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

Slide 40

Slide 40

@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

@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

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

then there were the cores

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

Slide 46

Slide 46

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%

Slide 47

Slide 47

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

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

”

“

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

knowing your

performance

Slide 51

Slide 51

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

Fast Phone / Slow Phone

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

Slide 53

Slide 53

FastPhone

/ SlowPhone

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

http://bit.ly/29QGQ97

Slide 54

Slide 54

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

http://larahogan.me/devicelab/

Slide 55

Slide 55

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

Slide 56

Slide 56

back to m.

?

Slide 57

Slide 57

@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

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

Progressive Enhancement FTW

(that means it works without JavaScript)

Slide 59

Slide 59

Stay in touch!

@SimonHearne

webperf.ninja

Thank you