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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. “Opera Mini is a s&%##*
   browser…
   

   View Slide

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

   View Slide

8. USER CAPABILITY
   

   View Slide

9. INCENTIVE
   

   View Slide

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

    View Slide

11. AFFORDABILITY
    

    View Slide

12. “…as bandwidth grows, and as
    processing power grows, and as
    browsers get better we just keep
    filling everything up. ”
    Jeff Veen
    

    View Slide

13. 2069KB
    

    View Slide

14. 45%
    in two years
    

    View Slide

15. View Slide

16. View Slide

17. INFRASTRUCTURE
    

    View Slide

18. 0
    3000
    6000
    9000
    12000
    Pakistan
    Iran
    India
    Indonesia
    Azerbaijan
    South Africa
    China
    Armenia
    Belarus
    Bosnia
    Macedonia
    Georgia
    Kazakhstan
    US
    

    View Slide

19. View Slide

20. https://twitter.com/pattytoland/status/652131997494603778
    

    View Slide

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
    

    View Slide

22. “
    

    View Slide

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
    

    View Slide

24. View Slide

25. OUR INTERNET IS NOT
    THEIR INTERNET
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

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

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. 100 million daily active users
    

    View Slide

35. 42.2% market share in India
    

    View Slide

36. 34.6% market share in China
    

    View Slide

37. 258 million active users in January
    

    View Slide

38. 168 billion pages transcoded
    

    View Slide

39. Top 5 tablet browser in 40 countries
    

    View Slide

40. View Slide

41. Conservative Aggressive
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. Network-constrained
    

    View Slide

52. Bandwidth

    Latency
    Cost of Data
    

    View Slide

53. Device-
    constrained
    

    View Slide

54. Memory
    CPU
    

    View Slide

55. Conservative Aggressive
    

    View Slide

56. Browsers with proxy services Remote browsers
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. High Bandwidth/Low Latency
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. 23%
    

    View Slide

68. gzip
    

    View Slide

69. gzip
    minification
    

    View Slide

70. gzip
    minification
    image compression
    image transcoding
    

    View Slide

71. View Slide

72. gzip
    minification
    image compression
    image transcoding
    SPDY or HTTP/2
    

    View Slide

73. [REMOTE_ADDR] => 90.145.158.4
    

    View Slide

74. [REMOTE_ADDR] => 66.249.81.203
    

    View Slide

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

    View Slide

76. [HTTP_X_CONTENT_OPT] => Turbo/4.35.8109
    

    View Slide

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

    View Slide

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

    View Slide

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);
    

    View Slide

80. Potential Issue #1:

    Minification removes comments in JS/CSS
    

    View Slide

81. Potential Issue #1:

    Minification removes comments in JS/CSS
    Solution:

    Don’t rely on comments

    Use Cache-Control: no-transform
    

    View Slide

82. Potential Issue #2:

    Images may be removed from page
    

    View Slide

83. Solution:

    Ensure all images have text fallbacks
    Potential Issue #2:

    Images may be removed from page
    

    View Slide

84. Potential Issue #3:

    Image transcoding or compression may result

    in blurry images
    

    View Slide

85. Potential Issue #3:

    Image transcoding or compression may result

    in blurry images
    Solution:

    Use Cache-Control: no-transform
    

    View Slide

86. Data Savings
    Up to 50%
    Approximately 58%
    Up to 60%
    

    View Slide

87. View Slide

88. Browsers with proxy services Remote browsers
    

    View Slide

89. View Slide

90. Remote browsing
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. var myButton = document.getElementById('#mybutton');
    button.addEventListener('click', function(){
    //something
    });
    

    View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. EVERYTHING REQUIRES USER
     INTERACTION.
     EVERYTHING REQUIRES A
     SERVER ROUND-TRIP.
     

     View Slide

104. Limit data consumed and limit
     impact on device.
     

     View Slide

105. View Slide

106. contextmenu
     dblclick
     error
     keydown
     keypress
     keyup
     mousemove
     mouseenter
     mouseleave
     mouseout
     mousewheel
     resize
     scroll
     touchcancel
     touchend
     touchmove
     touchstart
     

     View Slide

107. setTimeout ~= 5s
     setInterval ~= 5s
     xmlHTTPRequest ~= 5s
     

     View Slide

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

     View Slide

109. View Slide

110. View Slide

111. DIFF
     

     View Slide

112. Limit data consumed and limit
     impact on device while providing
     a nearly equal experience to a
     typical browser.
     

     View Slide

113. contextmenu
     dblclick
     error
     keydown
     keypress
     keyup
     mousemove
     mouseenter
     mouseleave
     mouseout
     mousewheel
     resize
     scroll
     touchcancel
     touchend
     touchmove
     touchstart
     

     View Slide

114. View Slide

115. Rendering Engine
     Presto
     Blink
     U2 kernel (based on Gecko)
     Gecko
     

     View Slide

116. border-image
     border-radius
     gradients
     transitions
     animations
     @keyframes
     font-face
     javascript only API’s (ex: localStorage)
     

     View Slide

117. View Slide

118. no icon fonts
     

     View Slide

119. supportSVG = true
     

     View Slide

120. supportSVG = true
     no onerror
     

     View Slide

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
     

     View Slide

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
     

     View Slide

123. document.write(navigator.userAgent);
     

     View Slide

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

     View Slide

125. View Slide

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

     View Slide

127. if('querySelector' in document
     && 'localStorage' in window
     && 'addEventListener' in window) {
     // bootstrap the javascript application
     }
     Sure, why not.
     

     View Slide

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
     }
     

     View Slide

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
     }
     

     View Slide

130. Display modes
     

     View Slide

131. Puffin request desktop
     

     View Slide

132. Puffin request desktop
     

     View Slide

133. Single column view
     

     View Slide

134. View Slide

135. href="stylesheets/screen.css">
     href="stylesheets/handheld.css">
     

     View Slide

136. View Slide

137. View Slide

138. View Slide

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);
     

     View Slide

140. View Slide

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
     }
     

     View Slide

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
     

     View Slide

143. Data Savings
     Up to 90%
     Up to 85%
     Up to 90%
     Up to 50%
     

     View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

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
     

     View Slide

149. View Slide

150. Progressive enhancement
     

     View Slide

151. Progressive enhancement
     Responsive design
     

     View Slide

152. Progressive enhancement
     Responsive design
     No heavy JS frameworks
     

     View Slide

153. Progressive enhancement
     Responsive design
     No heavy JS frameworks
     Cut the mustard
     

     View Slide

154. The journey begins by
     letting go of control, and
     becoming flexible.
     John Allsopp
     

     View Slide

155. THANK YOU
     Tim Kadlec | @tkadlec
     

     View Slide