$30 off During Our Annual Pro Sale. View Details »

RWD BLOAT

Dave Rupert
November 11, 2014

RWD BLOAT

Responsive Web Design gets a bad rap for performance. I investigate and bust some myths. Originally given at Refresh Austin.

Dave Rupert

November 11, 2014
Tweet

More Decks by Dave Rupert

Other Decks in Technology

Transcript

  1. RWD
    BLOAT
    Dave Rupert @davatron5000

    View Slide

  2. ATTACK
    OF THE
    EBSITE

    View Slide

  3. paravelinc.com

    View Slide

  4. retailmenot.com

    View Slide

  5. shoptalkshow.com

    View Slide

  6. “RWD IS BAD FOR
    PERFORMANCE.”

    View Slide

  7. I’M KINDA
    POST-RWD

    View Slide

  8. POST EXPLAINING WHY RWD IS A
    PRETTY GREAT AND INEXPENSIVE
    MULTI-DEVICE WEB STRATEGY

    View Slide

  9. View Slide

  10. “RWD IS BAD FOR
    PERFORMANCE.”

    View Slide

  11. “Okay. What
    problems are
    you having?”

    View Slide

  12. “Oh, you know…

    View Slide

  13. “Oh, you know…
    jQuery

    View Slide

  14. “Oh, you know…
    jQuery
    …uhh…

    View Slide

  15. “Oh, you know…
    jQuery
    …uhh…
    web fonts…

    View Slide

  16. “Oh, you know…
    jQuery
    …uhh…
    images
    web fonts…

    View Slide

  17. “Oh, you know…
    jQuery
    …uhh…
    images
    web fonts…
    …uhh…

    View Slide

  18. “Oh, you know…
    jQuery
    …uhh…
    images
    web fonts…
    …uhh…
    web apps?

    View Slide

  19. NOT REALLY
    RWD SPECIFIC

    View Slide

  20. WEBSITES 2014
    1000
    1333
    1667
    2000
    12/2014 1/2015 2/2015 3/2015 4/2015 5/2015 6/2015 7/2015 8/2015 9/2015 10/2015 11/2015
    Transfer KB
    Image KB

    View Slide

  21. “RWD IS BAD FOR
    PERFORMANCE.”

    View Slide

  22. “RWD IS BAD FOR
    PERFORMANCE.”
    A WEBSITE IN 2014

    View Slide

  23. “BLAME THE
    IMPLEMENTATION,
    NOT THE
    TECHNIQUE.”
    – Tim Kadlec

    View Slide

  24. FORDS AREN’T MADE
    WELL, SO CARS AREN’T
    A VIABLE MODE OF
    TRANSPORTATION

    View Slide

  25. “…but surely
    there’s
    footprint…”

    View Slide

  26. So I examined the
    best website ever
    made…

    View Slide

  27. View Slide

  28. View Slide

  29. FACTS
    I’m p experienced with RWD
    I care about performance
    I have third-party ads
    I have third-party comments
    I have multiple web fonts
    Including an icon font!
    I use jQuery GASP! OH THE HORROR! THE SHAME!!!!!!!1

    View Slide

  30. 16%
    24%
    18%
    24%
    14%
    3%
    HTML
    CSS
    JS
    Images
    Fonts
    Analytics & Ads
    TOTAL: 174kb

    View Slide

  31. CSS: 24kb
    Media Queries 2.4kb 10%
    Vendor Prefixes 1.4kb 6%

    View Slide

  32. JS: 41.2kb
    jQuery 33.1kb 78%
    Prism.js, Lettering,
    etc
    7kb 17.3%
    FitVids, FitText 2kb 4.7%

    View Slide

  33. Images: 31.92kb

    View Slide

  34. Images: 31.92kb

    View Slide

  35. View Slide

  36. Fonts: 42.6kb
    Open Sans 31.7kb 54.1%
    Symbolset 26.8kb 45.8%

    View Slide

  37. TOTAL COST OF
    RESPONSIVE
    WEB DESIGN…

    View Slide

  38. 4.4KB

    View Slide

  39. SO, NOT RWD.

    View Slide

  40. LET’S TAKE A
    DEEPER LOOK

    View Slide

  41. Home Article
    PageSpeed (Mobile) 79 78
    PageSpeed (Desktop) 93 91
    Start Render (3G) 1.3s 1.5s
    DOMContentLoaded 1.77s 1.83s
    Speed Index (3G) 1446 1749

    View Slide

  42. Speed Index (n) Some hippie math that tells
    you how fast it “feels” to load
    your website.

    View Slide

  43. HOW FAST IS FAST
    ENOUGH?

    View Slide

  44. http://timkadlec.com/2014/01/fast-enough/

    View Slide

  45. http://timkadlec.com/2014/01/fast-enough/

    View Slide

  46. #PROTIP
    IF PAUL IRISH FROM GOOGLE SAYS YOUR
    WEBSITE SHOULD LOAD WITH A SPEED
    INDEX UNDER 1000, YOUR WEBSITE
    SHOULD LOAD WITH A SPEED INDEX
    UNDER 1000.

    View Slide

  47. View Slide

  48. PROBLEMS
    No text until ~2.5 seconds
    Webfonts blocking type rendering?
    Sub-optimal image spriting (172 icon font)?
    Time to first-byte is ~500ms, has no CSS in it

    View Slide

  49. BASELINE
    Home Article
    PageSpeed (Mobile) 79 78
    PageSpeed (Desktop) 93 91
    Speed Index (3G) 1446 1749

    View Slide

  50. View Slide

  51. 0. Normalize
    CSS Reset Normalize
    CSS Selectors 679 578
    Home Speed Index 1446 1376
    Article Speed Index 1749 1412

    View Slide

  52. 1. Unblock fonts
    Fonts in
    Fonts with
    loadCSS()
    Home Speed Index 1376 1327
    Article Speed Index 1412 1284

    View Slide

  53. function loadCSS( href, before, media ){
    "use strict";
    var ss = window.document.createElement( "link" );
    var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
    var sheets = window.document.styleSheets;
    ss.rel = "stylesheet";
    ss.href = href;
    ss.media = "only x";
    ref.parentNode.insertBefore( ss, ref );
    function toggleMedia(){
    var defined;
    for( var i = 0; i < sheets.length; i++ ){
    if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
    defined = true;
    }
    }
    if( defined ){
    ss.media = media || "all";
    }
    else {
    setTimeout( toggleMedia );
    }
    }
    toggleMedia();
    return ss;
    }

    View Slide

  54. 2. No jQuery

    View Slide

  55. 2. No jQuery

    View Slide

  56. 3. SVG Sprites



    http://css-tricks.com/svg-sprites-use-better-icon-fonts/

    View Slide

  57. 3. SVG Sprites
    Icon Font SVG Sprite
    Home Speed Index 1327 1264
    Article Speed Index 1284 1222

    View Slide

  58. 4. CSS Cleanup
    Icon Font SVG Sprite
    Home Speed Index 1264 938
    Article Speed Index 1222 1126
    300pts just for cleaning house!

    View Slide

  59. MAKE YOUR
    WEBSITE FASTER
    WITH THIS ONE
    WEIRD TRICK.

    View Slide

  60. THE NEED FOR
    PERCEIVED
    SPEED

    View Slide

  61. THE NEED FOR
    PERCEIVED
    SPEED

    View Slide

  62. 5. CRITICAL CSS
    Calculate style rules that appear “above the fold”
    Print them in an inline block in the <head><br/>Lazyload your stylesheet at the bottom of the page<br/>

    View Slide



  63. <br/>.blue{color:blue;}<br/>



    Hello, world!

    <br/>function loadCSS( file ) {<br/>// stuff<br/>}<br/>loadCSS('css/stylesheet.css');<br/>


    View Slide

  64. PAINT WITH THE
    FIRST PACKET

    View Slide

  65. View Slide

  66. View Slide

  67. 5. CRITICAL CSS
    Normal Critical CSS
    Home Speed Index 938 728
    Article Speed Index 1126 1065

    View Slide

  68. FINAL RESULTS
    Home Article
    PageSpeed (Mobile) 79 → 98 78 → 96
    PageSpeed (Desktop) 93 → 98 91 → 97
    Speed Index (3G) 1446 → 728 1749 → 1065

    View Slide

  69. “Yeah, sure.
    Maybe on a tiny
    blog. What about
    a real website?”

    View Slide

  70. View Slide

  71. 47 HTTP Requests
    3.6MB

    Speed Index 1307

    View Slide

  72. DESIGN
    DIRECTION

    View Slide

  73. 3 Webfonts
    38 images
    1.456MB in animated GIFs
    Chart.js
    Scroll-triggered animations
    and a Quiz with audio

    View Slide

  74. Two-color PNGs

    View Slide

  75. PERFORMANCE
    ANXIETY

    View Slide

  76. Enable GZIP
    Optimize images
    Minify and compress JS
    Lazyload images
    Setup Critical CSS
    Async/Defer Scripts
    More image optimization

    View Slide

  77. 50 HTTP Requests
    2.4MB

    Speed Index 651

    View Slide

  78. View Slide

  79. HAS 5K RETINA MAC AND
    A 3MB CONNECTION

    View Slide

  80. View Slide

  81. View Slide

  82. TOOLS

    View Slide

  83. View Slide

  84. LESSON:
    THROTTLING IS SUPER IMPORTANT
    SINCE MOST OF THE WORLD WON’T
    HAVE GOOGLE FIBER FOR A FEW MORE
    YEARS. FUCK YEAH, AUSTIN TX.

    View Slide

  85. PNGQuant

    View Slide

  86. View Slide

  87. LESSON:

    DESIGNERS, YOUR JOB IS NOT DONE
    UNTIL THE SITE SHIPS.

    View Slide

  88. View Slide

  89. LESSON:

    PERFORMANCE IS EVERYONE’S JOB.
    NOT JUST DEVELOPERS.

    View Slide

  90. THANKS
    Dave Rupert @davatron5000

    View Slide

  91. ONE MORE
    THING…

    View Slide

  92. OVERUNDER
    Simple trivia for social people.
    Follow @overunderapp

    View Slide

  93. THANKS
    Dave Rupert @davatron5000

    View Slide