Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Tim Kadlec

June 16, 2015
Tweet

More Decks by Tim Kadlec

Other Decks in Technology

Transcript

  1. BETTER BY
    PROXY
    Tim Kadlec | @tkadlec

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. • No 3G
    • No Wi-Fi
    • Non-touch
    • 240 x 320
    • 64MB internal

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 0.1% 16.0%
    3G
    Penetration
    Fixed
    Broadband

    View full-size slide

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

    View full-size slide

  9. speed as a weapon

    View full-size slide

  10. Our internet is not
    their internet.

    View full-size slide

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

    View full-size slide

  12. “…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

    View full-size slide

  13. 100 million daily
    active users

    View full-size slide

  14. 42.2% market share
    in India

    View full-size slide

  15. 34.6% market share in
    China

    View full-size slide

  16. 258 million active users
    in January

    View full-size slide

  17. 168 billion pages
    transcoded

    View full-size slide

  18. Top 5 tablet browser in
    40 countries

    View full-size slide

  19. Conservative Aggressive

    View full-size slide

  20. Network
    constrained

    View full-size slide

  21. Bandwidth

    Latency
    Cost of Data

    View full-size slide

  22. Device
    constrained

    View full-size slide

  23. Conservative Aggressive

    View full-size slide

  24. High Bandwidth/Low Latency

    View full-size slide

  25. gzip
    minification

    View full-size slide

  26. gzip
    minification
    image compression
    image transcoding

    View full-size slide

  27. [REMOTE_ADDR] => 90.145.158.4

    View full-size slide

  28. [REMOTE_ADDR] => 66.249.81.203

    View full-size slide

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

    View full-size slide

  30. [HTTP_X_CONTENT_OPT] =>
    Turbo/4.35.8109

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. POTENTIAL ISSUE #1:

    Minification removes comments in JS/CSS

    View full-size slide

  34. SOLUTION:

    Don’t rely on comments

    Use Cache-Control: no-transform
    POTENTIAL ISSUE #1:

    Minification removes comments in JS/CSS

    View full-size slide

  35. POTENTIAL ISSUE #2:

    Images may be removed from page

    View full-size slide

  36. SOLUTION:

    Ensure all images have text fallbacks
    POTENTIAL ISSUE #2:

    Images may be removed from page

    View full-size slide

  37. POTENTIAL ISSUE #3:

    Image transcoding or compression may result

    in blurry images

    View full-size slide

  38. POTENTIAL ISSUE #3:

    Image transcoding or compression may result

    in blurry images
    SOLUTION:

    Use Cache-Control: no-transform

    View full-size slide

  39. DATA SAVINGS
    Up to 50%
    Approximately 58%
    Up to 60%

    View full-size slide

  40. Conservative Aggressive

    View full-size slide

  41. REMOTE BROWSING

    View full-size slide

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

    View full-size slide

  43. Everything requires
    user interaction.
    Everything requires a
    server round-trip.

    View full-size slide

  44. Limit data consumed
    and limit impact on
    device.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. RENDERING ENGINE
    Presto
    Blink (Chrome 30)
    U2 kernel (based on
    WebKit)
    Gecko

    View full-size slide

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

    View full-size slide

  52. no icon fonts

    View full-size slide

  53. supportSVG = true

    View full-size slide

  54. supportSVG = true
    no onerror

    View full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. document.write(navigator.userAgent);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. DISPLAY MODES

    View full-size slide

  64. PUFFIN REQUEST DESKTOP

    View full-size slide

  65. PUFFIN REQUEST DESKTOP

    View full-size slide

  66. SINGLE COLUMN VIEW

    View full-size slide


  67. href="stylesheets/handheld.css">

    View full-size slide

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

    View full-size slide

  69. 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 full-size slide

  70. 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 full-size slide

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

    View full-size slide

  72. DATA SAVINGS
    Up to 90%
    Up to 85%
    Up to 90%
    Up to 50%

    View full-size slide

  73. Progressive enhancement

    View full-size slide

  74. Progressive enhancement
    Responsive design

    View full-size slide

  75. Progressive enhancement
    Responsive design
    No heavy JS frameworks

    View full-size slide

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

    View full-size slide

  77. The journey begins by
    letting go of control,
    and becoming flexible.

    John Allsopp
    Dao of Web Design

    View full-size slide

  78. THANK YOU
    Tim Kadlec | @tkadlec

    View full-size slide