Putting your site on a diet

Putting your site on a diet

We’re getting fat. And I don’t just mean our waistlines, I mean our websites. We all got broadband connections, uploaded some videos and went for a long lunch. Bandwidth has become so cheap that some hosts have stopped charging for it, unlimited 3G and 4G data isn’t uncommon, and unless you’re a heavy iPlayer user you’re unlikely to hit your quota.

With no rules and limits, we all went a bit mad, gorging ourselves on beautiful imagery, retina displays, rounded corners, infinitely scrollable websites with full-screen 1080p pictures and anything to make our web site stand out. This talk will show you techniques to keep your website weight down.

This presentation was first given at Future of Web Design London 2013

2fdb5b62030270813e22f5e17d16f6b9?s=128

Steve Workman

May 15, 2013
Tweet

Transcript

  1. Putting Your Site On A Diet @ STEVE WORKMAN

  2. We’ve got a weight problem

  3. 85.9MB!!!

  4. “ ” Hey, the new responsive moneydesktop.com is darned pretty.

    Some neat patterns throughout, too /via @davidlcrow RESPONSIVE DESIGN - @RWD, MAY 14TH 2013 This website is 5MB and takes 15 seconds to load on Mobitest
  5. “ ” The average web page now weights in at

    about 1.3MB, up 35 percent in the last year HTTP ARCHIVE STUDY, MARCH 2013 HTTP://BIT.LY/13FRJVP
  6. 0 200000 400000 600000 800000 1000000 1200000 1400000 2001 2002

    2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 BBC News Page Size JS CSS Img Doc
  7. 0% 10% 20% 30% 40% 50% 60% 70% 80% 90%

    100% 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 % Make-up of BBC News JS CSS Img Doc
  8. None
  9. “Our three step approach”  Tracking Evidence shows that keeping

    tabs on your food, weight and physical activity is one of the most important weight loss skills. You’ll learn simple ways to track your daily diet and exercise habits and make changes for the better.  Places When it comes to weight loss, some places are danger zones. Think of the confectionery aisle at the supermarket, for example. We’ll help you identify and tackle your personal danger zones·  Routines Healthy habits can become second nature with our set of tried and tested routines that help you achieve long-term weight loss
  10. WARNING Weight vs Speed Many of these tips apply to

    both decreasing page speed and load time Some tips favour weight over speed
  11. I’m assuming you all have gzip turned on… You do,

    don’t you?
  12. First Steps to Weight Loss STEPPING ON THE SCALES

  13. None
  14. 453 40.1 191 14.9 4.5 0 100 200 300 400

    500 600 700 800 ORIGINAL WEIGHT IN KB HTML Fonts Images CSS JavaScript
  15. None
  16. 453 211 40.1 40.1 191 191 14.9 14.9 4.5 4.5

    0 100 200 300 400 500 600 700 800 ORIGINAL MINIFY & CONCATENATE LIBRARIES WEIGHT IN KB HTML Fonts Images CSS JavaScript
  17. Danger Zone 1 TAKING SWEETS FROM STRANGERS

  18. 72KB each

  19. 1157 305 85 36 120 23 403 73 0 200

    400 600 800 1000 1200 1400 1600 1800 2000 ORIGINAL REMOVED SOCIAL MEDIA PLUGINS WEIGHT IN KB HTML Img CSS JS
  20. Danger Zone 2 ALL YOU CAN EAT IS NOT A

    CHALLENGE
  21. None
  22. Heavyweight Bootstrap 118 117 22 0 50 100 150 200

    250 300 Bootstrap Weight in KB Img CSS JS
  23. 117KB CSS file = 88KB of waste

  24. Utilities.less Code.less Layouts.less Grid.less Scaffolding.less Mixins.less Reset.less Type.less R-Utils.less Desktop.less

    Phone.less Bootstrap.css Responsive.css
  25. Pro tip: Always build from source

  26. Request CSS (with width / height cookie) See CSS request

    Serve responsive CSS With <= phone breakpoint Serve mobile CSS Receive CSS Yes No
  27. “ ” I just want to try the latest things,

    and it’s so easy! ANY JAVASCRIPT DEVELOPER, EVER “ ”
  28. Choose the low fat version Zepto 26.5KB 1.9.1 90.4KB 2.0.0

    81.1KB Custom 2.0.0 50.4KB > > > jQuery Vanilla JS 0KB https://speakerdeck.com/rem/i-know-jquery-now-what
  29. Choose the low fat version Media Element 104KB Flow player

    67KB Native 0KB JW Player 305KB > >
  30. Bootstrap Datepicker – 19KB HTML5 Native – 0KB

  31. Modernizr to the rescue! Modernizr.load({ test: Modernizr.datetime, nope: ['bootstrap-datepicker.js', 'bootstrap-datepicker.css']

    });
  32. Being Responsive with JavaScript One large file Lots of little

    ones
  33. RequireJS • Async loading of JS modules • Resolves dependencies

    • Only loads & caches what it needs • Keeps code DRY <script data-main=“js/main.js” src=“requirejs.min.js”></script> require([“form-helpers”, “utilities”, “d3”], function () { });
  34. Being Responsive with JavaScript  One large file  Lots

    of little ones r.js
  35. Exercise Routine so far  Gzip and minify (duh) 

    Be careful when picking third-party libraries  Always build from source, taking only what you need  Send browser dimensions via cookies, get back the right code  Say no to frameworks (when you can)  Load JS asynchronously – smaller packages
  36. Danger Zone 3 BEAUTY FOR BEAUTY’S SAKE

  37. I’m Twice the Size! DEALING WITH RETINA IMAGES

  38. “ ” Flash got it right STEVE WORKMAN, JUST NOW

  39. Scalable Vector Graphics

  40. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="opera_software_logo" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0

    400 157" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 400 157"> <path d="M189.74,92.285c-17.901,0-21.912-12.244-21.912-27.496,0-13.75,4.079-26.355,21.912-26.355s22.129,12.605,22.129,26.355c0,15.252-4.3,27.496-22.13,27.496zm0- 45.615c-9.454,0-12.174,5.943-12.174,18.119,0,13.605,2.789,19.332,12.174,19.332,9.454,0,12.386-5.801,12.386-19.332-0.01-12.176-2.87-18.119-12.39-18.119z" fill="#CC0F16"/> <path d="M234.31,73.24h-8.379c0.142,0.5,0.502,1.359,0.502,1.859v16.111h-9.597v-51.628h17.475c13.179,0,19.192,7.018,19.192,16.395,0.01,9.314-5.86,17.263- 19.18,17.263zm0-25.498h-7.877v17.332h7.877c6.446,0,9.452-3.225,9.452-9.098,0-5.511-3.15-8.234-9.45-8.234z" fill="#CC0F16"/> <path d="M257.57,91.211v-51.629h34.375v8.021h-24.778v12.387h22.628l-2.366,8.02h-20.549c0.214,0.5,0.287,1.072,0.287,1.365v13.814h24.845v8.021h-34.434z" fill="#CC0F16"/> <path d="M325.49,91.258l-11.89-18.188c-0.362-0.504-0.503-1.145-0.649-1.727h-6.013v19.914h-9.593v-51.63h17.543c13.104,0,19.115,6.445,19.115,15.971,0,7.016- 3.437,12.174-10.74,14.465l13.751,21.195h-11.522zm-10.6-43.61h-7.951v15.684h7.951c6.731,0,9.378-3.012,9.378-7.734,0-5.16-2.86-7.95-9.38-7.95z" fill="#CC0F16"/> <path d="M375.39,91.258l-4.441-13.102h-18.112l-4.512,13.102h-9.955l18.688-51.631h9.81l18.622,51.631h-10.114zm-12.47-36.516c-0.5-1.365-0.926-3.152-1.07-4.086- 0.144,1.004-0.577,2.795-1.003,4.086l-5.299,15.395h12.604l-5.23-15.395z" fill="#CC0F16"/> <path d="M181.88,142.67c-5.276,0-9.926-1.99-12.08-6.639l5.049-1.814c1.359,2.557,3.736,3.688,7.031,3.688,4.082,0,6.804-1.42,6.804-4.764,0-2.094-1.135-3.404-3.403- 3.799l-7.43-1.301c-4.646-0.799-7.428-3.58-7.428-8.621,0-5.562,4.427-8.906,11.909-8.906,5.557,0,9.47,1.928,11.514,5.615l-4.594,2.332c-1.305-1.938-3.291-3.133-6.864- 3.133-3.854,0-6.121,1.252-6.121,4.092,0,1.645,0.626,2.947,3.005,3.346l7.139,1.184c4.485,0.742,8.228,3.238,8.228,8.682-0.01,7.31-6.03,10.03-12.77,10.03z" fill="#9C9E9F"/> <path d="M210.61,142.67c-10.269,0-13.953-6.127-13.953-16.107,0-9.982,3.684-16.049,13.953-16.049,10.257,0,14.003,6.066,14.003,16.049,0.01,9.98-3.74,16.11-14,16.11zm0- 27.34c-5.678,0-8,2.787-8,11.234s2.323,11.289,8,11.289c5.666,0,7.932-2.842,7.932-11.289s-2.26-11.23-7.93-11.23z" fill="#9C9E9F"/> <path d="M243.86,102.66c-0.938-0.15-1.788-0.205-2.778-0.205-3.122,0-5.276,1.428-5.276,6.016v2.887h7.734l-1.128,4.938h-6.606v25.521h-5.95v-23.426c0-0.621,0.281- 1.303,0.57-2.096h-5.243v-4.938h4.673v-2.887c0-8.619,5.332-10.834,11.289-10.834,1.315,0,2.608,0.18,3.888,0.418l-1.16,4.606z" fill="#9C9E9F"/> <path d="M259.67,142.67c-4.883,0-9.472-1.93-9.472-8.623v-15.818c0-0.57,0.114-1.137,0.564-1.93h-5.553v-4.938h4.989v-10.318l5.955-1.756v12.074h10.34l-1.588,4.938h- 8.752v17.748c0,2.67,1.809,3.689,3.915,3.689,1.756,0,3.228-0.627,4.984-1.814l3.466,3.461c-2.35,2.15-5.69,3.28-8.86,3.28z" fill="#9C9E9F"/> <path d="M301.33,141.82h-5.389l-5.786-17.588c-0.397-1.129-0.732-2.094-0.847-3.738-0.114,1.645-0.51,2.609-0.907,3.738l-5.786,17.588h-5.384l-9.755- 30.459h5.847l5.722,17.924c0.229,0.684,0.57,2.328,0.849,5.445,0.399-3.117,0.626-4.139,1.024-5.332l5.782- 18.037h5.164l5.786,18.037c0.395,1.193,0.622,2.215,1.02,5.332,0.283-3.117,0.618-4.762,0.847-5.445l5.73-17.924h5.842l-9.74,30.46z" fill="#9C9E9F"/> <path d="M332.25,141.82l-0.626-2.215c-3.062,2.045-6.011,3.064-9.58,3.064-7.487,0-10.779-4.252-10.779-10.268,0-7.879,5.844-9.752,11.63- 9.752,2.718,0,5.78,0.396,8.275,0.967v-3.916c0-2.895-1.528-4.373-5.613-4.373-3.405,0-6.238,0.801-8.221,3.691l-4.481-2.609c2.605-4.479,7.542-5.896,12.816- 5.896,9.751,0,11.454,4.814,11.454,9.244v22.062h-4.87zm-1.08-13.78c-2.208-0.348-4.649-0.738-7.087-0.738-3.913,0-6.804,1.303- 6.804,5.1,0,4.141,2.21,5.334,4.764,5.334,3.682,0,6.065-0.912,9.126-2.893v-6.799z" fill="#9C9E9F"/> <path d="M353.91,115.62c-1.761,0-3.52,0.344-4.822,1.418l-1.983,1.645v23.141h-5.959v-30.459h4.875l0.743,2.889,2.096-1.752c1.815-1.529,3.798-1.984,6.009- 1.984,0.966,0,1.875,0.113,2.837,0.232v5.215c-1.2-0.17-2.5-0.34-3.8-0.34z" fill="#9C9E9F"/> <path d="M364.09,128.43c0.11,6.414,2.204,9.307,8.386,9.307,3.976,0,6.527-1.252,8.167-4.43l5.047,1.936c-2.5,5.1-6.406,7.428-13.214,7.428-9.919,0-14.342-5.049-14.342- 16.107,0-9.982,3.401-16.049,14.342-16.049,11.743,0,13.552,9.359,13.552,16.049v1.867h-21.946zm8.39-12.98c-5.437,0-7.936,1.928-8.333,8.168h15.593c-0.12-4.71-2.16-8.17- 7.26-8.17z" fill="#9C9E9F"/> <path d="M114.69,12.406c-11.492-7.945-25.71-12.33-41.746-12.33-14.667,0-27.812,3.664-38.742,10.365-21.059,12.77-34.022,36.676- 34.022,67.309,0,41.436,29.091,79.172,72.735,79.172,43.656,0,72.741-37.736,72.741-79.172,0-29.123-11.72-52.168-30.97-65.342zm- 41.752,1.526c23.414,0,28.176,32.672,28.176,62.34,0,27.48-2.649,64.273-27.889,64.273-25.241,0-28.504-37.152-28.504-64.633,0.004-29.659,4.804-61.975,28.221-61.975z" fill="#CC0F16"/> <path d="M389.59,40.793v6.338h-1.405v-6.338h-2.154v-1.166h5.703v1.166h-2.139z" fill="#CC0F16"/> <path d="M398.46,47.131l-0.333-4.455c-0.01-0.156-0.021-0.354,0.021-0.51l-1.467,3.33h-1.166l-1.467-3.32c0.021,0.178,0.031,0.387,0.021,0.531l-0.333,4.424h-1.363l0.562- 7.504h1.207l1.853,3.965c0.062,0.135,0.094,0.26,0.114,0.354,0.021-0.125,0.042-0.25,0.094-0.363l1.853-3.955h1.207l0.562,7.504h-1.353z" fill="#CC0F16"/> </svg>
  41. This isn’t always great for big images 836KB (227KB gzipped)

  42. None
  43. PNG – 1.18MB TinyPNG – 316.8KB WebP – 97.3KB

  44. WebP Support In <video> tag With LibWebP JS iOS 7????

  45. OS X Not quite ready yet WebP Support

  46. “ ” The solution to worrying about JS lib/framework size:

    include one less .jpg on your site. #throneofjs MIKE TAYLOR @MIKETAYLR HTTPS://TWITTER.COM/MIKETAYLR/STATUSES/227056824275333120
  47. 13KB + 9+ 9+ 9+ 9 = 49KB * 2

    ish = 98KB
  48. Vector Sprites == Icon Fonts ABCDEFGHIJKLM ABCDEFGHIJKLM

  49. Octicons by GitHub https://github.com/filamentgroup/grunticon

  50. The Exercise Routine  Gzip and minify (duh)  Be

    careful when picking third-party libraries  Always build from source, taking only what you need  Send browser dimensions via cookies, get back the right content  Say no to frameworks (when you can)  Use native functionality – Modernizr will help you detect it  Load JS asynchronously – smaller packages  Use SVG and CSS where possible  TinyPNG to compress images – webp for browsers that support it  One less JPG  Try Icon Fonts instead of sprites
  51. Keeping the weight off USING SMARTER TRACKING

  52. Browser in your build script

  53. YSlow for early warnings http://yslow.org/phantomjs

  54. WBench https://github.com/desktoppr/wbench

  55. None
  56. More advice  Read Brad Frost’s Prioritising Performance in Responsive

    Web Design http://bit.ly/WZInSW  Breaking the 1000ms time-to-glass barrier http://bit.ly/18YS6Zh  http://superherojs.com/  http://browserdiet.com
  57. http://heavilyresponsive.tumblr.com by @StuRobson & @AndyDavies

  58. Thank you @steveworkman http://www.flickr.com/photos/hendry/1392283029/ http://www.flickr.com/photos/slgc/3144401738 http://www.flickr.com/photos/flygraphix/2946384560/ http://www.flickr.com/photos/marvin_lee/3198928706/ http://www.flickr.com/photos/simononly/4891405947/ http://www.flickr.com/photos/vancouverfilmschool/6912767213/ http://www.flickr.com/photos/dullhunk/7836566298/

    Photo Credits