[Refresh Austin] Website Performance and RWD Bloat

In his RWD Bloat talk at Refresh Austin in November 2014, Dave Rupert shares his thoughts on website performance in responsive web design and his approach for reducing the problem. Here are my notes from his talk:

• Attack of the Web Site 
  • Web page file sizes are going to go beyond 200MB 
    • 16% of page is made up of images
    • We are putting too many images onto our page
  • This isn’t a RWD problem, but a “web building” problem 
    • “Blame the implementation, not the technique.” — Tim Kadlec
  • Example: DaveRupert.com, personal site 
    • I’m experienced with RWD 
      • Care about performance
      • I have third party ads
      • I have third party comments
      • I have multiple web fonts
      • Including an icon font
      • and I use jQuery
    • Total weight: 174kb 
      • JavaScript and fonts make up most of the page weight
      • HTML makes the smallest
    • CSS:
      • 24kb file size
      • Media queries: 2.4kb
      • Vendor prefixes: 1.4kb
    • JS:
      • 41.2kb file size
      • jQuery: 33.1kb
    • Images
      • Total: 31k
    • Fonts
      • Total: 42.6kb
      • Open sans: 31kb
      • Symnbolset: 26kb
    • Total cost of web site: 4.4kb
      • The problem of bloat is not RWD
  • Speed Index is a statistic to quantify how fast page “feels” on: 
    • PageSpeed (Mobile)
    • PageSpeed (Desktop)
    • Start Render (3G)
    • DOMContentLoaded
    • Speed Index (3G)
  • How fast is fast enough? 
    • “Your site should be .5 to 1 second faster than your competitor” — Tim Kadlec
    • It’s fast enough to be a “perceived” change
    • “Speed Index under 1,000 — page loads about 1 second on a phone” — Paul Irish
  • Problems in DaveRupert.com
    • No text until 2.5 seconds
    • Webfonts blocking type rendering
    • Sub-optimal image spriting (172 icon font characters?)
    • Time to first-byte is 500ms in 3G connection speed, has no CSS in it.
  • Baseline
    • Home page: 1446 Speed Index
    • Article page:1749 Speed Index
    • At this point, your job becomes a video game with a goal to get Speed Index values under 1000
  • The steps Dave took: 
    • Removing Reset.css for Normalize.css resulted in: 
      • Home page: 1376 Speed Index
      • Article page: 1412 Speed Index
    • Unblock fonts with loadCSS()
      • Home page: 1327 Speed Index
      • Article page: 1284 Speed Index
    • Could not swap out jQuery for vanilla JavaScript: 
      • Guys, I did not get into this.
      • I rely on a lot of jQuery.
    • SVG Sprites
      • Remove icon fonts for SVG sprites
      • Home page: 1264 Speed Index
      • Article page: 1222 Speed Index
    • CSS Clean up 
      • Home page: 908 Speed Index
      • Article page: 1126 Speed Index
    • The need for perceived speed 
      • Critical CSS
        • Calcuate the 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
      • Paint in the first packet 
        • The first packet is 14kb
        • How much of a web page can you put into that 14kb?
        • Just do your best
        • Took two Sass partials that styled the header and top portions of the page and put them in a separate CSS file and put them into the style element in the HTML head element.
      • The results from that effort: 
        • Home page: 728 Speed Index
        • Article page: 1065 Speed Index
    • Resources and thoughts in conclusion: 
      • PNGQuant is a color profile stripper
      • Designers, you’re job is not done till it ships.
      • Go the distance by stripping out frames of a GIF animation to reduce file size
      • Put your site through a WebPageTest
      • Performance is everyone’s job, not just developers.