Better by Proxy at Smashing Conf NY

Better by Proxy at Smashing Conf NY

Proxy browsers get a bad rep. “They’re antiques.” “They behave in weird ways.” “They’re crappy browsers.” But a deeper understanding of what they accomplish, and what they do behind the scenes, reveals that they’re actually quite ingenious. And far from becoming outdated, they’re uniquely positioned to bring the web to the next wave of people and devices around the world.

We’ll look some of the more popular proxy browsers today, what they do, how to ensure your site works well on them, and why that’s so important.

Presented at Smashing Conf, NY in New York, NY on June 16, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

June 16, 2015
Tweet

Transcript

  1. BETTER BY PROXY Tim Kadlec | @tkadlec

  2. None
  3. None
  4. None
  5. None
  6. “Opera Mini is a s&%##* browser…

  7. “Proxy browsers are s&%##* browsers…

  8. None
  9. None
  10. None
  11. None
  12. None
  13. • No 3G • No Wi-Fi • Non-touch • 240

    x 320 • 64MB internal
  14. 0 3000 6000 9000 12000 Kenya Pakistan Iran India Azerbaijan

    Armenia China Belarus Kazakhstan Bosnia Georgia Macedonia US
  15. 0 3000 6000 9000 12000 Kenya Pakistan Iran India Azerbaijan

    Armenia China Belarus Kazakhstan Bosnia Georgia Macedonia US 10x
  16. None
  17. None
  18. 0.1% 16.0% 3G Penetration Fixed Broadband

  19. Iran 3G connections are “…against human and moral standards.” http://bit.ly/1pKV0gH

  20. speed as a weapon

  21. Our internet is not their internet.

  22. http://flic.kr/p/cfoupQ

  23. None
  24. “…as bandwidth grows, and as processing power grows, and as

    browsers get better we just keep filling everything up. Jeff Veen Path to Performance Podcast
  25. 2099kb

  26. 2099kb

  27. None
  28. None
  29. 100 million daily active users

  30. 42.2% market share in India

  31. 34.6% market share in China

  32. 258 million active users in January

  33. 168 billion pages transcoded

  34. Top 5 tablet browser in 40 countries

  35. None
  36. Conservative Aggressive

  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. Network constrained

  47. Bandwidth
 Latency Cost of Data

  48. Device constrained

  49. Memory CPU

  50. Conservative Aggressive

  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. High Bandwidth/Low Latency

  58. None
  59. None
  60. None
  61. 23%

  62. gzip

  63. gzip minification

  64. gzip minification image compression image transcoding

  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. [REMOTE_ADDR] => 90.145.158.4

  72. [REMOTE_ADDR] => 66.249.81.203

  73. [REMOTE_ADDR] => 66.249.81.203 [HTTP_X_FORWARDED_FOR] => 90.145.158.4

  74. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109

  75. [HTTP_VIA] => 1.1 Chrome-Compression-Proxy

  76. [HTTP_X_UCBROWSER_UA] => dv(XT1095);pr(UCBrowser/10.3.0.552);ov(Android 5.0);ss(360*592);pi(1080*1776);bt(GJ);pm(1);bv( 1);nm(0);im(0);sr(0);nt(1);dn(8664342047-3f9902 87);ai(720089404747345);

  77. POTENTIAL ISSUE #1:
 Minification removes comments in JS/CSS

  78. SOLUTION:
 Don’t rely on comments
 Use Cache-Control: no-transform POTENTIAL ISSUE

    #1:
 Minification removes comments in JS/CSS
  79. POTENTIAL ISSUE #2:
 Images may be removed from page

  80. SOLUTION:
 Ensure all images have text fallbacks POTENTIAL ISSUE #2:


    Images may be removed from page
  81. POTENTIAL ISSUE #3:
 Image transcoding or compression may result
 in

    blurry images
  82. POTENTIAL ISSUE #3:
 Image transcoding or compression may result
 in

    blurry images SOLUTION:
 Use Cache-Control: no-transform
  83. None
  84. None
  85. DATA SAVINGS Up to 50% Approximately 58% Up to 60%

  86. Conservative Aggressive

  87. None
  88. REMOTE BROWSING

  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. var myButton = document.getElementById('#mybutton'); button.addEventListener('click', function(){ //something });

  97. None
  98. None
  99. None
  100. None
  101. None
  102. Everything requires user interaction. Everything requires a server round-trip.

  103. Limit data consumed and limit impact on device.

  104. None
  105. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  106. setTimeout ~= 5s setInterval ~= 5s xmlHTTPRequest ~= 5s

  107. setTimeout executed immediately setInterval executed once immediately xmlHTTPRequest ~= 3s-4s

  108. None
  109. None
  110. DIFF

  111. Limit data consumed and limit impact on device while providing

    a nearly equal experience to a typical browser.
  112. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  113. None
  114. RENDERING ENGINE Presto Blink (Chrome 30) U2 kernel (based on

    WebKit) Gecko
  115. border-image border-radius gradients transitions animations @keyframes font-face javascript only API’s

    (ex: localStorage)
  116. None
  117. no icon fonts

  118. supportSVG = true

  119. supportSVG = true no onerror

  120. UCWEB/2.0 (MIDP-2.0; U; Adr 5.0; EN- US; XT1095) U2/1.0.0 UCBrowser/

    9.9.1.554 U2/1.0.0 Mobile
  121. UCWEB/2.0 (MIDP-2.0; U; Adr 5.0; EN- US; XT1095) U2/1.0.0 UCBrowser/

    9.9.1.554 U2/1.0.0 Mobile
  122. document.write(navigator.userAgent);

  123. Mozilla/50 (X11; U; Linux i686; zh- CN; rv: 1.2.3.4) Gecko/

    document.write(navigator.userAgent);
  124. None
  125. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in

    window) { // bootstrap the javascript application }
  126. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in

    window) { // bootstrap the javascript application } Sure, why not.
  127. var hasStorage = (function() { try { localStorage.setItem(mod, mod); localStorage.removeItem(mod);

    return true; } catch (exception) { return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ // bootstrap the javascript application }
  128. var hasStorage = (function() { try { localStorage.setItem("test", "mod" );

    localStorage.removeItem("test"); return true; } catch (exception) { if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) { return true; } else { return false; } return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ //cuts the mustard }
  129. DISPLAY MODES

  130. PUFFIN REQUEST DESKTOP

  131. PUFFIN REQUEST DESKTOP

  132. SINGLE COLUMN VIEW

  133. None
  134. <link rel="stylesheet" media="screen, handheld" href="stylesheets/screen.css"> <link rel="stylesheet" media="handheld" href="stylesheets/handheld.css">

  135. None
  136. None
  137. None
  138. [HTTP_X_UCBROWSER_UA] => dv(XT1095);pr(UCBrowser/10.3.0.552);ov(Android 5.0);ss(360*592);pi(1080*1776);bt(GJ);pm(1);bv( 1);nm(0);im(0);sr(0);nt(1);dn(8664342047-3f9902 87);ai(720089404747345);

  139. None
  140. var hasStorage = (function() { try { localStorage.setItem("test", "mod" );

    localStorage.removeItem("test"); return true; } catch (exception) { if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) { return true; } else { return false; } return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ //cuts the mustard }
  141. UCWEB/2.0 (MIDP-2.0; U; Adr 5.0; EN- US; XT1095) U2/1.0.0 UCBrowser/

    9.9.1.554 U2/1.0.0 Mobile
  142. [HTTP_X_UCBROWSER_UA] => dv(XT1095);pr(UCBrowser/ 10.3.0.552);ov(Android 5.0);ss(360*592);pi(1080*1776);bt(GJ) ;pm(1);bv(1);nm(0);im(0);sr(0);nt(1); dn(8664342047-3f990287);ai(7200894047 47345);

  143. DATA SAVINGS Up to 90% Up to 85% Up to

    90% Up to 50%
  144. None
  145. None
  146. None
  147. None
  148. Progressive enhancement

  149. Progressive enhancement Responsive design

  150. Progressive enhancement Responsive design No heavy JS frameworks

  151. Progressive enhancement Responsive design No heavy JS frameworks Cut the

    mustard
  152. The journey begins by letting go of control, and becoming

    flexible. “ John Allsopp Dao of Web Design
  153. None
  154. THANK YOU Tim Kadlec | @tkadlec