Performance and Responsive Web Design

Performance and Responsive Web Design @zachleat

@zachleat http://zachleat.com Filament Group

My Projects BigText f2em.com

http://nebraskajs.com @nebraskajs

Goals Primer RWD !== Media Queries Common Buzzkills and Tips
for faster loading RWD RWD Showcase Showdown Be kind, RWD.

Primer

RWD is A Flexible Grid (Fluid: % + Min Widths)
Flexible Media (Images, Video) img { max-‐width: 100%; } FitVids.js (http://fitvidsjs.com/) (Not Just) Media Queries @media (min-‐width: 20em) { /* CSS goes here */ } http://unstoppablerobotninja.com/entry/on-being-responsive

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

The Web has Responsive Roots

Alternatives to RWD 1. Do nothing (ignore mobile) 2.Use a
separate m-dot site

Ignore Mobile? “Mobile internet adoption has outpaced desktop internet adoption
by eight times.” http://www.lukew.com/ff/entry.asp?993 Alternatives to RWD

Ignore Mobile? Alternatives to RWD

Use a Separate mdot Site Redirects are slow. Maintenance of
UA-Parsing Server Side Content Strategy (Desktop Mode link) Alternatives to RWD

Redirects are Slow “…redirects slow down the user experience. Inserting
a redirect between the user and the HTML document delays everything in the page…” http://developer.yahoo.com/performance/rules.html#redirects “Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.” https://developers.google.com/speed/docs/best-practices/rtt#AvoidRedirects Use a separate mdot Site

Maintain UA-Parsing Server Side Code WURFL updates about once a
month Use a separate mdot Site http://wurﬂ.sourceforge.net/

“Get to a point with your web strategy where you
don't crap your pants every time Apple has a keynote.”

http://en.m.wikipedia.org/ Content Strategy Use a separate mdot Site

Content Strategy http://en.wikipedia.org/ Use a separate mdot Site

Content Strategy Use a separate mdot Site

“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

The Problems Browsers Download and Block Rendering on Unnecessary CSS
Browsers Sometimes Download Unnecessary Images Big Images are Wasted on Small Screens 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> http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

JavaScript that Doesn’t Block <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/

JavaScript that Doesn’t Block var script = document.createElement("script"); script.type =
"text/javascript"; script.src = "foo.js"; var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(script, ref); http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/ http://paulirish.com/2011/sureﬁre-dom-element-insertion/

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” Demo: http://www.phpied.com/files/css-loading/mq.php?mq=all http://www.phpied.com/css-and-the-critical-path/

“Newer” 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
Serial Download Bug was ﬁxed: https://twitter.com/igrigorik/status/266667865644609536

Solutions CSS is sacred. Choose minimal when possible. Separate <link>
elements for each breakpoint Doesn’t scale if you have a lot of breakpoints. Good for WebKit, what about everything else?

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

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 Polyﬁll: https://github.com/paulirish/matchMedia.js/ Careful with IE8-, the polyﬁll requires Media
Query support http://caniuse.com/#feat=matchmedia

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>

Images Don’t Block Doesn’t mean they get a free pass.

Images Don’t Block Doesn’t mean they get a free pass.
753KB

Taxonomy of Images CSS Background Images HTML <img> ‘Responsive Images’

<img> hidden in 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/ Downloading Images

<img> hidden in 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/ NOPE Downloading Images

<div id="test2"></div> #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/ CSS background image hidden in CSS Downloading Images

<div id="test2"></div> #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 CSS background image hidden in CSS Downloading Images

<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; } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ CSS background image on child hidden in CSS Downloading Images

<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; } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ OK CSS background image on child hidden in CSS Downloading Images

<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'); } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ CSS background image replaced in CSS Downloading Images

<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'); } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ ~OK CSS background image replaced in CSS Downloading Images

<div id="test7"></div> #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/ CSS background image replaced in CSS Downloading Images

<div id="test7"></div> #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 CSS background image replaced in CSS Downloading Images

Downloading Images (CSS) Maybe coming to a browser near you:
image-‐set() #test { background-‐image: url(assets/no-‐image-‐set.png); background-‐image: -‐webkit-‐image-‐set(url(assets/test.png) 1x, url(assets/test-‐hires.png) 2x); width:200px; height:75px; } 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.

Picturefill “A Responsive Images approach that you can use today”
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/pictureﬁll/

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> http://scottjehl.github.com/pictureﬁll/

Compressive Images Pump up the size, pump up the JPEG
compression Scale down in the browser 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

Advertising Full of document.write, iframes, blocking JavaScript (errors come for
free) and general badness. Trick: Inject advertising iframes using JavaScript (after onload) document.createElement('iframe');

Social Networking Widgets MacBook-‐Amateur:~ zachleat$ yslow http://fgte.st/SocialCount/examples/ control-‐test.html size: 237.7K
(237791 bytes) overall score: A (91) url: http://fgte.st/SocialCount/examples/control-‐test.html # of requests: 12 ruleset: ydefault page load time: 834 http://yslow.org/phantomjs/

SocialCount Above sample: http://f2em.com/ 3.3KB (GZIP) 1 JS request 1
CSS request 1 optional request for icons 1 optional AJAX request for counts https://github.com/ﬁlamentgroup/SocialCount

Showcase Showdown

Boston Globe MacBook-‐Amateur:~ zachleat$ yslow http://www.bostonglobe.com/ size: 927.8K (927834 bytes)
overall score: B (85) url: http://www.bostonglobe.com/ # of requests: 76

Smashing Magazine MacBook-‐Amateur:~ zachleat$ yslow http://www.smashingmagazine.com/ size: 1061.3K (1061339 bytes)
overall score: C (74) url: http://www.smashingmagazine.com/ # of requests: 77

Starbucks MacBook-‐Amateur:~ zachleat$ yslow http://www.starbucks.com/ size: 1122.8K (1122848 bytes) overall
score: C (71) url: http://www.starbucks.com/ # of requests: 61

Time MacBook-‐Amateur:~ zachleat$ yslow http://www.time.com/time/ size: 942.6K (942649 bytes) overall
score: C (75) url: http://www.time.com/time/ # of requests: 91

Disney MacBook-‐Amateur:~ zachleat$ yslow http://disney.com/ size: 4451.4K (4451454 bytes) overall
score: B (82) url: http://disney.com/ # of requests: 79

CONCLUDE !!Performance (Performance isn’t a boolean) Tools solve problems. Problem
Solving requires Code. We used jQuery and gladly paid the performance penalty for browser compatibility.

Don’t Blame the Tools “Desktop site 31MB. Separate mobile site
63MB. Conclusion: All mdot sites are bad for performance. Did I do that right? http://briefcakes.com/ Gallery.php ”

“The fastest web site is the one with nothing on
it.”

@zachleat http://www.zachleat.com

Performance and Responsive Web Design

Performance and Responsive Web Design

More Decks by zachleat

Other Decks in Programming

Featured

Transcript