August 18, 2010

YEP, WEB ON MOBILE IS SLOW

100 ms faster : 1% increased revenue

1 sec delay: 2.8% drop in revenue

http://www.slideshare.net/stubbornella/designing-fast-websites-presentation http://slideshare.net/markstanton/speed-matters

SLOW IS NOT COOL...even less cool on mobile

For Q3 2013 that is $17mill.

THE VALUE CHAIN

developer server internet telco  network device

Doesn’t really make things more difficult, but reveal a few issues

browser

WHY IS MOBILE SLOWER?

• Network Latency • Available Bandwidth

• The Implementation

• Processing Power • Browser • Battery Preserving Strategies • Memory

FUN-FACTLoading apple.com consume

1.41% of battery life.

http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf

Not so

12 - 4% in 8 mins of web surfing

“4G” BANDWIDTH

Mbp

s

0

12,5

25

37,5

50

Location 1Location 1Location 2Location 3Location 4Location 5Location 6Location 7Location 8 Location 9Location 9Location 9 Location 10Location 11Location 12Location 12Location 13Location 13Location 14Location 15Location 16Location 17

15,1818,69 18,17

6,18

14,99 13,17

19,65 19,71 19,96 19,07

8,86

2,770,15 1,47

18,85

9,16

19,65 20,1616,5

20,04

9,59

0,1

36,33 36,39

24,76

0,36

9,15

42,49

30,55

38,79

24,01

7,8611,78

0 0

21,5

44,09

10,49 10,61 12,3416,29

2,53

13,57

1,29

Netcom Telenor

VG 10.11.2013

CURRENT STATE OF THE WEB AND MOBILE

1.8 MB3 %7 %4 %3 %

17 %65 %

Images ScriptsCSS FlashOther HTML

in 95 requests on average

http://httparchive.org/

1.8 MBin 95 requests on average

• Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.8 / 0.24 = 7,5s

7,5 Seconds download

time

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

1.8 MBin 95 requests on average

• 100-200 ms pr roundtrip • Depends....(DNS, pipelining,

concurrent TCP connections etc.)

9,5 Seconds latency in

total

LATENCY

3g 4g

Control plane 200–2,500 ms 50–100 ms

DNS lookup 200 ms 100 ms

TCP handshake 200 ms 100 ms

TLS handshake 200–400 ms 100–200 ms

HTTP request 200 ms 100 ms

Total latency overhead 200–3500 ms 100–600 msO’Reilly: High Performance Browser Networking

MOBILE NETWORKS ARE

FREAKING MAGIC!

a quick look on how they work

.01 s.

User opens app. Wakes the radio. Device sends a request to the cell tower to use the network

Tower signaling. Device promoted to full power state. Process takes about 2 seconds

2.1 s.

Only needed when device is idle

App is “on line” App does a DNS lookup. Roundtrip is 100-200 ms.

2.2 s.

Latency, anything from 100 - >500ms

TCP connection HTML document returned

2.4 s.

2.4 s, the HTML page is downloaded

Browser rendering Fetches linked resources. More DNS lookups (one for each unique domain) and TCP connections.

2.6 s.

Page displayed Puh...

3-60 s.

http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b

1.8 MBin 95 requests on average

• Wake up radio (one time) • TCP and DNS (one time) • 95 round trips (6 req pr conn.) • Downloading 1.8 mb over 2Mbps

11,2Seconds total

+ rendering time in the browser + server response time

Disclaimer: lots of assumptions in this calculation!

GOOGLE: 7.5 S.*at the time, the average web site was 1,2MB. Minus the 2s wakeup, we’re in the

ballpark.

DEVCONFU.EU

• Load event fired: 32 s.

• 2.3 MB

• 180 requests

iPhone 4 iOS 5.1 on 3G (latency 300ms)

SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND?

A great overview by Ilya Grigorik bit.ly/mobile-barrier

WHO CARES?The users care!

Telco Network 53,53 %

Other 46,47 %

How users connect. Page views per connection type. (Scandinavian Countries). Source:

Mobiletech

WHY USERS CARE?

http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet

➜European Vodafone

account roaming in US

SO, WHAT IS OUR CURRENT APPROACH TO THIS?

ENTER RESPONSIVE WEB DESIGN

Yay!

RESPONSIVE WEB DESIGN

Doh...Much smaller

6 %

Same size 72 %

Smaller 22 %

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

Also about the same

number of

HTTP requests

RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!

The famous Iceberg: @brad_frost

RWD != MOBILE FRIENDLYbut an important step in the right direction

Load time: 9.07s * Size: 288.14 kb

Load time: 2.36 s * Size: 36.59 kb

*) Load event fired. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO

http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html

PRIMARY ISSUES

• Over downloading

• Unused assets

• Large images

• Stuff...

!

• Network issues

• High Latency

• Bandwidth

• Flaky connection

!

• Processing power

• Slower CPU

• Memory

• Cache limits

30-40% SLOWER WITH

JAVASCRIPT ENABLED

PARET0 PRINCIPLE

Responsive Design is 20% of the work, and might get you 80% on the way

the “80/20 rule”

THE LAST 20%will improve performance by 80%

Our example: increasing

performance by 80%

gives a load time of 2,2s

SOMETIMES IT MAKES SENSE TO MULTI-SERVE...or at least do layout adjustments to components

When all you have is a hammer, every problem looks like a nail

RWD

device or browser

HOW CAN WE FIX THIS?

What can we do to help front end developers make

use of server side stuff?

THE VALUE CHAIN

Adaptive Responsive

developer server internet telco  network device browser

RANTThere is a web server. A very capable one, too.

Use it!

SERVER?How to make the server side

available to front end devs

http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/

RESSREsponsive design with Server

Side components

A BALANCING ACTno right answer

PURPOSE OF RESS

• Reduce need for client side processing

• Eliminate “over downloading”

• Let the server do the work instead of the browser

RESS IN A NUT SHELL

•RWD provide a sensible default or fallback •The server does the optimization

Reduce asset size

Selective markup

Ad serving

Social networks

Minify

zip

Cache

etc.

INGREDIENTS OF RESS

Hello, I know exactly how to make you shine!

Information about the requesting device, network, etc.

Request/Response

NOT A CRIME!82% of top 100 Alexa sites use

Device Detection

In the case of Mashable, we also detect the type of

device and change the site’s behavior

accordingly.

“

”

http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/ http://mashable.com/2012/12/11/responsive-web-design/

THERE IS A DIFFERENCE

User-Agent sniffingvar  isIpad  =  /iPad/i.test(navigator.userAgent);

Feature Detectionvar  appCache=  function()  {      return  !!window.applicationCache;  };

Device DetectionUsing the User-Agent (++) as a key to look up in a data base.

http://www.otsukare.info/2013/10/02/ua-parsing

NYTIMES!var ua = navigator.userAgent;!window.BBDevice = {! isOldBB: false,! indexOfVersion: ua.indexOf("Version/"),! indexOfBB: ua.indexOf("BlackBerry"),! fullVersion: null,! version: null!};!if (window.BBDevice.indexOfBB >= 0) {! existingClasses = document.body.className = existingClasses + " bb";! if (ua.indexOf("WebKit") < 0) {! existingClasses = document.body.className = existingClasses + " oldbb";! window.BBDevice.isOldBB = true;! window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfBB);! window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(window.BBDevice.fullVersion.indexOf("/") + 1, window.BBDevice.fullVersion.indexOf(" "));! window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("."));! } else {! if (window.BBDevice.indexOfVersion >= 0) {! window.BBDevice.indexOfVersion = window.BBDevice.indexOfVersion + 8;! window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfVersion);! window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(" "));! window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("."));! }! }!} else if (ua.indexOf("MSIE 9.0") >= 0 || ua.indexOf("IEMobile/9.0") >= 0) {! existingClasses = document.body.className = existingClasses + " win75";! window.WMDevice = true;!} else if (ua.indexOf("MSIE 10.0") >= 0 || ua.indexOf("IEMobile/10.0") >= 0) {! window.WMDevice = true;!} else if (ua.indexOf("Opera Mini") >= 0) {! window.OperaMiniDevice = true;!}

http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/

http://mobile.nytimes.com

FEATURES OF A DDR

• Nice place to store custom stuff • “Business rules” • Specifics to your site

• Override feature detected features • If a feature works, but not well enough to make it useable • False positives (not a HUGE issue, but still)

• Available server side too • Adapt and optimize stuff before sending to client

Device Descri

ption

Repository

EXAMPLE

if  ($type_of_device  ==  ”smartTV”)  include(TVnav.php);  

else  include(nav.php);  

EXAMPLE

if  ($supports_h264)  echo  ‘<video  .../>’;  

else  echo  ‘<a  href=”...”>Download</a>’;  

WHAT WE ENDED UP WITH

DEVICE DETECTION

RESTful APIGET  http://ddr.demo.wew.io/c/pointing_method

Response{“pointing_method":"touchscreen"}    

EXAMPLE

var  http  =  new  XMLHttpRequest();  http.open("GET",  "http://ddr.demo.wew.io/c/brand_name",  true);  http.onreadystatechange  =  function()  {  if  (http.readyState  ==  4)  console.log(http.responseText);  

}  http.send();

EXAMPLE

public  function  get($capa){     foreach(getallheaders()  as  $key  =>  $value)  {       if  ($key  !="Host")            $this-­‐>headers[]  =  $key  .  ':  '  .  $value;     }     $url  =  $this-­‐>service  .  $capa;     $curl  =  curl_init($url);     curl_setopt($curl,  CURLOPT_RETURNTRANSFER,  true);     curl_setopt($curl,  CURLOPT_HTTPHEADER,  $this-­‐>headers);         $this-­‐>response  =  curl_exec($curl);     curl_close($curl);     return  json_decode($this-­‐>response)-­‐>$capa;  }

IMAGE OPTIMIZING

<img  src="http://img.demo.wew.io/http://example.com/image.jpg"/>

Simple Usage

Advanced Usage<img  src=”http://img.demo.wew.io/vpw_1024/bp_w/pc/w_31/m_48/n_98/http://example.com/img.png”/>

EXAMPLE

<div  data-­‐picture  data-­‐alt="A  beautiful  butterfly">     <div  data-­‐src="http://img.demo.wew.io/px_100/http://exampe.com/image.png"></div>     <div  data-­‐src="http://img.demo.wew.io/px_320/http://exampe.com/image.png"    

data-­‐media="(min-­‐width:  320px)"></div>     <div  data-­‐src="http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png"    

data-­‐media="(min-­‐width:  320px)  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  2.0)"></div>  !   <noscript>            <img  src="http://img.demo.wew.io/px_10/http://exampe.com/image.png">     </noscript>  </div>

Picturefill: https://github.com/scottjehl/picturefill.

Using Picturefill

CSS OPTIMIZATION

Device Capabilities as Media Features

Removing overhead and excess styles

@media  (-­‐wew-­‐pointing-­‐method:  touchscreen){                                a  {      

padding:  10px;  }              

}

@media  all  and  (min-­‐width:  1500px){       //removed  for  devices  where  1500px  is  impossible.  e.g.  iPhones                    body{color:  green;}                  }

Server S

ide renderi

ng

EXAMPLE

<!doctype  html>  <html>  <head>  !    <link  rel="stylesheet"  href="//css.demo.wew.io/http://example.com/style.css”/>  !</head>  <body>  !  <img  src="http://img.demo.wew.io/http://example.com/image.jpg"/>  !<script>    var  w=new  wew();    w.getSet("myset",cb);  </script>  !</body>  </html>  

• Markup lives anywhere • CSS and images are proxied,

optimized and cached • Device data available client side

FTW?Does adaptive design have a

positive impact on performance?

EFFECT

0108215323430

Size

No RESS With RESS

0950

1 9002 8503 800

Time0

5751 1501 7252 300

Latency

20% less data 50% faster download

73% reduced latency

BUT...

CAN’T DO MAGIC

0

975

1 950

2 925

3 900

Onload

no WeW with RESS

Only 4% faster in total

Due to lazy loading of assets and repaints etc.

Lazy loading good

or bad? Depends...

FUN-FACTLoading apple.com consume 1.41% of battery

life.

http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf

Not so

12 - 4% in 8 mins of web surfing

MARSHALLHEADPHONES.COM

• Down from 1.6MB to 432KB

• Load time down from 6,1s to 1,9s

WURFL.IO

PERFORMANCE FRONT END STARTS WITH THE BACK END

Too much is left to the browser to figure out.

THE RULES

1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires Header 4. Gzip Components 5. Put Stylesheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make AJAX Cacheable

By Steve Souders: http://stevesouders.com/hpws/rules.php

Most of these are implemented server side.

SUMMING UP

developer server internet telco  network device browser

We......must do stuff

here...

...to relieve...

...and......to make life easier for...

...and...

THANK YOU

John Arne SæteråsTwitter : @jonarnesVP of innovation at ScientiaMobile.comhttp://www.slideshare.net/jonarnes/