Better By Proxy at Velocity NY 2015

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
October 13, 2015

Better By Proxy at Velocity NY 2015

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 Velocity, NY in New York, NY on October 13, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

October 13, 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. USER CAPABILITY

  9. INCENTIVE

  10. IRAN 3G CONNECTIONS ARE “…AGAINST HUMAN AND MORAL STANDARDS.” http://bit.ly/1pKV0gH

  11. AFFORDABILITY

  12. “…as bandwidth grows, and as processing power grows, and as

    browsers get better we just keep filling everything up. ” Jeff Veen
  13. 2069KB

  14. 45% in two years

  15. None
  16. None
  17. INFRASTRUCTURE

  18. 0 3000 6000 9000 12000 Pakistan Iran India Indonesia Azerbaijan

    South Africa China Armenia Belarus Bosnia Macedonia Georgia Kazakhstan US
  19. None
  20. https://twitter.com/pattytoland/status/652131997494603778

  21. UNITED STATES 100 93 85 94 THAILAND 37 79 90

    48 CHINA 28 81 92 43 SOUTH AFRICA 38 62 89 49 INDONESIA 29 79 89 30 INDIA 38 65 39 19 PAKISTAN 21 63 29 10 TANZANIA 13 27 47 0 ETHIOPIA 0 0 0 5
  22. http://bit.ly/1pKV0gH 0 7.5 15 22.5 30 India APAC
 (minus China

    & India) Africa China Latin America North America Middle East CEE Western Europe
  23. None
  24. OUR INTERNET IS NOT THEIR INTERNET

  25. None
  26. None
  27. None
  28. None
  29. http://flic.kr/p/cfoupQ

  30. None
  31. None
  32. None
  33. 100 million daily active users

  34. 42.2% market share in India

  35. 34.6% market share in China

  36. 258 million active users in January

  37. 168 billion pages transcoded

  38. Top 5 tablet browser in 40 countries

  39. None
  40. Conservative Aggressive

  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. Network-constrained

  51. Bandwidth
 Latency Cost of Data

  52. Device- constrained

  53. Memory CPU

  54. Conservative Aggressive

  55. Browsers with proxy services Remote browsers

  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. High Bandwidth/Low Latency

  63. None
  64. None
  65. None
  66. 23%

  67. gzip

  68. gzip minification

  69. gzip minification image compression image transcoding

  70. None
  71. gzip minification image compression image transcoding SPDY or HTTP/2

  72. [REMOTE_ADDR] => 90.145.158.4

  73. [REMOTE_ADDR] => 66.249.81.203

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

  75. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109

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

  77. [HTTP_VIA] => HTTP/1.1 alp2nz01msp1ts06.wnsnet.attws.com

  78. [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(720089404747345);

  79. Potential Issue #1:
 Minification removes comments in JS/CSS

  80. Potential Issue #1:
 Minification removes comments in JS/CSS Solution:
 Don’t

    rely on comments
 Use Cache-Control: no-transform
  81. Potential Issue #2:
 Images may be removed from page

  82. Solution:
 Ensure all images have text fallbacks Potential Issue #2:


    Images may be removed from page
  83. Potential Issue #3:
 Image transcoding or compression may result
 in

    blurry images
  84. Potential Issue #3:
 Image transcoding or compression may result
 in

    blurry images Solution:
 Use Cache-Control: no-transform
  85. Data Savings Up to 50% Approximately 58% Up to 60%

  86. None
  87. Browsers with proxy services Remote browsers

  88. None
  89. Remote browsing

  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 U2 kernel (based on Gecko) 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-3f990287 );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. Data Savings Up to 90% Up to 85% Up to

    90% Up to 50%
  143. None
  144. None
  145. None
  146. None
  147. “We believe that Africa’s internet evolution story will be no

    different from the rest of the world. We listen to music. We watch movies. We play games online… http://bit.ly/1R1ZmJV
  148. None
  149. Progressive enhancement

  150. Progressive enhancement Responsive design

  151. Progressive enhancement Responsive design No heavy JS frameworks

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

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

    flexible. John Allsopp
  154. THANK YOU Tim Kadlec | @tkadlec