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
underscore_dot.dash@zachleat.com
✤ 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