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

fredag 20. september 13

https://twitter.com/%23!/jonarnes


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


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


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

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

http://slideshare.net/markstanton/speed-matters

http://slideshare.net/markstanton/speed-matters

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?



• Processing Power• Browser • Battery Preserving Strategies



• Network Latency• Available Bandwidth




• Network Latency• Available Bandwidth

• The Implementation



CURRENT STATE OF THE WEB AND MOBILE


1.6 MB4%9%

6%3%

17% 63%

Images ScriptsCSS FlashOther HTML

in 94 requests on average

http://httparchive.org/




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/




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

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










• 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










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

concurrent TCP connections etc.)

9,4Secondslatency in

total



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

concurrent TCP connections etc.)

9,4Secondslatency in

total

Hold that thought...

more on this now.


MOBILE NETWORKS ARE

FREAKING MAGIC!

a quick look on how they work


2.1 s to connect.

Latency, anything from 100 - >500ms


2.40 s, html page loaded

TCP stuff


3-60 seconds....

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

Now download assets


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











• 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!


GOOGLE: 10.2 S.

http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.htmlfredag 20. september 13

http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html

http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html

Load time: 7.3 sSize: 7.3 MB

Load time: 7.7 sSize: 7.2 MB


SERVE A PAGE TO A MOBILE DEVICE IN

LESS THAN 1 SECOND?

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


https://plus.google.com/+IlyaGrigorik/posts/WZeETYCcm1X

https://plus.google.com/+IlyaGrigorik/posts/WZeETYCcm1X

WHO CARES?The users care!


WHO CARES?The users care!

Telco Network53,53 %

Other46,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 size72%

Smaller22%

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/fredag 20. september 13

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






RESPONSIVE WEB DESIGN

Doh...Much smaller

6%

Same size72%

Smaller22%


Also about the same

number of

HTTP requests








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

The famous Iceberg: @brad_frostfredag 20. september 13

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 fredag 20. september 13

http://slidesha.re/14IYNOO

http://slidesha.re/14IYNOO

http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.htmlfredag 20. september 13

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

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


PARET0 PRINCIPLE

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


PARET0 PRINCIPLE

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

the “80/20 rule”


THE LAST 20%will improve performance by 80%


SOMETIMES IT MAKES SENSE TO MULTISERVE


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


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

RWD

device or browser


HOW CAN WE FIX THIS?


HOW CAN WE FIX THIS?

Adaptive Design


THE VALUE CHAIN

Adaptive Responsive

developer server internet telco network device browser


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

Use it!fredag 20. september 13

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/fredag 20. september 13

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”


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/


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




THERE IS A DIFFERENCE



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



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




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


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

Using the User-Agent (++) as a key to look up in a data base.fredag 20. september 13

NYT HORRORvar 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






http://mobile.nytimes.com/

















FEATURES OF A DDR

• Nice place to store “tacit knowledge”• “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


FEATURES OF A DDR

• Nice place to store “tacit knowledge”• “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);

elseinclude(nav.php);







EXAMPLE

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

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


OUR APPROACH


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


https://github.com/whateverweb/device-detection



























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

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


https://github.com/whateverweb/Image-Server



























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


http://img.demo.wew.io/px_320/http://exampe.com/image.png


http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png

http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png



https://github.com/scottjehl/picturefill

https://github.com/scottjehl/picturefill

https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html












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


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


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


http://demo.wew.io/styles/iPadStyles.css'

http://demo.wew.io/styles/iPadStyles.css'

http://demo.wew.io/CSS-processor/examples/inlining/right.css

http://demo.wew.io/CSS-processor/examples/inlining/right.css

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 WeW With WeW

01 0002 0003 0004 000

Time0

5751 1501 7252 300

Latency

20% less data transfer

50% faster download

73% reduced latency


BUT...


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.


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


MARSHALLHEADPHONES.COM

• Down from 1.6MB to 432KB

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


FUN-FACTLoading apple.com consume

1.41% of battery life.

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

12 - 4% in 8 mins of web surfing






FUN-FACTLoading apple.com consume

1.41% of battery life.


Not so

12 - 4% in 8 mins of web surfing






PERFORMANCE FRONT END STARTS WITH THE BACK END

Too much is left to the browser to figure out.


SUMMING UP

developer server internet telco network device browser

We......must do

stuff here...

...to relieve...

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

...and...


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.


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

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

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

ACHIEVE HIS GOALS

WHAT IS SPEED, ANYWAY?


John Arne Sæteråstwitter : @jonarnes


THANK YOU

?






Give Responsive Design a Mobile Performance Boost

Technology

Transcript of Give Responsive Design a Mobile Performance Boost