$30 off During Our Annual Pro Sale. View Details »

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

Steve Workman

May 15, 2013
Tweet

More Decks by Steve Workman

Other Decks in Programming

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