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.

Transcript

1. BETTER BY PROXY Tim Kadlec | @tkadlec
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
17. INFRASTRUCTURE
18. 0 3000 6000 9000 12000 Pakistan Iran India Indonesia Azerbaijan South Africa China Armenia Belarus Bosnia Macedonia Georgia Kazakhstan US
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. “
23. 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
25. OUR INTERNET IS NOT THEIR INTERNET
30. http://flic.kr/p/cfoupQ
34. 100 million daily active users
35. 42.2% market share in India
36. 34.6% market share in China
37. 258 million active users in January
38. 168 billion pages transcoded
39. Top 5 tablet browser in 40 countries
41. Conservative Aggressive
51. Network-constrained
52. Bandwidth
 Latency Cost of Data
53. Device- constrained
54. Memory CPU
55. Conservative Aggressive
56. Browsers with proxy services Remote browsers
63. High Bandwidth/Low Latency
67. 23%
68. gzip
69. gzip minification
70. gzip minification image compression image transcoding
72. gzip minification image compression image transcoding SPDY or HTTP/2
73. [REMOTE_ADDR] => 90.145.158.4
74. [REMOTE_ADDR] => 66.249.81.203
75. [REMOTE_ADDR] => 66.249.81.203 [HTTP_X_FORWARDED_FOR] => 90.145.158.4
76. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109
77. [HTTP_VIA] => 1.1 Chrome-Compression-Proxy
78. [HTTP_VIA] => HTTP/1.1 alp2nz01msp1ts06.wnsnet.attws.com
79. [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);
80. Potential Issue #1:
 Minification removes comments in JS/CSS
81. Potential Issue #1:
 Minification removes comments in JS/CSS Solution:
 Don’t rely on comments
 Use Cache-Control: no-transform
82. Potential Issue #2:
 Images may be removed from page
83. Solution:
 Ensure all images have text fallbacks Potential Issue #2:
 Images may be removed from page
84. Potential Issue #3:
 Image transcoding or compression may result
 in blurry images
85. Potential Issue #3:
 Image transcoding or compression may result
 in blurry images Solution:
 Use Cache-Control: no-transform
86. Data Savings Up to 50% Approximately 58% Up to 60%
88. Browsers with proxy services Remote browsers
90. Remote browsing
97. var myButton = document.getElementById('#mybutton'); button.addEventListener('click', function(){ //something });
103. EVERYTHING REQUIRES USER INTERACTION. EVERYTHING REQUIRES A SERVER ROUND-TRIP.
104. Limit data consumed and limit impact on device.
106. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout mousewheel resize scroll touchcancel touchend touchmove touchstart
107. setTimeout ~= 5s setInterval ~= 5s xmlHTTPRequest ~= 5s
108. setTimeout executed immediately setInterval executed once immediately xmlHTTPRequest ~= 3s-4s
111. DIFF
112. Limit data consumed and limit impact on device while providing a nearly equal experience to a typical browser.
113. contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout mousewheel resize scroll touchcancel touchend touchmove touchstart
115. Rendering Engine Presto Blink U2 kernel (based on Gecko) Gecko
116. border-image border-radius gradients transitions animations @keyframes font-face javascript only API’s (ex: localStorage)
118. no icon fonts
119. supportSVG = true
120. supportSVG = true no onerror
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. 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
123. document.write(navigator.userAgent);
124. Mozilla/50 (X11; U; Linux i686; zh-CN; rv: 1.2.3.4) Gecko/ document.write(navigator.userAgent);
126. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application }
127. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application } Sure, why not.
128. 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 }
129. 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 }
130. Display modes
131. Puffin request desktop
132. Puffin request desktop
133. Single column view
135. <link rel="stylesheet" media="screen, handheld" href="stylesheets/screen.css"> <link rel="stylesheet" media="handheld" href="stylesheets/handheld.css">
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);
141. 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 }
142. 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
143. Data Savings Up to 90% Up to 85% Up to 90% Up to 50%
148. “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
150. Progressive enhancement
151. Progressive enhancement Responsive design
152. Progressive enhancement Responsive design No heavy JS frameworks
153. Progressive enhancement Responsive design No heavy JS frameworks Cut the mustard
154. The journey begins by letting go of control, and becoming flexible. John Allsopp
155. THANK YOU Tim Kadlec | @tkadlec