Let s Take the Mobile Out of Web Development

(1)

© 2014 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the

Let’s Take the ‘Mobile’ Out

of Web Development

Douglass Sillars, PhD

Performance/Optimization Lead

Developer Advocacy

(2)

© 2014 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change. Mention of a specific company or entity is not an endorsement by AT&T.

Web Browsing on Mobile

• History/Context

• Web on Mobile

–

Criteria/Performance

• Approaches

–

Successes/Failures

• Summary

(3)

Who Uses Mobile?

http://newsfeed.time.com/2013/03/25/more-people-have-cell-phones-than-toilets-u-n-study-shows/

HEALTH

More People Have Cell Phones Than Toilets,

U.N. Study Shows

Out of the world’s estimated 7 billion people, 6 billion have access to mobile

phones. Only 4.5 billion have access to working toilets.

(4)

Who Uses Mobile Data?

http://designshack.net/articles/css/mobilefirst/

60

50

40

30

20

10

0 Mobile % of Total Internet Traffic by Country – 2013*

(5)

Mobile Data Visualized

In 2012, mobile data usage was 12x higher than ALL Internet usage in 2000.

http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

(6)

Mobile Data Visualized

http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

http://timesofindia.indiatimes.com/tech/tech-news/internet/Over-50-of-internet-users-are-mobile-only-Report/articleshow/24121500.cms?

If you count mobile data offloaded to Wi-Fi, it is closer to 18x larger!

(7)

The Future

(8)

The Web

(9)

The Web

http://it.wikipedia.org/wiki/File:Motorola_RAZR_V3i_03.JPG

(10)

Building the Web 2005

Throughput

Memory

Processing Power

Screen Size

http://commons.wikimedia.org/wiki/File:Wikipedia_on_Tungsten_C_with_PalmSource_Web_Browser_2.0.jpg

We needed mobile specific websites

(11)

Building the Web 2005

www.mysite.com

Desktop

Mobile

Device

check

m.mysite.com

www.mysite.com

(12)

The Web

(13)

Building the Web 2013

http://www.flickr.com/photos/dannynic/6282154781/

• Throughput

• Memory

• Processing Power

• Screen size

Don’t forget many

customers ARE on

slower connections,

and account for those

as well

(14)

Building the Web 2013

t.mysite.com?

Is this still ‘the way’?

2 slides

car.mysite.com?

toaster.mysite.com?

http://www.flickr.com/photos/vernieman/7928919288/sizes/z/in/photostream/

http://www.flickr.com/photos/twicepix/3070754858

www.mysite.com

Desktop

Mobile

Device

check

m.mysite.com

www.mysite.com

http://www.flickr.com/photos/james_nash/3404191156

http://www.flickr.com/photos/dannynic/6282154781/

(15)

Web is Moving Towards Mobile

• There is no more “Mobile Web”

• It is all just “The Web” on

(16)

http://www.flickr.com/photos/stuartpilbrow/3345896050/sizes/o/in/photostream

(17)

Web Browsing on Mobile

• History/Context

• Web on Mobile

–

HTTP Archive

–

Criteria/Performance

• Approaches

–

Successes/Failures

• Summary

(18)

Survey of Current Web

• HTTP Archive: bi-monthly study of the web

• Mobile HTTP Archive (alpha)

• Crawl of top X,000 Alexa websites

–

Trends

–

Performance

–

Stats

• Open Source

–

Runs on top of Webpagetest.org

• Created by Steve Souders @ Google

–

Chair/founder Velocity Conference

–

High Performance Websites

(19)

Survey of Current Web

http://bigqueri.es/t/mobile-requests-that-redirect-to-m-or-mobi/81

http://www.igvita.com/2013/06/20/http-archive-bigquery-web-performance-answers/

HTTP Archive & BigQuery

• Ilya Grigorik: “High

Performance Browser

Networking” O’Reilly, 2013

–

Imported HTTP Archive

into Google BigQuery

–

Online SQL searches

of data

(20)

Survey of Current Web

• HTTP Archive & Mobile HTTP Archive

• Data from 11/01/2013:

–

Web is IE9 default connection

–

Mobile web is iPhone 4s on an emulated 3G network

• ~4700 URLs are found on both web and mobile web

http://bigqueri.es/t/mobile-requests-that-redirect-to-m-or-mobi/81

http://offers2.compuware.com/rs/compuware/images/Mobile_App_Survey_Report.pdf

http://51degrees.mobi/ressinfographic

(21)

Survey of Current Web

Use HTTP archive data to:

• Categorize websites on mobile

–

Quantity

–

Performance

• What is the best? What should YOU use?

–

Is this possible to determine?

(22)

Customer Expectations

• DATA:

–

Add 160KB to a page:

Bounce rate +12% on mobile

• SPEED:

–

40% exit a site if >3s load time

–

64% expect a site to load in <4s

4% of mobile users admit to throwing their

phones out of frustration from slow sites!

http://laraswanson.com/mobileweb/

http://www.flickr.com/photos/9009139@N08/1263954439

(23)

Customer Expectations

• What is the best way to keep

customers engaged with your site?

–

Page Size (KB)

(24)

Speed Index Math

Speed Index (Top) = 1200

Speed Index (Bottom) = 9000

(25)

Survey of the Web

0%

5%

10%

15%

20%

25%

KB

KB usage of mobile websites

0%

5%

10%

15%

20%

25%

30%

35%

40%

1

2

3

4

5

6

7

8

9

10 >10

Seconds

mobile_SpeedIndex

You want to be here!

Size

• 33% of mobile websites >1MB

• Median 516 KB

• 50 sites > 5MB !?!

Speed

• Median 8.5s

• 93% >3s

• 37% over 10s

(26)

0

50

100

150

200

250

300

350

400 SpeedIndex Counts (top 1,000

mobile sites)

Survey of the Web

You want to be here!

Size

• 27% of mobile websites >1MB

• Median 565 KB

• 7 sites > 5MB !?!

Speed

• Median 7.9s

• 94% >3s

• 35% over 10s

0

50

100

150

200

250

300 Top 1,000 mobile website

(KB)

(27)

Web Browsing on Mobile

• History/Context

• Web on Mobile

–

Criteria/Performance

• Approaches

–

Successes/Failures

• Summary

(28)

Survey of Mobile Web - Redirection

‘www.’ redirect to ‘m.’ or ‘.mobi’ sites

• 260/993 (26.1%)

• Page Size is smaller

(Median 538KB from 565KB)

• Speed – Median slower:

–

9.2s from 7.9s

–

0 sites load under 3s

0

50

100

150

200

250

300

350

400 All

mobile

redirect

0.00%

5.00%

10.00%

15.00%

20.00%

25.00%

30.00%

all

mobile

redirect

(29)

0%

5%

10%

15%

20%

25%

30%

35%

40%

1

2

3

4

5

6

7

8

9

10 >10

redirect

all Mobile

Redirecting to Mobile Specific

• Despite lower payload

• Not Faster:

–

#1 Rule of Web Performance:

• Reduce # of connections

–

301/302 redirects add

200-600ms latency

(30)

If One Redirect is Bad…

Request xyz.com

Three is Worse!

Redirects to www.xyz.com

Redirects to xyz.mobi

(31)

Cons

• 2 code bases

• Tablets/other platforms?

• Redirection time cancels

data improvement

• Sharing between devices?

• SEO

• Only 1 in 100 completes

a purchase

Redirection

Pros

• Smaller pages

(32)

(33)

Mobile Friendly Design Paradigms

• Progressive Degradation

• Mobile First/Progressive Enhancement

• Responsive Web Design

(34)

Progressive Degradation

Even Smaller

Minimize even more

Remove content?

Smaller screen –

shrink images

Animations

Flash?

Change ads?

• Build your Website as normal, and pull/resize content for

smaller screens

• Use Server Side analysis (WURFL) rather than redirects

(35)

Progressive Degradation

WURFL

• PHP based server side tool that

sniffs device details and features

• Can determine what content

to serve

• Screen size can help resize

images (reduce KB load)

require_once 'wurfl_config.php';

require_once WURFL_CLASS_FILE;

$ua =

strtolower($_SERVER['HTTP_USER_AGENT']);

$wurflObj = new wurfl_class();

$wurflObj-> GetDeviceCapabilitiesFromAgent($ua);

$width = $wurflObj->

capabilities['display']['resolution_width'];

(36)

All content here!

Add bigger images/videos

Kick butt with processor

intensive animations

Mobile First/Progressive Enhancement

All content

here!

All content here!

Add bigger

images/videos

“Mobile First” coined by Luke Wrobleski @Lukew

• Start Small and add features as the screen gets bigger

(37)

Enhancement/Degradation

Variations on a theme

Cons

• All content must have

multiple templates

• Content loss for smaller

screens

Pros

• Device detection on server

allows proper content to each

type of device

• One URL to rule them all!

(38)

Responsive Web Design (RWD)

• One URL

• One Codebase

• Future Friendly

Simple: Smaller screen –

fewer columns!

(39)

(40)

Responsive Web Design (RWD)

http://mediaqueri.es

(41)

Responsive Web Design (RWD)

http://mediaqueri.es

• This will Solve EVERYTHING!!!

• …big step, not Quite there

• Same # of requests

• Huge images (for mobile)

• Average Website >1.2MB

(42)

Page Weight Mobile vs. Desktop

• These sites tend to be larger (median 704 KB vs. 504KB)

• No real speed difference

0%

5%

10%

15%

20%

25%

mobile/web same size

All mobile KB

0%

5%

10%

15%

20%

25%

30%

35%

40%

1

2

3

4

5

6

7

8

9

10 >10

same size

all mobile

• How Many Websites are the same size (+-5%) Mobile vs. Web?

–

927/4715 (20%)

(43)

Same (Size) Website for All!

Cons

• Larger KB size

• Potentially not mobile

friendly

• Potentially slower

Pros

• Simple

• If not RWD: no work!

• Preferred by Google

for SEO

(44)

http://www.flickr.com/photos/eschipul/4160817135

(45)

RESS

• REsponsive design with Server Side elements

–

One URL

–

One Codebase

–

Responsive design (as recommended by GOOG)

–

Server optimizes HTML/CSS/JS/Images for each device

• Improve performance

• Reduce page weight

(46)

New Solutions to RWD Page Size

• New Solutions are being built every day:

–

http://responsivecomments.com/

–

Uses Modernizr and JS to read HTML

comments as a DOM node:

<div

data-responsive-comment-media="(min-width: 500px)">

<!--

<div class="box second">500px</div>

-->

<div class="box second">500px</div>

(47)

(48)

Best Performance Design for Web

• KISS

–

Smaller requests

–

Compression

0

10

20

30

40

50

60 gzip

none

gzip

none

gzip

none

gzip

none

gzip

none

gzip

none

css

html

json

plain

script

xml

avg KB Web

Avg KB Mobile

http://bigqueri.es/t/file-size-and-compression-savings/145

(49)

0

20

40

60

80

100

120

140

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20 >20

Total

JavaScript

CSS

Images

Best Design for Performance

Num

b

e

r

o

f

req

u

e

sts

(A

v

g

.)

Speed Index (s)

Not updated

(50)

Best Performance Design for Web

1000

2000

3000

4000

0

10

20

30

40

50

60

70

80

0

10

20

30

40

50

60

70

• KISS

–

Fewer requests

–

Paint the Screen with

(51)

Download Less Stuff: Combine Files

• Minimize # of Downloads and Connections

–

Rule #1 for Faster Websites: Make Fewer HTTP Requests

• Mobile Web:

–

5% > 10 CSS requests

–

45% > 10 JS requests

–

27% > 50 images

• Inline and Combine CSS and JS when Possible

• Consider Spriting images

http://stevesouders.com/hpws/rules.php

HTTP Archive: Personal results 09/2013 data

(52)

http://www.flickr.com/photos/misocrazy/208559467/

(53)

(54)

Web Design Principles for Devices

• Redirect to mobile specific site

• Progressive Degradation

• Mobile First/Progressive Enhancement

• Responsive Web Design

• RESS

(55)

Web Design

http://speckyboy.com/2013/09/11/responsive-design-is-not-about-screen-sizes-any-more/