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. 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
  2. 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
  3. 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
  4. 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
  5. 8.
  6. 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
  7. 10.

    WARNING Weight vs Speed Many of these tips apply to

    both decreasing page speed and load time Some tips favour weight over speed
  8. 13.
  9. 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
  10. 15.
  11. 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
  12. 18.
  13. 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
  14. 21.
  15. 22.

    Heavyweight Bootstrap 118 117 22 0 50 100 150 200

    250 300 Bootstrap Weight in KB Img CSS JS
  16. 26.

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

    Serve responsive CSS With <= phone breakpoint Serve mobile CSS Receive CSS Yes No
  17. 27.

    “ ” I just want to try the latest things,

    and it’s so easy! ANY JAVASCRIPT DEVELOPER, EVER “ ”
  18. 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
  19. 29.
  20. 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 () { });
  21. 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
  22. 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>
  23. 42.
  24. 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
  25. 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
  26. 55.
  27. 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