Pro Yearly is on sale from $80 to $50! »

Better By Proxy at Mobilism, 2015

Better By Proxy at Mobilism, 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 Mobilism 2015 in Amsterdam, NL on March 27, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

March 27, 2015
Tweet

Transcript

  1. Better by Proxy March 27, 2015 at Mobilism Tim Kadlec

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

  6. “Proxy browers are s&%##* browsers…

  7. None
  8. None
  9. None
  10. None
  11. https://flic.kr/p/8TzcGG

  12. • No 3G • No Wi-Fi • Non-touch • 240

    x 320 • 64MB internal
  13. 0 3500 7000 10500 14000 Pakistan Iran India Azerbaijan Armenia

    Belarus China Bosnia Kazakhstan Georgia Macedonia Denmark US Netherlands
  14. 0 3500 7000 10500 14000 Pakistan Iran India Azerbaijan Armenia

    Belarus China Bosnia Kazakhstan Georgia Macedonia Denmark US Netherlands 10x
  15. None
  16. 0.1% 16.0% 3G Penetration Fixed Broadband

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

  18. speed as a weapon

  19. Our internet is not their internet.

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

  21. None
  22. 2008kb

  23. 2008kb

  24. None
  25. None
  26. 100 million daily active users

  27. 42.2% market share in India

  28. 34.6% market share in China

  29. 258 million active users in January

  30. 168 billion pages transcoded

  31. Top 5 tablet browser in 40 countries

  32. None
  33. Conservative Aggressive

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. Network-constrained

  44. Bandwidth
 Latency Cost of Data

  45. Device- constrained

  46. Memory CPU

  47. Conservative Aggressive

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

  58. None
  59. 23%

  60. None
  61. None
  62. gzip ! !

  63. gzip minification !

  64. gzip minification image compression image transcoding

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

  71. [REMOTE_ADDR] => 66.249.81.203

  72. [HTTP_X_FORWARDED_FOR] => 90.145.158.4

  73. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109

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

  75. [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);

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

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

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

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


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

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

    blurry images Solution:
 Use Cache-Control: no-transform
  82. None
  83. Data Savings Up to 50% Up to 50% Up to

    60%
  84. Conservative Aggressive

  85. None
  86. Remote browsing

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

  94. None
  95. None
  96. None
  97. None
  98. None
  99. Everything requires user interaction. ! Everything requires a server round-trip.

  100. Limit data consumed and limit impact on device.

  101. None
  102. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

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

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

  105. None
  106. None
  107. None
  108. DIFF

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

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

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  111. None
  112. Rendering Engine Presto Blink (Chrome 30) U2 kernel (based on

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

    (ex: localStorage)
  114. None
  115. no icon fonts

  116. supportSVG = true

  117. supportSVG = true no onerror

  118. 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!
  119. 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!
  120. document.write(navigator.userAgent);

  121. Mozilla/50 (X11; U; Linux i686; zh-CN; rv: 1.2.3.4) Gecko/ document.write(navigator.userAgent);

  122. None
  123. if('querySelector' in document! !&& 'localStorage' in window! !&& 'addEventListener' in

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

    window) {! !! // bootstrap the javascript application! }! Sure, why not.
  125. 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! }!
  126. Display modes

  127. Puffin request desktop

  128. Puffin request desktop

  129. Single column view

  130. None
  131. <link rel="stylesheet" media="screen, handheld" href="stylesheets/screen.css">! ! ! <link rel="stylesheet" media="handheld"

    href="stylesheets/handheld.css">
  132. None
  133. None
  134. None
  135. [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);

  136. None
  137. 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! }!
  138. 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!
  139. [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);

  140. Data Savings Up to 90% Up to 85% Up to

    90% Up to 50%
  141. None
  142. None
  143. None
  144. None
  145. Progressive enhancement ! ! !

  146. Progressive enhancement Responsive design ! !

  147. Progressive enhancement Responsive design No heavy JS frameworks !

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

    mustard
  149. None
  150. “The journey begins by letting go of control, and becoming

    flexible. John Allsopp Dao of Web Design
  151. thank you March 27, 2015 at Mobilism ! Tim Kadlec


    @tkadlec tim@timkadlec.com