Slide 1

Slide 1 text

November 8, 2013 Performance & Responsive Web Design (RWD) NebraskaJS via @zachleat Thursday, November 8, 12

Slide 2

Slide 2 text

About Me ✤ @zachleat on ✤ zachleat.com [email protected] ✤ Zach Leatherman ✤ Thursday, November 8, 12

Slide 3

Slide 3 text

My Projects ✤ BigText ✤ parseIntimate.com Thursday, November 8, 12

Slide 4

Slide 4 text

My Projects ✤ ALARMd.com ✤ f2em.com Thursday, November 8, 12

Slide 5

Slide 5 text

Housekeeping ✤ We need one or more volunteers to speak at January’s NebraskaJS. ✤ Tweet @nebraskajs with Topic Ideas even if you don’t want to speak. Thursday, November 8, 12

Slide 6

Slide 6 text

Goals ✤ Primer ✤ RWD !== Media Queries ✤ 99 Problems ✤ Buzzkills ✤ RWD Showcase Showdown ✤ Be kind, RWD. Thursday, November 8, 12

Slide 7

Slide 7 text

Primer Thursday, November 8, 12

Slide 8

Slide 8 text

RWD is ✤ A Flexible Grid (Fluid: % + Min Widths) ✤ Flexible Media (Images, Video) ✤ (Not Just) Media Queries http://unstoppablerobotninja.com/entry/on-being-responsive Thursday, November 8, 12

Slide 9

Slide 9 text

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Thursday, November 8, 12

Slide 10

Slide 10 text

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Thursday, November 8, 12

Slide 11

Slide 11 text

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Thursday, November 8, 12

Slide 12

Slide 12 text

RWD & performance ✤ Two alternatives to RWD: ✤ Do nothing ✤ Use a separate m.dot site ✤ Redirects are slow. ✤ Maintenance of UA-Parsing Server Side Redirects (WURFL updates ~monthly) ✤ Content Strategy (Desktop Mode link) http://en.m.wikipedia.org/?useformat=mobile#_ Thursday, November 8, 12

Slide 13

Slide 13 text

Google recommends RWD ✤ “It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.” ✤ “Google can discover your content more efficiently as we wouldn't need to crawl a page with the different Googlebot user agents to retrieve and index all the content.” http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html Thursday, November 8, 12

Slide 14

Slide 14 text

Content Strategy “Mobile users want to see our menu, hours, and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.” https://twitter.com/wilto/status/63284673723375616 Thursday, November 8, 12

Slide 15

Slide 15 text

Thursday, November 8, 12

Slide 16

Slide 16 text

99 Problems ✤ Browsers Download and Block Rendering on Unnecessary CSS ✤ Browsers Sometimes Download Unnecessary Images ✤ Big Images are Wasted on Small Screens ✤ Related: Retina Images are Wasted on Blurry Screens Thursday, November 8, 12

Slide 17

Slide 17 text

The “Average” Web Page http://httparchive.org/interesting.php#bytesperpage Thursday, November 8, 12

Slide 18

Slide 18 text

JavaScript Can Block ✤ “With scripts, progressive rendering is blocked for all content below the script.” http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/ Thursday, November 8, 12

Slide 19

Slide 19 text

JavaScript that Doesn’t Block

Slide 20

Slide 20 text

JavaScript that Doesn’t Block http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/ Thursday, November 8, 12

Slide 21

Slide 21 text

JavaScript that Doesn’t Block var  script  =  document.createElement("script"); script.type  =  "text/javascript"; script.src  =  "foo.js"; document.getElementsByTagName("head") [0].appendChild(script); http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/ Thursday, November 8, 12

Slide 22

Slide 22 text

Stylesheets Block ✤ “Browsers (except Opera) block rendering until all screen CSS arrives. With the worst possible experience: white page.” ✤ “Browsers download CSS they don't need, e.g. print, tv, device- ratio... And most browsers (except Opera and Webkit) block rendering because of these too” ✤ http://www.phpied.com/files/css-loading/mq.php?mq=all http://www.phpied.com/css-and-the-critical-path/ Thursday, November 8, 12

Slide 23

Slide 23 text

WebKit   http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/ Thursday, November 8, 12

Slide 24

Slide 24 text

Everything Else*   Thursday, November 8, 12

Slide 25

Slide 25 text

Downloading CSS http://scottjehl.github.com/CSS-Download-Tests/ Thursday, November 8, 12

Slide 26

Slide 26 text

Downloading CSS Firefox 16 Safari 6 Chrome 22 Opera 12 Thursday, November 8, 12

Slide 27

Slide 27 text

Solutions ✤ CSS is sacred. Choose minimal when possible. ✤ Separate elements for each Media Query ✤ Doesn’t scale if you have a lot of breakpoints. ✤ Good for WebKit, what about everything else? ✤ eCSSential Thursday, November 8, 12

Slide 28

Slide 28 text

eCSSential ✤ “Making responsive CSS load the way it should.” ✤ Downloads Blocking CSS that matches media queries ✤ Downloads other CSS async, non-blocking ✤ https://github.com/filamentgroup/eCSSential Thursday, November 8, 12

Slide 29

Slide 29 text

matchMedia if  (window.matchMedia("(min-­‐width:  400px)").matches)  {    /*  the  view  port  is  at  least  400  pixels  wide  */ }  else  {    /*  the  view  port  is  less  than  400  pixels  wide  */ } https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia Thursday, November 8, 12

Slide 30

Slide 30 text

matchMedia Polyfill: https://github.com/paulirish/matchMedia.js/ Careful with IE8-, the polyfill requires Media Query support http://caniuse.com/#feat=matchmedia Thursday, November 8, 12

Slide 31

Slide 31 text

eCSSential                <!-­‐-­‐  Inline  eCSSential.min.js  -­‐-­‐>        eCSSential({                "all":  "css/all.css",                "(min-­‐width:  20em)":  "css/min-­‐20em.css",                "(min-­‐width:  37.5em)":  "css/min-­‐37.5em.css",                "(min-­‐width:  50em)":  "css/min-­‐50em.css",                "(min-­‐width:  62.5em)":  "css/min-­‐62.5em.css"        });         Thursday, November 8, 12

Slide 32

Slide 32 text

eCSSential Demo ✤ http://filamentgroup.github.com/eCSSential/examples/concat/ Thursday, November 8, 12

Slide 33

Slide 33 text

Images Don’t Block ✤ Doesn’t mean they get a free pass. Thursday, November 8, 12

Slide 34

Slide 34 text

Images Don’t Block ✤ Doesn’t mean they get a free pass. 753KB Thursday, November 8, 12

Slide 35

Slide 35 text

Downloading Images (CSS)
       
@media  all  and  (max-­‐width:  600px)  {        #test1  {  display:none;  } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Thursday, November 8, 12

Slide 36

Slide 36 text

Downloading Images (CSS)
       
@media  all  and  (max-­‐width:  600px)  {        #test1  {  display:none;  } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ NOPE Thursday, November 8, 12

Slide 37

Slide 37 text

Downloading Images (CSS)
#test2  {        background-­‐image:url('images/test2.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test2  {display:none;} } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Thursday, November 8, 12

Slide 38

Slide 38 text

Downloading Images (CSS)
#test2  {        background-­‐image:url('images/test2.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test2  {display:none;} } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ NOPE Thursday, November 8, 12

Slide 39

Slide 39 text

Downloading Images (CSS)
       
#test3  div  {        background-­‐image:url('images/test3.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test3  {                display:none;        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Thursday, November 8, 12

Slide 40

Slide 40 text

Downloading Images (CSS)
       
#test3  div  {        background-­‐image:url('images/test3.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test3  {                display:none;        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ OK Thursday, November 8, 12

Slide 41

Slide 41 text

Downloading Images (CSS)
#test4  {        background-­‐image:url('images/test4-­‐desktop.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test4  {                background-­‐image:url('images/test4-­‐mobile.png');        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Thursday, November 8, 12

Slide 42

Slide 42 text

Downloading Images (CSS)
#test4  {        background-­‐image:url('images/test4-­‐desktop.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test4  {                background-­‐image:url('images/test4-­‐mobile.png');        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ ~OK Thursday, November 8, 12

Slide 43

Slide 43 text

Downloading Images (CSS)
#test7  {        background-­‐image:url('images/test7-­‐lowres.png');        width:200px;        height:75px; } @media  only  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5), only  screen  and  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5), only  screen  and  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  3/2), only  screen  and  (min-­‐device-­‐pixel-­‐ratio:  1.5)  {        #test7  {                background-­‐image:url('images/test7-­‐highres.png');                width:200px;                height:75px;                /*  Editors  note:  this  should  use  background-­‐size  */        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Thursday, November 8, 12

Slide 44

Slide 44 text

Downloading Images (CSS)
#test7  {        background-­‐image:url('images/test7-­‐lowres.png');        width:200px;        height:75px; } @media  only  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5), only  screen  and  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5), only  screen  and  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  3/2), only  screen  and  (min-­‐device-­‐pixel-­‐ratio:  1.5)  {        #test7  {                background-­‐image:url('images/test7-­‐highres.png');                width:200px;                height:75px;                /*  Editors  note:  this  should  use  background-­‐size  */        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ OK Thursday, November 8, 12

Slide 45

Slide 45 text

Downloading Images (CSS) ✤ Coming to a browser near you: image-­‐set() ✤ http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to- support-retina-images/ Thursday, November 8, 12

Slide 46

Slide 46 text

Downloading ✤ RESPONSIVE IMAGES ✤ Whatever solution you pick, make sure it doesn’t make duplicate requests. Thursday, November 8, 12

Slide 47

Slide 47 text

Downloading ✤ If possible, use Vectors (SVG) over Bitmaps (PNG). It’ll look great on HDPI screens. ✤ Vectors are a shortcut for Responsive Images. ✤ Note: Canvas content is bitmapped, but you can redraw at higher resolutions. ✤ Side Note: Font icons are a great scalable alternative to PNG icons Thursday, November 8, 12

Slide 48

Slide 48 text

Picturefill ✤ “A Responsive Images approach that you can use today” ✤ https://github.com/scottjehl/picturefill Thursday, November 8, 12

Slide 49

Slide 49 text

Picturefill
       
       
       
       
               
http://scottjehl.github.com/picturefill/ Thursday, November 8, 12

Slide 50

Slide 50 text

Picturefill ✤ data-­‐media="(min-­‐width:  400px)" ✤ Uses  matchMedia. ✤ No  duplicate  requests! Thursday, November 8, 12

Slide 51

Slide 51 text

Picturefill (HDPI)
       
       
       
       
       
       
           
       
         ...
http://scottjehl.github.com/picturefill/ Thursday, November 8, 12

Slide 52

Slide 52 text

Compressive Images ✤ Pump up the size, pump up the JPEG compression ✤ Scale down in the browser ✤ http://filamentgroup.com/lab/rwd_img_compression/ Thursday, November 8, 12

Slide 53

Slide 53 text

Picturefill Simplifes to (HDPI)
       
       
       
       
               ...
✤ Careful with Memory Consumption! Thursday, November 8, 12

Slide 54

Slide 54 text

Buzzkills Thursday, November 8, 12

Slide 55

Slide 55 text

Buzzkill #1: Advertising ✤ Pit of despair: full of document.write, iframes, blocking JavaScript (errors galore) and general badness. ✤ Inject advertising iframes using JavaScript (after onload) ✤ document.createElement(‘iframe’); Thursday, November 8, 12

Slide 56

Slide 56 text

Buzzkill #2: Social Networking Widgets Network Requests Size (After GZIP) ShareThis 19 98.9KB Facebook 3 41.2KB Twitter 5 48KB Google+ 8 30.8KB Compare to jQuery 1.8.2: 32KB Thursday, November 8, 12

Slide 57

Slide 57 text

SocialCount ✤ 4 KB CSS, 7KB JavaScript (unminified, ungzipped) ✤ 2 requests, optional +1 for Counts ✤ Non-Blocking ✤ Sharing still works without JavaScript ✤ Initializes Native Widgets on Hover / Tap for Inline +1 / Like and Tweet. ✤ In use on f2em.com Thursday, November 8, 12

Slide 58

Slide 58 text

SocialCount ✤ 4 KB CSS, 7KB JavaScript (unminified, ungzipped) ✤ 2 requests, optional +1 for Counts ✤ Non-Blocking ✤ Sharing still works without JavaScript Coming Soon ✤ Initializes Native Widgets on Hover / Tap for Inline +1 / Like and Tweet. ✤ In use on f2em.com Thursday, November 8, 12

Slide 59

Slide 59 text

Showcase Showdown Thursday, November 8, 12

Slide 60

Slide 60 text

Boston Globe 1.31 MB Advertising, Video Player, Web Fonts, Tracking and Analytics Thursday, November 8, 12

Slide 61

Slide 61 text

Disney.com 1.59 MB Advertising, Web Fonts, Tracking and Analytics Thursday, November 8, 12

Slide 62

Slide 62 text

Starbucks Thursday, November 8, 12

Slide 63

Slide 63 text

Time.com Thursday, November 8, 12

Slide 64

Slide 64 text

Smashing Magazine 1.87 MB Advertising, Web Fonts, Tracking and Analytics Thursday, November 8, 12

Slide 65

Slide 65 text

RWD & Performance ✤ “The fastest web site is the one with nothing on it.” ✤ We’re in the problem solving business. ✤ Solutions often require Code. ✤ jQuery and Cross Browser DOM API Compatibility ✤ Solve more problems than you create. Thursday, November 8, 12