Putting your site on a diet

Slide 1

Slide 1 text

Putting Your Site On A Diet @ STEVE WORKMAN

Slide 2

Slide 2 text

We’ve got a weight problem

Slide 3

Slide 3 text

85.9MB!!!

Slide 4

Slide 4 text

“ ” 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

Slide 5

Slide 5 text

“ ” 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

“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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

First Steps to Weight Loss STEPPING ON THE SCALES

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Danger Zone 1 TAKING SWEETS FROM STRANGERS

Slide 18

Slide 18 text

72KB each

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Danger Zone 2 ALL YOU CAN EAT IS NOT A CHALLENGE

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

117KB CSS file = 88KB of waste

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Pro tip: Always build from source

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Bootstrap Datepicker – 19KB HTML5 Native – 0KB

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Being Responsive with JavaScript One large file Lots of little ones

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Danger Zone 3 BEAUTY FOR BEAUTY’S SAKE

Slide 37

Slide 37 text

I’m Twice the Size! DEALING WITH RETINA IMAGES

Slide 38

Slide 38 text

“ ” Flash got it right STEVE WORKMAN, JUST NOW

Slide 39

Slide 39 text

Scalable Vector Graphics

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

OS X Not quite ready yet WebP Support

Slide 46

Slide 46 text

“ ” 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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Vector Sprites == Icon Fonts ABCDEFGHIJKLM ABCDEFGHIJKLM

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Keeping the weight off USING SMARTER TRACKING

Slide 52

Slide 52 text

Browser in your build script

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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