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

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. 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
  2. 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
  3. 16% 24% 18% 24% 14% 3% HTML CSS JS Images

    Fonts Analytics & Ads TOTAL: 174kb
  4. 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
  5. Speed Index (n) Some hippie math that tells you how

    fast it “feels” to load your website.
  6. #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.
  7. 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
  8. 0. Normalize CSS Reset Normalize CSS Selectors 679 578 Home

    Speed Index 1446 1376 Article Speed Index 1749 1412
  9. 1. Unblock fonts Fonts in <head> Fonts with loadCSS() Home

    Speed Index 1376 1327 Article Speed Index 1412 1284
  10. 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; }
  11. 3. SVG Sprites Icon Font SVG Sprite Home Speed Index

    1327 1264 Article Speed Index 1284 1222
  12. 4. CSS Cleanup Icon Font SVG Sprite Home Speed Index

    1264 938 Article Speed Index 1222 1126 300pts just for cleaning house!
  13. 5. CRITICAL CSS Calculate style rules that appear “above the

    fold” Print them in an inline <style> block in the <head> Lazyload your stylesheet at the bottom of the page
  14. <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello,

    world! </div> <script> function loadCSS( file ) { // stuff } loadCSS('css/stylesheet.css'); </script> </body> </html>
  15. FINAL RESULTS Home Article PageSpeed (Mobile) 79 → 98 78

    → 96 PageSpeed (Desktop) 93 → 98 91 → 97 Speed Index (3G) 1446 → 728 1749 → 1065
  16. Enable GZIP Optimize images Minify and compress JS Lazyload images

    Setup Critical CSS Async/Defer Scripts More image optimization
  17. LESSON: THROTTLING IS SUPER IMPORTANT SINCE MOST OF THE WORLD

    WON’T HAVE GOOGLE FIBER FOR A FEW MORE YEARS. FUCK YEAH, AUSTIN TX.