• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Velocity EU: Give Responsive Design a Mobile Performance Boost
 

Velocity EU: Give Responsive Design a Mobile Performance Boost

on

  • 845 views

With RWD as the base, a story about how to still utilize the server for what the server is great at.

With RWD as the base, a story about how to still utilize the server for what the server is great at.

Statistics

Views

Total Views
845
Views on SlideShare
735
Embed Views
110

Actions

Likes
1
Downloads
9
Comments
0

5 Embeds 110

http://mpulp.mobi 53
https://twitter.com 48
http://www.linkedin.com 5
http://plus.url.google.com 3
http://feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Velocity EU: Give Responsive Design a Mobile Performance Boost Velocity EU: Give Responsive Design a Mobile Performance Boost Presentation Transcript

    • YEP, WEB ON MOBILE IS SLOW August 18, 2010 John Arne Sæterås Twitter: @jonarnes Head of innovation at Mobiletech http://www.slideshare.net/jonarnes/ @jonarnes - Velocity conf 2013
    • SLOW IS NOT COOL ...even less cool on mobile 100 ms faster: 1% increased revenue For Q3 2013 that is $17mill. @jonarnes - Velocity conf 2013 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
    • THE VALUE CHAIN developer server internet telco  network device Doesn’t really make things more difficult, but reveal a few issues @jonarnes - Velocity conf 2013 browser
    • WHY IS MOBILE SLOWER? • Processing Power • Browser • Battery Preserving Strategies • Network Latency • Available Bandwidth • The Implementation @jonarnes - Velocity conf 2013
    • No t so FUN-FACT Loading apple.com consume 1.41% of battery life.
 12 - 4% in 8 mins of web surfing @jonarnes - Velocity conf 2013 http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
    • “4G” BANDWIDTH Netcom Telenor 50 44,09 42,49 37,5 38,79 36,3336,39 Mbps 30,55 25 24,76 18,6918,17 15,18 12,5 0 6,18 0,36 24,01 19,6519,7119,9619,07 14,99 13,17 9,15 21,5 11,78 7,86 8,86 2,77 0,15 1,47 0 0 20,04 19,6520,16 16,5 16,29 13,57 12,34 10,4910,61 9,59 9,16 18,85 2,53 1,29 0,1 17 n tio ca 16 Lo n tio ca 15 Lo n tio ca 14 Lo n tio ca 13 Lo n tio ca 13 Lo n tio ca 12 Lo n tio ca 12 Lo n tio ca 11 Lo n tio ca 10 Lo n tio ca 9 Lo tion ca 9 Lo n tio ca 9 Lo n tio ca 8 Lo tion ca 7 Lo n tio ca 6 Lo n tio ca 5 Lo n tio ca 4 Lo n tio ca 3 Lo n tio ca 2 Lo n tio ca 1 Lo n tio ca 1 Lo n tio ca Lo @jonarnes - Velocity conf 2013 VG 10.11.2013
    • CURRENT STATE OF THE WEB AND MOBILE @jonarnes - Velocity conf 2013
    • 1.6 MB in 95 requests on average 4 % 9 % 5 % 3 % 17 % Images CSS Other 63 % Scripts Flash HTML http://httparchive.org/ @jonarnes - Velocity conf 2013
    • 1.6 MB in 95 requests on average 6,7 Seconds download time • Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.6 / 0.24 = 6,7s @jonarnes - Velocity conf 2013 http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
    • 1.6 MB in 95 requests on average 9,5 Seconds latency in total • 100-200 ms pr roundtrip • Depends....(DNS, pipelining, concurrent TCP connections, keep alive etc.) @jonarnes - Velocity conf 2013
    • 1.6 MB in 95 requests on average 10,6 Seconds total + rendering time in the browser + server response time • Wake up radio (one time) • TCP and DNS (one time) • 95 round trips (6 req pr conn.) • Downloading 1.6 MB over 2Mbps @jonarnes - Velocity conf 2013 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.
    • 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? Telco Network 53,53 % The users care! Other 46,47 % How users connect. Page views per connection type. (Scandinavian Countries). Source: Mobiletech @jonarnes - Velocity conf 2013
    • WHY USERS CARE? ➜ European Vodafone account roaming in US @jonarnes - Velocity conf 2013 http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
    • SO, WHAT IS OUR CURRENT APPROACH TO THIS? @jonarnes - Velocity conf 2013
    • ENTER RESPONSIVE WEB DESIGN Yay! @jonarnes - Velocity conf 2013
    • Same size 72 % RESPONSIVE WEB DESIGN Doh... Als oa bou nu t th HT mb e sa er o TP me req f ues ts @jonarnes - Velocity conf 2013 Much smaller 6 % Smaller 22 % http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    • RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! @jonarnes - Velocity conf 2013 The famous Iceberg: @brad_frost
    • RWD != MOBILE FRIENDLY but an important step in the right direction @jonarnes - Velocity conf 2013
    • Load time: 2.36 s * Size: 36.59 KB @jonarnes - Velocity conf 2013 Load time: 9.07s * Size: 288.14 KB *) Load event fired. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO
    • @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”
    • the “80 /20 rul PARET0 PRINCIPLE @jonarnes - Velocity conf 2013 e” Responsive Design is 20% of the work, and might get you 80% of the way
    • Ou r ex 80 %o amp le: ff Sh loa 10, 6s avi dt im .g ng e of ive 2,1 s a s THE LAST 20% will improve performance by 80% @jonarnes - Velocity conf 2013
    • RW D When all you have is a hammer, every problem looks like a nail dev @jonarnes - Velocity conf 2013 ice o rb row ser
    • 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 developer Adaptive @jonarnes - Velocity conf 2013 server internet telco  network device browser Responsive
    • RANT There is a web server. A very capable one, too. Use it! @jonarnes - Velocity conf 2013
    • RESS REsponsive design with Server Side components @jonarnes - Velocity conf 2013
    • A BALANCING ACT no 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 size sset uce a arkup Red ive m g elect rvin S d se A orks netw cial So inify M zip ache C etc. @jonarnes - Velocity conf 2013
    • SOMETIMES IT MAKES SENSE .TOt MULTI-SERVE ..or a least do lay out adjustm ents to component s on the pa ge @jonarnes - Velocity conf 2013
    • INGREDIENTS OF RESS Hello, I know exactly how to make you shine! Request/Response Information about the requesting device, network, etc. @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. ” @jonarnes - Velocity conf 2013 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 Feature Detection var  appCache=  function()  {      return  !!window.applicationCache;   }; User-Agent sniffing var  isiPhone  =  /iPhone/i.test(navigator.userAgent); Device Detection GET  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:// @jonarnes - Velocity conf 2013 mobile .nytim es.com http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/
    • 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 @jonarnes - Velocity conf 2013 ion ipt scr ry De ito ice pos ev e D R
    • 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 DETECTION Single Capability Request GET  http://ddr.demo.wew.io/c/pointing_method Response {"model_name":"touchscreen"}     Capability Sets Request GET  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 Simple Usage <img  src="http://img.demo.wew.io/http://example.com/image.jpg"/> 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 Se er rv de n re e id S ng ri @media  (-­‐wew-­‐pointing-­‐method:  touchscreen){                                a  {       padding:  10px;   }               } Removing overhead and excess styles @media  all  and  (min-­‐width:  1500px){       //removed  for  devices  where  1500px  is  impossible.  e.g.  iPhones                    body{color:  green;}                   } Examples and documentation: https://github.com/whateverweb/CSS-processor @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>   @jonarnes - Velocity conf 2013 • 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? @jonarnes - Velocity conf 2013
    • EFFECT No WeW With WeW 430 3 800 2 300 323 2 850 1 725 215 1 900 1 150 108 950 575 0 0 0 Size 20% less data transfer @jonarnes - Velocity conf 2013 Time 50% faster download Latency 73% reduced latency
    • 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
    • @jonarnes - Velocity conf 2013 http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
    • 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 @jonarnes - Velocity conf 2013 Most of these are implemented server side.
    • SUMMING UP We... developer @jonarnes - Velocity conf 2013 ...must do stuff here... server ...to relieve... internet ...and... telco  network ...to make life easier for... device ...and... browser
    • THANK YOU ? John Arne Sæterås twitter: @jonarnes http://www.slideshare.net/jonarnes/ @jonarnes - Velocity conf 2013