performance & responsive web design

November 8, 2013

Performance &Responsive Web Design(RWD)NebraskaJS via @zachleat

Thursday, November 8, 12

About Me

✤ @zachleat on

✤ zachleat.com [email protected]

✤ Zach Leatherman

✤


mailto:[email protected]

mailto:[email protected]

My Projects

✤ BigText ✤ parseIntimate.com


My Projects

✤ ALARMd.com ✤ f2em.com


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.


Goals

✤ Primer

✤ RWD !== Media Queries

✤ 99 Problems

✤ Buzzkills

✤ RWD Showcase Showdown

✤ Be kind, RWD.


Primer


RWD is

✤ A Flexible Grid (Fluid: % + Min Widths)

✤ Flexible Media (Images, Video)

✤ (Not Just) Media Queries

http://unstoppablerobotninja.com/entry/on-being-responsive




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

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

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#_




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.htmlThursday, November 8, 12

http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html

http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html

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




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 <snob>Blurry</snob> Screens


The “Average” Web Page

http://httparchive.org/interesting.php#bytesperpage




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/




JavaScript that Doesn’t Block

<script src></script></body>






<head><!-‐-‐ Downloads right away -‐-‐><script src async></script><!-‐-‐ Waits to download -‐-‐><script src defer></script>

http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/





var script = document.createElement("script");script.type = "text/javascript";script.src = "foo.js";

document.getElementsByTagName("head")[0].appendChild(script);





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/


http://www.phpied.com/files/css-loading/mq.php?mq=all

http://www.phpied.com/files/css-loading/mq.php?mq=all



WebKit

<!-‐-‐ blocking stylesheet, nothing renders until it is downloaded and parsed -‐-‐>

<link href="main.css" rel="stylesheet">

<!-‐-‐ non-‐blocking, low download priority because of the evaluated media query -‐-‐><link href="i-‐want-‐a-‐monitor-‐of-‐this-‐size.css" rel="stylesheet" media="(min-‐width: 4000px)">

<!-‐-‐ print stylesheet is non-‐blocking -‐-‐><link href="noop.css" rel="stylesheet" media="print">

http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/




Everything Else*

<!-‐-‐ blocking stylesheet, nothing renders until it is downloaded and parsed (timeouts may vary) -‐-‐> <link href="main.css" rel="stylesheet"><link href="i-‐want-‐a-‐monitor-‐of-‐this-‐size.css" rel="stylesheet" media="(min-‐width: 4000px)"><link href="noop.css" rel="stylesheet" media="print">


Downloading CSS

http://scottjehl.github.com/CSS-Download-Tests/




Downloading CSS

Firefox 16

Safari 6 Chrome 22

Opera 12


Solutions

✤ CSS is sacred. Choose minimal when possible.

✤ Separate <link> elements for each Media Query

✤ Doesn’t scale if you have a lot of breakpoints.

✤ Good for WebKit, what about everything else?

✤ eCSSential


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


https://github.com/filamentgroup/eCSSential




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




matchMedia

Polyfill: https://github.com/paulirish/matchMedia.js/Careful with IE8-, the polyfill requires Media Query support

http://caniuse.com/#feat=matchmedia


https://github.com/paulirish/matchMedia.js/

https://github.com/paulirish/matchMedia.js/



eCSSential

<head> <script> <!-‐-‐ 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" }); </script></head>


eCSSential Demo

✤ http://filamentgroup.github.com/eCSSential/examples/concat/


http://filamentgroup.github.com/eCSSential/examples/concat/

http://filamentgroup.github.com/eCSSential/examples/concat/

Images Don’t Block

✤ Doesn’t mean they get a free pass.


Images Don’t Block

✤ Doesn’t mean they get a free pass.

753KBThursday, November 8, 12

Downloading Images (CSS)

<div id="test1"> <img src="images/test1.png" alt="" /></div>@media all and (max-‐width: 600px) { #test1 { display:none; }}

http://timkadlec.com/2012/04/media-query-asset-downloading-results/





<div id="test1"> <img src="images/test1.png" alt="" /></div>@media all and (max-‐width: 600px) { #test1 { display:none; }}


NOPEThursday, November 8, 12




<div id="test2"></div>#test2 { background-‐image:url('images/test2.png'); width:200px; height:75px;}@media all and (max-‐width: 600px) { #test2 {display:none;}}






<div id="test2"></div>#test2 { background-‐image:url('images/test2.png'); width:200px; height:75px;}@media all and (max-‐width: 600px) { #test2 {display:none;}}


NOPEThursday, November 8, 12




<div id="test3"> <div></div></div>#test3 div { background-‐image:url('images/test3.png'); width:200px; height:75px;}@media all and (max-‐width: 600px) { #test3 { display:none; }}






<div id="test3"> <div></div></div>#test3 div { background-‐image:url('images/test3.png'); width:200px; height:75px;}@media all and (max-‐width: 600px) { #test3 { display:none; }}


OKThursday, November 8, 12




<div id="test4"></div>

#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');

}

}







#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');

}

}


~OKThursday, November 8, 12





#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 */

}

}







#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 */

}

}


OKThursday, November 8, 12




✤ Coming to a browser near you: image-‐set()

✤ http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/


http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/




Downloading <img>

✤ RESPONSIVE IMAGES

✤ Whatever solution you pick, make sure it doesn’t make duplicate requests.


Downloading <img>

✤ 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


Picturefill

✤ “A Responsive Images approach that you can use today”

✤ https://github.com/scottjehl/picturefill


https://github.com/scottjehl/picturefill

https://github.com/scottjehl/picturefill

Picturefill

<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-‐src="external/imgs/small.jpg"></div> <div data-‐src="external/imgs/medium.jpg" data-‐media="(min-‐width: 400px)"></div> <div data-‐src="external/imgs/large.jpg" data-‐media="(min-‐width: 800px)"></div> <div data-‐src="external/imgs/extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div>

<!-‐-‐ Fallback content for non-‐JS browsers. Same img src as the initial, unqualified source element. -‐-‐> <noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript></div>

http://scottjehl.github.com/picturefill/




Picturefill

✤ data-‐media="(min-‐width: 400px)"

✤ Uses matchMedia.

✤ No duplicate requests!


Picturefill (HDPI)

<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-‐src="small.jpg"></div> <div data-‐src="small.jpg" data-‐media="(min-‐device-‐pixel-‐ratio: 2.0)"></div> <div data-‐src="medium.jpg" data-‐media="(min-‐width: 400px)"></div> <div data-‐src="medium_x2.jpg" data-‐media="(min-‐width: 400px) and (min-‐device-‐pixel-‐ratio: 2.0)"></div> <div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div> <div data-‐src="large_x2.jpg" data-‐media="(min-‐width: 800px) and (min-‐device-‐pixel-‐ratio: 2.0)"></div> <div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div> <div data-‐src="extralarge_x2.jpg" data-‐media="(min-‐width: 1000px) and (min-‐device-‐pixel-‐ratio: 2.0)"></div>

...</div>





Compressive Images

✤ Pump up the size, pump up the JPEG compression

✤ Scale down in the browser

✤ http://filamentgroup.com/lab/rwd_img_compression/


http://filamentgroup.com/lab/rwd_img_compression/

http://filamentgroup.com/lab/rwd_img_compression/

Picturefill Simplifes to (HDPI)

<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-‐src="small_compressive.jpg"></div> <div data-‐src="medium_compressive.jpg" data-‐media="(min-‐width: 400px)"></div> <div data-‐src="large_compressive.jpg" data-‐media="(min-‐width: 800px)"></div> <div data-‐src="extralarge_compressive.jpg" data-‐media="(min-‐width: 1000px)"></div>

<!-‐-‐ TODO: adjust rendered sizes -‐-‐> ...</div>

✤ Careful with Memory Consumption!


Buzzkills


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’);


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


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


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


Showcase Showdown


Boston Globe

1.31 MBAdvertising, Video Player, Web Fonts, Tracking and Analytics


Disney.com

1.59 MBAdvertising, Web Fonts, Tracking and Analytics


Starbucks


Time.com


Smashing Magazine

1.87 MBAdvertising, Web Fonts, Tracking and Analytics


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.


performance & responsive web design

Documents

mobile content

content strategy mobile

average web page http

desktop users

unnecessary imagesbig

widthsflexible media

retina images

block rendering