jon arne sæterås - give responsive design a mobile performance boost

69

Upload: devconfu

Post on 13-May-2015

77 views

Category:

Mobile


1 download

DESCRIPTION

Responsive Web Design (RWD) is a giant leap in the right direction for web on mobile devices. However, RWD is just a small, part of the big picture. What we really want is for the whole value chain to be responsive, not only in the browser., There are a vast number of frameworks and tools on the webs for implementing RWD. Most of these provide a great starting point for mobile ventures. However, there are not so many tools out the to help you with the rest of the value chain. Especially tools that are easy to use and provide a relatively small footprint for front end developers., This talk will explore possibilities you get when you combine the best practices from the client side, with best practices from the server side. Sometimes this technique is called RESS, or Adaptive Design. The talk will contain coding, code samples and best practices based on popular frameworks and tools for Adaptive Design that combines client side and server side techniques. Results, effects and gains in terms of performance will also be documented and exemplified., The audience will gain insights into how their next project can perform even better in mobile devices and smart ways to reduce data traffic, increase speed and be more future friendly by utilizing the server for heavy-lifting.

TRANSCRIPT

Page 1: Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Page 2: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

August 18, 2010

YEP, WEB ON MOBILE IS SLOW

Page 3: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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.

Page 4: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

THE VALUE CHAIN

developer server internet telco  network device

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

browser

Page 5: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

WHY IS MOBILE SLOWER?

• Network Latency • Available Bandwidth

• The Implementation

• Processing Power • Browser • Battery Preserving Strategies • Memory

Page 6: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 7: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

“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

Page 8: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

CURRENT STATE OF THE WEB AND MOBILE

Page 9: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

1.8 MB3 %7 %4 %3 %

17 %65 %

Images ScriptsCSS FlashOther HTML

in 95 requests on average

http://httparchive.org/

Page 10: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 11: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 12: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 13: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

MOBILE NETWORKS ARE

FREAKING MAGIC!

a quick look on how they work

Page 14: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 15: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 16: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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!

Page 17: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

ballpark.

Page 18: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

DEVCONFU.EU

• Load event fired: 32 s.

• 2.3 MB

• 180 requests

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

Page 19: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

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

Page 20: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

WHO CARES?The users care!

Telco Network 53,53 %

Other 46,47 %

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

Mobiletech

Page 21: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

WHY USERS CARE?

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

➜European Vodafone

account roaming in US

Page 22: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

SO, WHAT IS OUR CURRENT APPROACH TO THIS?

Page 23: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

ENTER RESPONSIVE WEB DESIGN

Yay!

Page 24: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 25: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

The famous Iceberg: @brad_frost

Page 26: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 27: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 28: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 29: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

PRIMARY ISSUES

• Over downloading

• Unused assets

• Large images

• Stuff...

!

• Network issues

• High Latency

• Bandwidth

• Flaky connection

!

• Processing power

• Slower CPU

• Memory

• Cache limits

Page 30: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

30-40% SLOWER WITH

JAVASCRIPT ENABLED

Page 31: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

PARET0 PRINCIPLE

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

the “80/20 rule”

Page 32: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

THE LAST 20%will improve performance by 80%

Our example: increasing

performance by 80%

gives a load time of 2,2s

Page 33: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 34: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

RWD

device or browser

Page 35: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

HOW CAN WE FIX THIS?

What can we do to help front end developers make

use of server side stuff?

Page 36: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

THE VALUE CHAIN

Adaptive Responsive

developer server internet telco  network device browser

Page 37: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Use it!

Page 38: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

SERVER?How to make the server side

available to front end devs

Page 39: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 40: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

RESSREsponsive design with Server

Side components

Page 41: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

A BALANCING ACTno right answer

Page 42: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

PURPOSE OF RESS

• Reduce need for client side processing

• Eliminate “over downloading”

• Let the server do the work instead of the browser

Page 43: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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.

Page 44: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

INGREDIENTS OF RESS

Hello, I know exactly how to make you shine!

Information about the requesting device, network, etc.

Request/Response

Page 45: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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/

Page 46: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 47: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 48: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 49: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

EXAMPLE

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

else  include(nav.php);  

Page 50: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

EXAMPLE

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

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

Page 51: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

WHAT WE ENDED UP WITH

Page 52: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

DEVICE DETECTION

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

Response{“pointing_method":"touchscreen"}    

Page 53: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 54: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 55: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 56: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 57: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 58: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 59: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

FTW?Does adaptive design have a

positive impact on performance?

Page 60: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 61: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

BUT...

Page 62: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 63: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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

Page 64: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

MARSHALLHEADPHONES.COM

• Down from 1.6MB to 432KB

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

Page 65: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

WURFL.IO

Page 66: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

PERFORMANCE FRONT END STARTS WITH THE BACK END

Too much is left to the browser to figure out.

Page 67: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

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.

Page 68: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

SUMMING UP

developer server internet telco  network device browser

We......must do stuff

here...

...to relieve...

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

...and...

Page 69: Jon Arne Sæterås - Give Responsive Design a mobile performance boost

THANK YOU

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