Why web on mobile is slow, and how to make it faster

Presentation from DevConFu. A look into the status if web, mobile and RESS.

2. August 18, 2010 YEP, WEB ON MOBILE IS SLOW
3. 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.
4. THE VALUE CHAIN developer server internet telco  network device Doesn’t really make things more difficult, but reveal a few issues browser
5. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth • The Implementation • Processing Power • Browser • Battery Preserving Strategies • Memory
6. FUN-FACT Loading 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
7. “4G” BANDWIDTH Mbps 0 12,5 25 37,5 50 Location 1 Location 1 Location 2 Location 3 Location 4 Location 5 Location 6 Location 7 Location 8 Location 9 Location 9 Location 9 Location 10 Location 11 Location 12 Location 12 Location 13 Location 13 Location 14 Location 15 Location 16 Location 17 15,18 18,69 18,17 6,18 14,99 13,17 19,65 19,71 19,96 19,07 8,86 2,77 0,15 1,47 18,85 9,16 19,65 20,16 16,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,86 11,78 0 0 21,5 44,09 10,49 10,61 12,34 16,29 2,53 13,57 1,29 Netcom Telenor VG 10.11.2013
8. CURRENT STATE OF THE WEB AND MOBILE
9. 1.8 MB 3 % 7 % 4 % 3 % 17 % 65 % Images Scripts CSS Flash Other HTML in 95 requests on average http://httparchive.org/
10. 1.8 MB in 95 requests on average • Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.8 / 0.24 = 7,5s 7, 5Seconds download time http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
11. 1.8 MB in 95 requests on average •100-200 ms pr roundtrip •Depends....(DNS, pipelining, concurrent TCP connections etc.) 9, 5Seconds latency in total
12. 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 ms O’Reilly: High Performance Browser Networking
13. MOBILE NETWORKS ARE FREAKING MAGIC! a quick look on how they work
14. .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.
15. 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
16. 1.8 MB in 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!
17. GOOGLE: 7.5 S. *at the time, the average web site was 1,2MB. Minus the 2s wakeup, we’re in the ballpark.
18. DEVCONFU.EU • Load event fired: 32 s. • 2.3 MB • 180 requests iPhone 4 iOS 5.1 on 3G (latency 300ms)
19. SERVE A PAGE TO A MOBILE DEVICE IN
    LESS THAN 1 SECOND? A great overview by Ilya Grigorik bit.ly/mobile-barrier
20. WHO CARES? The users care! Telco Network 53,53 % Other 46,47 % How users connect. Page views per connection type. (Scandinavian Countries). Source: Mobiletech
21. WHY USERS CARE? http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet ➜ European Vodafone account roaming in US
22. SO, WHAT IS OUR CURRENT APPROACH TO THIS?
23. ENTER RESPONSIVE WEB DESIGN Yay!
24. 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
25. RWD IS A TECHNIQUE Nothing wrong with the technique! It is brilliant! The famous Iceberg: @brad_frost
26. RWD != MOBILE FRIENDLY but an important step in the right direction
27. 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
28. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
29. PRIMARY ISSUES • Over downloading • Unused assets • Large images • Stuff... ! • Network issues • High Latency • Bandwidth • Flaky connection ! • Processing power • Slower CPU • Memory • Cache limits
30. 30-40% SLOWER WITH JAVASCRIPT ENABLED
31. PARET0 PRINCIPLE Responsive Design is 20% of the work, and might get you 80% on the way the “80/20 rule”
32. THE LAST 20% will improve performance by 80% Our example: increasing performance by 80% gives a load time of 2,2s
33. SOMETIMES IT MAKES SENSE TO MULTI-SERVE ...or at least do layout adjustments to components
34. When all you have is a hammer, every problem looks like a nail RWD device or browser
35. HOW CAN WE FIX THIS? What can we do to help front end developers make use of server side stuff?
36. THE VALUE CHAIN Adaptive Responsive developer server internet telco  network device browser
37. RANT There is a web server. A very capable one, too. Use it!
38. SERVER? How to make the server side available to front end devs
39. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
40. RESS REsponsive design with Server Side components
41. A BALANCING ACT no right answer
42. PURPOSE OF RESS • Reduce need for client side processing • Eliminate “over downloading” • Let the server do the work instead of the browser
43. 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.
44. INGREDIENTS OF RESS Hello, I know exactly how to make you shine! Information about the requesting device, network, etc. Request/Response
45. 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/
46. THERE IS A DIFFERENCE User-Agent sniffing var  isIpad  =  /iPad/i.test(navigator.userAgent); Feature Detection var  appCache=  function()  {      return  !!window.applicationCache;   }; Device Detection Using the User-Agent (++) as a key to look up in a data base. http://www.otsukare.info/2013/10/02/ua-parsing
47. 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
48. 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 Description Repository
49. EXAMPLE if  ($type_of_device  ==  ”smartTV”)   include(TVnav.php);   else   include(nav.php);  
50. EXAMPLE if  ($supports_h264)   echo  ‘<video  .../>’;   else   echo  ‘<a  href=”...”>Download</a>’;  
51. WHAT WE ENDED UP WITH
52. DEVICE DETECTION RESTful API GET  http://ddr.demo.wew.io/c/pointing_method Response {“pointing_method":"touchscreen"}    
53. 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();
54. 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;   }
55. 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”/>
56. 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
57. 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 Side rendering
58. 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
59. FTW? Does adaptive design have a positive impact on performance?
60. EFFECT 0 108 215 323 430 Size No RESS With RESS 0 950 1 900 2 850 3 800 Time 0 575 1 150 1 725 2 300 Latency 20% less data 50% faster download 73% reduced latency
61. BUT...
62. 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...
63. FUN-FACT Loading 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
64. MARSHALLHEADPHONES.COM • Down from 1.6MB to 432KB • Load time down from 6,1s to 1,9s
65. WURFL.IO
66. PERFORMANCE FRONT END
    STARTS WITH THE BACK END Too much is left to the browser to figure out.
67. 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.
68. SUMMING UP developer server internet telco  network device browser We... ...must do stuff here... ...to relieve... ...and... ...to make life easier for... ...and...
69. THANK YOU John Arne Sæterås Twitter: @jonarnes VP of innovation at ScientiaMobile.com http://www.slideshare.net/jonarnes/