RWD BLOAT

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

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