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
   

   View Slide

2. We’ve got a weight problem
   

   View Slide

3. 85.9MB!!!
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. View Slide

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
   

   View Slide

10. WARNING
    Weight vs Speed
    Many of these tips apply to both decreasing page speed and load time
    Some tips favour weight over speed
    

    View Slide

11. I’m assuming you all have
    gzip turned on…
    You do, don’t you?
    

    View Slide

12. First Steps to Weight Loss
    STEPPING ON THE SCALES
    

    View Slide

13. View Slide

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
    

    View Slide

15. View Slide

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
    

    View Slide

17. Danger Zone 1
    TAKING SWEETS FROM STRANGERS
    

    View Slide

18. 72KB each
    

    View Slide

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
    

    View Slide

20. Danger Zone 2
    ALL YOU CAN EAT IS NOT A CHALLENGE
    

    View Slide

21. View Slide

22. Heavyweight Bootstrap
    118
    117
    22
    0
    50
    100
    150
    200
    250
    300
    Bootstrap
    Weight in KB
    Img
    CSS
    JS
    

    View Slide

23. 117KB CSS file
    = 88KB of waste
    

    View Slide

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
    

    View Slide

25. Pro tip: Always build from source
    

    View Slide

26. Request CSS
    (with width /
    height
    cookie)
    See CSS
    request
    Serve
    responsive
    CSS
    With <=
    phone
    breakpoint
    Serve mobile
    CSS
    Receive CSS
    Yes
    No
    

    View Slide

27. “
    ”
    I just want to try the
    latest things, and it’s
    so easy!
    ANY JAVASCRIPT DEVELOPER, EVER
    “
    ”
    

    View Slide

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
    

    View Slide

29. Choose the low fat version
    Media
    Element
    104KB
    Flow
    player
    67KB
    Native
    0KB
    JW Player
    305KB
    > >
    

    View Slide

30. Bootstrap Datepicker – 19KB HTML5 Native – 0KB
    

    View Slide

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

    View Slide

32. Being Responsive with JavaScript
    One large file Lots of little ones
    

    View Slide

33. RequireJS
    • Async loading of JS modules
    • Resolves dependencies
    • Only loads & caches what it needs
    • Keeps code DRY
    src=“requirejs.min.js”>
    require([“form-helpers”,
    “utilities”, “d3”], function () {
    });
    

    View Slide

34. Being Responsive with JavaScript
     One large file  Lots of little ones
    r.js
    

    View Slide

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
    

    View Slide

36. Danger Zone 3
    BEAUTY FOR BEAUTY’S SAKE
    

    View Slide

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

    View Slide

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

    View Slide

39. Scalable Vector Graphics
    

    View Slide

40. 
    xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 400 157">
    fill="#CC0F16"/>
    
    fill="#CC0F16"/>
    
    
    fill="#9C9E9F"/>
    
    
    
    
    
    
    
    fill="#CC0F16"/>
    
    
    
    

    View Slide

41. This isn’t always great for big
    images
    836KB
    (227KB gzipped)
    

    View Slide

42. View Slide

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

    View Slide

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

    View Slide

45. OS X
    Not quite ready yet
    WebP Support
    

    View Slide

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
    

    View Slide

47. 13KB + 9+ 9+ 9+ 9 = 49KB * 2 ish = 98KB
    

    View Slide

48. Vector Sprites == Icon Fonts
    ABCDEFGHIJKLM
    ABCDEFGHIJKLM
    

    View Slide

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

    View Slide

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
    

    View Slide

51. Keeping the weight off
    USING SMARTER TRACKING
    

    View Slide

52. Browser in your build script
    

    View Slide

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

    View Slide

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

    View Slide

55. View Slide

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
    

    View Slide

57. http://heavilyresponsive.tumblr.com
    by @StuRobson & @AndyDavies
    

    View Slide

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
    

    View Slide