Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Jon Arne Sæterås

May 29, 2014
Tweet

More Decks by Jon Arne Sæterås

Other Decks in Technology

Transcript

  1. 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.
  2. THE VALUE CHAIN developer server internet telco  network device Doesn’t

    really make things more difficult, but reveal a few issues browser
  3. WHY IS MOBILE SLOWER? • Network Latency • Available Bandwidth

    • The Implementation • Processing Power • Browser • Battery Preserving Strategies • Memory
  4. “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
  5. 1.8 MB 3 % 7 % 4 % 3 %

    17 % 65 % Images Scripts CSS Flash Other HTML in 95 requests on average http://httparchive.org/
  6. 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
  7. 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
  8. 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
  9. .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.
  10. 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
  11. 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!
  12. GOOGLE: 7.5 S. *at the time, the average web site

    was 1,2MB. Minus the 2s wakeup, we’re in the ballpark.
  13. DEVCONFU.EU • Load event fired: 32 s. • 2.3 MB

    • 180 requests iPhone 4 iOS 5.1 on 3G (latency 300ms)
  14. SERVE A PAGE TO A MOBILE DEVICE IN  LESS

    THAN 1 SECOND? A great overview by Ilya Grigorik bit.ly/mobile-barrier
  15. WHO CARES? The users care! Telco Network 53,53 % Other

    46,47 % How users connect. Page views per connection type. (Scandinavian Countries). Source: Mobiletech
  16. 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
  17. RWD IS A TECHNIQUE Nothing wrong with the technique! It

    is brilliant! The famous Iceberg: @brad_frost
  18. 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
  19. PRIMARY ISSUES • Over downloading • Unused assets • Large

    images • Stuff... ! • Network issues • High Latency • Bandwidth • Flaky connection ! • Processing power • Slower CPU • Memory • Cache limits
  20. PARET0 PRINCIPLE Responsive Design is 20% of the work, and

    might get you 80% on the way the “80/20 rule”
  21. THE LAST 20% will improve performance by 80% Our example:

    increasing performance by 80% gives a load time of 2,2s
  22. When all you have is a hammer, every problem looks

    like a nail RWD device or browser
  23. HOW CAN WE FIX THIS? What can we do to

    help front end developers make use of server side stuff?
  24. PURPOSE OF RESS • Reduce need for client side processing

    • Eliminate “over downloading” • Let the server do the work instead of the browser
  25. 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.
  26. INGREDIENTS OF RESS Hello, I know exactly how to make

    you shine! Information about the requesting device, network, etc. Request/Response
  27. 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/
  28. 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
  29. 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
  30. 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
  31. EXAMPLE if  ($supports_h264)   echo  ‘<video  .../>’;   else  

    echo  ‘<a  href=”...”>Download</a>’;  
  32. 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();
  33. 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;   }
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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...
  39. PERFORMANCE FRONT END  STARTS WITH THE BACK END Too

    much is left to the browser to figure out.
  40. 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.
  41. SUMMING UP developer server internet telco  network device browser We...

    ...must do stuff here... ...to relieve... ...and... ...to make life easier for... ...and...
  42. THANK YOU John Arne Sæterås Twitter: @jonarnes VP of innovation

    at ScientiaMobile.com http://www.slideshare.net/jonarnes/