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

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
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
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
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
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)
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
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