velocity eu: give responsive design a mobile performance boost

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

August 18, 2010

YEP, WEB ON MOBILE IS SLOW

@jonarnes - Velocity conf 2013

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

http://techcrunch.com/2013/10/24/amazon-reports-q3-sales-of-17-09b-up-24-but-records-second-straight-loss/?ncid=f

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

For Q3 2013 that is $17mill.

@jonarnes - Velocity conf 2013

THE VALUE CHAIN

developer server internet telco  network device

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

browser

@jonarnes - Velocity conf 2013

WHY IS MOBILE SLOWER?

• Network Latency • Available Bandwidth

• The Implementation

• Processing Power • Browser • Battery Preserving Strategies

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

“4G” BANDWIDTHM

bps

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,6918,17

6,18

14,9913,17

19,6519,7119,9619,07

8,86

2,770,15 1,47

18,85

9,16

19,6520,1616,5

20,04

9,59

0,1

36,3336,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,4910,6112,3416,29

2,53

13,57

1,29

Netcom Telenor

VG 10.11.2013@jonarnes - Velocity conf 2013

CURRENT STATE OF THE WEB AND MOBILE

@jonarnes - Velocity conf 2013

1.6 MB4 %9 %

5 %3 %

17 % 63 %

Images ScriptsCSS FlashOther HTML

in 95 requests on average

http://httparchive.org/

@jonarnes - Velocity conf 2013

1.6 MBin 95 requests on average

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

6,7Seconds download

time

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

1.6 MBin 95 requests on average

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

concurrent TCP connections, keep alive etc.)

9,5Seconds latency in

total

@jonarnes - Velocity conf 2013

1.6 MBin 95 requests on average

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

10,6Seconds total

+ rendering time in the browser + server response time

Disclaimer: lots of assumptions in this calculation!@jonarnes - Velocity conf 2013

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

SERVE A PAGE TO A MOBILE DEVICE IN

LESS THAN 1 SECOND?

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

@jonarnes - Velocity conf 2013

WHO CARES?The users care!

Telco Network 53,53 %

Other 46,47 %

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

Mobiletech

@jonarnes - Velocity conf 2013

WHY USERS CARE?

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

➜European Vodafone

account roaming in US

@jonarnes - Velocity conf 2013

SO, WHAT IS OUR CURRENT APPROACH TO THIS?

@jonarnes - Velocity conf 2013

ENTER RESPONSIVE WEB DESIGN

Yay!

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

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

The famous Iceberg: @brad_frost@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

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 @jonarnes - Velocity conf 2013

@jonarnes - Velocity conf 2013

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

IT’S MORE TO MOBILE THAN JUST “GOING RESPONSIVE”

PARET0 PRINCIPLE

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

the “80/20 rule”

@jonarnes - Velocity conf 2013

THE LAST 20%will improve performance by 80%

Our example: Shaving

80%off 10,6 s. gives a

load time of 2,1s

@jonarnes - Velocity conf 2013

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

RWD

device or browser

@jonarnes - Velocity conf 2013

HOW CAN WE FIX THIS?

What can we do to help front end developers make

use of server side stuff?

@jonarnes - Velocity conf 2013

THE VALUE CHAIN

Adaptive Responsive

developer server internet telco  network device browser

@jonarnes - Velocity conf 2013

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

Use it!@jonarnes - Velocity conf 2013

RESSREsponsive design with Server

Side components

@jonarnes - Velocity conf 2013

A BALANCING ACTno right answer

@jonarnes - Velocity conf 2013

PURPOSE OF RESS

• Eliminate “over downloading”

• Let the server do the work instead of the browser

@jonarnes - Velocity conf 2013

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.

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

INGREDIENTS OF RESS

Hello, I know exactly how to make you shine!

Information about the requesting device, network, etc.

Request/Response

@jonarnes - Velocity conf 2013

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/

@jonarnes - Velocity conf 2013

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.@jonarnes - Velocity conf 2013

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

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

http://mobile.nytimes.com

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

EXAMPLE

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

else  include(nav.php);  

@jonarnes - Velocity conf 2013

EXAMPLE

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

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

@jonarnes - Velocity conf 2013

EXAMPLE

if  ($your_property  ==  “Z”)  //ad  network  X  …  

else  //ad  network  Y  

@jonarnes - Velocity conf 2013

WHAT WE ENDED UP WITH

@jonarnes - Velocity conf 2013

DEVICE DETECTIONSingle Capability

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

Response{"model_name":"touchscreen"}    

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@jonarnes - Velocity conf 2013

EXAMPLE

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

}  http.send();

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

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@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

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

@jonarnes - Velocity conf 2013

FTW?Does adaptive design have a

positive impact on performance?

@jonarnes - Velocity conf 2013

EFFECT

0

108

215

323

430

Size

No WeW With WeW

0

950

1 900

2 850

3 800

Time0

575

1 150

1 725

2 300

Latency

20% less data transfer

50% faster download

73% reduced latency

@jonarnes - Velocity conf 2013

MARSHALLHEADPHONES.COM

• Down from 1.6MB to 432KB

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

@jonarnes - Velocity conf 2013

@jonarnes - Velocity conf 2013

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

PERFORMANCE FRONT END STARTS WITH THE BACK END

Too much is left to the browser to figure out.

@jonarnes - Velocity conf 2013

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.

@jonarnes - Velocity conf 2013

SUMMING UP

developer server internet telco  network device browser

We......must do stuff

here...

...to relieve...

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

...and...

@jonarnes - Velocity conf 2013

John Arne Sæteråstwitter : @jonarnes

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

THANK YOU

?

@jonarnes - Velocity conf 2013