Performance & Responsive Web Design

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

November 8, 2013

Thursday, November 8, 12

About Me

✤ @zachleat on

✤ zachleat.com
underscore_dot.dash@zachleat.com

✤ Zach Leatherman

✤


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.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 efﬁciently 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

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>

http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/



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

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


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/ﬁles/css-loading/mq.php?mq=all

http://www.phpied.com/css-and-the-critical-path/


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 Opera 12

Safari 6 Chrome 22


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/ﬁlamentgroup/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

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

Polyﬁll: https://github.com/paulirish/matchMedia.js/
Careful with IE8-, the polyﬁll requires Media Query support


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://ﬁlamentgroup.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.

7 5 3 KB

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/



PE
<div
id="test1">

O

<img
src="images/test1.png"
alt=""
/>

N
</div>
@media
all
and
(max-‐width:
600px)
{

#test1
{
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;}
}




PE
<div
id="test2"></div>

O
#test2
{


N

width:200px;

height:75px;
}
@media
all
and
(max-‐width:
600px)
{

#test2
{display:none;}
}




<div
id="test3">

<div></div>
</div>
#test3
div
{


width:200px;

height:75px;
}
@media
all
and
(max-‐width:
600px)
{

#test3
{

display:none;

}
}




<div
id="test3">

<div></div>

K
</div>
#test3
div
{

O


width:200px;

height:75px;
}
@media
all
and
(max-‐width:
600px)
{

#test3
{

display:none;

}
}




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

}
}




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

K
#test4
{

O

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

}
}



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

}
}



<div
id="test7"></div>
#test7
{

background-‐image:url('images/test7-‐lowres.png');

width:200px;

K

height:75px;
}

O
@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
1.5)
{

#test7
{

background-‐image:url('images/test7-‐highres.png');

width:200px;

height:75px;

/*
Editors
note:
this
should
use
background-‐size
*/

}
}




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

✤ 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/pictureﬁll


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"
800px)"></div>

<div
data-‐src="external/imgs/extralarge.jpg"

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"

400px)"></div>

<div
data-‐src="medium_x2.jpg"

400px)
and
2.0)"></div>

<div
data-‐src="large.jpg"

800px)"></div>

<div
data-‐src="large_x2.jpg"

800px)
and
2.0)"></div>

<div
data-‐src="extralarge.jpg"

1000px)"></div>

<div
data-‐src="extralarge_x2.jpg"
1000px)
and
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://ﬁlamentgroup.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"

400px)"></div>

<div
data-‐src="large_compressive.jpg"

800px)"></div>

<div
data-‐src="extralarge_compressive.jpg"

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)
Compare to jQuery 1.8.2: 32KB

ShareThis 19 98.9KB

Facebook 3 41.2KB

Twitter 5 48KB

Google+ 8 30.8KB


SocialCount

✤ 4 KB CSS, 7KB JavaScript (unminiﬁed, ✤ Initializes Native Widgets on Hover / Tap
ungzipped) for Inline +1 / Like and Tweet.

✤ 2 requests, optional +1 for Counts ✤ In use on f2em.com

✤ Non-Blocking

✤ Sharing still works without JavaScript


SocialCount

ng So on
C om i
✤ 4 KB CSS, 7KB JavaScript (unminiﬁed, ✤ Initializes Native Widgets on Hover / Tap
ungzipped) for Inline +1 / Like and Tweet.

✤ 2 requests, optional +1 for Counts ✤ In use on f2em.com

✤ Non-Blocking

✤ Sharing still works without JavaScript


Showcase Showdown


Boston Globe

1.31 MB
Advertising, Video Player, Web Fonts, Tracking and Analytics


Disney.com

1.59 MB
Advertising, Web Fonts, Tracking and Analytics


Starbucks


Time.com


Smashing Magazine

1.87 MB
Advertising, 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

More Related Content

What's hot

Viewers also liked

Similar to Performance & Responsive Web Design

Performance & Responsive Web Design