John Arne SæteråsTwitter : @jonarnesHead of innovation at Mobiletechhttp://www.slideshare.net/jonarnes/

August 18, 2010

YEP, WEB ON MOBILE IS SLOW

torsdag 24. oktober 13

THESE TWO GUYS.......are really impatient

torsdag 24. oktober 13

100 ms faster :1% increased revenue

1 sec delay:2.8% drop in revenue

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

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

torsdag 24. oktober 13

THE VALUE CHAIN

developer server internet telco  network device

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

browser

torsdag 24. oktober 13

WHY IS MOBILE SLOWER?

• Network Latency• Available Bandwidth

• The Implementation

• Processing Power• Browser • Battery Preserving Strategies

torsdag 24. oktober 13

CURRENT STATE OF THE WEB AND MOBILE

torsdag 24. oktober 13

1.6 MB4%9%

6%3%

17% 63%

Images ScriptsCSS FlashOther HTML

in 94 requests on average

http://httparchive.org/

torsdag 24. oktober 13

ASIDE...

• In 2030• Average web site is

320MB

• Average (mobile) bandwidth is 93Mbps

http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/

torsdag 24. oktober 13

1.6 MBin 94 requests on average

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

6,7Secondsdownload

time

Hold that thought...

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

torsdag 24. oktober 13

1.6 MBin 94 requests on average

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

concurrent TCP connections etc.)

9,4Secondslatency in

total

Hold that thought...

more on this now.

torsdag 24. oktober 13

MOBILE NETWORKS ARE

FREAKING MAGIC!

a quick look on how they work

torsdag 24. oktober 13

.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.

torsdag 24. oktober 13

Latency, anything from 100 - >500ms

TCP connectionHTML document returned

2.4 s.

2.4 s, the HTML page is downloaded

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

2.6 s.

Page displayedPuh...

3-60 s.

http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7btorsdag 24. oktober 13

1.6 MBin 94 requests on average

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

10,6Secondstotal

+ rendering time in the browser+ server response time

Disclaimer: lots of assumptions in this calculation!

torsdag 24. oktober 13

GOOGLE: 10.2 S.

http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.htmltorsdag 24. oktober 13

MAKINGWEB.NO

• Load event fired: 12,77 s.

• 1 MB

• 58 requests

torsdag 24. oktober 13

SERVE A PAGE TO A MOBILE DEVICE IN

LESS THAN 1 SECOND?

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

torsdag 24. oktober 13

WHO CARES?The users care!

Telco Network53,53 %

Other46,47 %

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

Source: Mobiletech

torsdag 24. oktober 13

WHY USERS CARE?

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

➜European Vodafone

account roaming in US

torsdag 24. oktober 13

SO, WHAT IS OUR CURRENT APPROACH TO THIS?

torsdag 24. oktober 13

ENTER RESPONSIVE WEB DESIGN

Yay!

torsdag 24. oktober 13

RESPONSIVE WEB DESIGN

Doh...Much smaller

6%

Same size72%

Smaller22%

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

Also about the same

number of

HTTP requests

torsdag 24. oktober 13

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

The famous Iceberg: @brad_frosttorsdag 24. oktober 13

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

torsdag 24. oktober 13

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 torsdag 24. oktober 13

http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.htmltorsdag 24. oktober 13

PRIMARY ISSUES

• Over downloading

• Unused assets

• Large images

• Stuff...

• Network issues

• High Latency

• Bandwidth

• Flaky connection

torsdag 24. oktober 13

PARET0 PRINCIPLE

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

the “80/20 rule”

torsdag 24. oktober 13

THE LAST 20%will improve performance by 80%

Our example: Shaving

80%off 10,6 s. gives a

load time of 2,1s

torsdag 24. oktober 13

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

torsdag 24. oktober 13

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

RWD

device or browser

torsdag 24. oktober 13

HOW CAN WE FIX THIS?

What can we do to help front end developers make

use of server side stuff?

torsdag 24. oktober 13

THE VALUE CHAIN

Adaptive Responsive

developer server internet telco  network device browser

torsdag 24. oktober 13

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

Use it!torsdag 24. oktober 13

SERVER?How to make the server side

available to front end devs

torsdag 24. oktober 13

torsdag 24. oktober 13

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

RESSREsponsive design with Server

Side components

torsdag 24. oktober 13

A BALANCING ACTno right answer

torsdag 24. oktober 13

PURPOSE OF RESS

• Reduce need for client side processing

• Eliminate “over downloading”

• Let the server do the work instead of the browser

torsdag 24. oktober 13

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.

torsdag 24. oktober 13

INGREDIENTS OF RESS

Hello, I know exactly how to make you shine!

Information about the requesting device, network, etc.

Request/Response

torsdag 24. oktober 13

No, this is NOT what I mean...

torsdag 24. oktober 13

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/

torsdag 24. oktober 13

THERE IS A DIFFERENCE

User-Agent sniffingvar  isiPhone  =  /iPhone/i.test(navigator.userAgent);

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

Device DetectionGET  http://ddr.demo.wew.io/c/dual_orientation

Using the User-Agent (++) as a key to look up in a data base.torsdag 24. oktober 13

NYTIMESvar 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";}

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

http://mobile.nytimes.com

torsdag 24. oktober 13

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

torsdag 24. oktober 13

EXAMPLE

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

elseinclude(nav.php);

http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/

torsdag 24. oktober 13

EXAMPLE

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

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

torsdag 24. oktober 13

WHAT WE ENDED UP WITH

torsdag 24. oktober 13

DEVICE DETECTIONSingle Capability

RequestGET  http://ddr.demo.wew.io/c/model_name

Response{"model_name":"iPhone"}    

Capability SetsRequestGET  http://ddr.demo.wew.io/cset/mySet

Response{"capa1":"first  capa  value","capa2":"second  capa  value"  ...}

Examples and documentation: https://github.com/whateverweb/device-detection

torsdag 24. oktober 13

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();

torsdag 24. oktober 13

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;}

torsdag 24. oktober 13

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”/>

Examples and documentation: https://github.com/whateverweb/Image-Server

torsdag 24. oktober 13

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. Full example: https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html

Using Picturefill

torsdag 24. oktober 13

CSS OPTIMIZATION

Device Capabilities as Media Features

Removing overhead and excess styles

Examples and documentation: https://github.com/whateverweb/CSS-processor

@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

torsdag 24. oktober 13

EXAMPLE

@import  url('http://demo.wew.io/styles/iPadStyles.css')  all  and  (-­‐wew-­‐model-­‐name:  iPad);

@import  url(http://demo.wew.io/CSS-­‐processor/examples/inlining/right.css)  all  and  (min-­‐device-­‐width:  480px);

torsdag 24. oktober 13

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

torsdag 24. oktober 13

FTW?Does adaptive design have a

positive impact on performance?

torsdag 24. oktober 13

EFFECT

0108215323430

Size

No WeW With WeW

01 0002 0003 0004 000

Time0

5751 1501 7252 300

Latency

20% less data transfer

50% faster download

73% reduced latency

torsdag 24. oktober 13

BUT...

torsdag 24. oktober 13

CAN’T DO MAGIC

0

975

1 950

2 925

3 900

Onload

no WeW with WeW

Only 4% faster in total

Due to lazy loading of assetsand repaints etc.

Lazy loading good

or bad? Depends...

torsdag 24. oktober 13

MARSHALLHEADPHONES.COM

• Down from 1.6MB to 432KB

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

torsdag 24. oktober 13

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

torsdag 24. oktober 13

PERFORMANCE FRONT END STARTS WITH THE BACK END

Too much is left to the browser to figure out.

torsdag 24. oktober 13

SUMMING UP

developer server internet telco  network device browser

We......must do

stuff here...

...to relieve...

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

...and...

torsdag 24. oktober 13

THE RULES

1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add an Expires Header4. Gzip Components5. Put Stylesheets at the Top6. Put Scripts at the Bottom7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10.Minify JavaScript11.Avoid Redirects12.Remove Duplicate Scripts13.Configure ETags14.Make AJAX Cacheable

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

Most of these are implemented server side.

torsdag 24. oktober 13

POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FAST THE USER CAN

ACHIEVE HIS GOALS

WHAT IS SPEED, ANYWAY?

torsdag 24. oktober 13

John Arne Sæteråstwitter : @jonarnes

http://www.slideshare.net/jonarnes/

THANK YOU

?

torsdag 24. oktober 13