Slide 1
Slide 1 text
Performance
and Responsive Web Design
@zachleat
Slide 2
Slide 2 text
@zachleat
http://zachleat.com
Filament Group
Slide 3
Slide 3 text
My Projects
BigText f2em.com
Slide 4
Slide 4 text
http://nebraskajs.com
@nebraskajs
Slide 5
Slide 5 text
Goals
Primer
RWD !== Media Queries
Common Buzzkills and Tips for
faster loading RWD
RWD Showcase Showdown
Be kind, RWD.
Slide 6
Slide 6 text
Primer
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 9
Slide 9 text
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 10
Slide 10 text
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
The Web has
Responsive Roots
Slide 13
Slide 13 text
Alternatives to RWD
1. Do nothing (ignore mobile)
2.Use a separate m-dot site
Slide 14
Slide 14 text
Ignore Mobile?
“Mobile internet adoption has outpaced
desktop internet adoption by eight
times.”
http://www.lukew.com/ff/entry.asp?993
Alternatives to RWD
Slide 15
Slide 15 text
Ignore Mobile?
Alternatives to RWD
Slide 16
Slide 16 text
Use a Separate mdot Site
Redirects are slow.
Maintenance of UA-Parsing
Server Side
Content Strategy (Desktop Mode link)
Alternatives to RWD
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Maintain UA-Parsing
Server Side Code
WURFL updates
about once a month
Use a separate mdot Site
http://wurfl.sourceforge.net/
Slide 19
Slide 19 text
“Get to a point with your web
strategy where you don't crap your
pants every time Apple has a
keynote.”
Slide 20
Slide 20 text
http://en.m.wikipedia.org/
Content Strategy
Use a separate mdot Site
Slide 21
Slide 21 text
Content Strategy
http://en.wikipedia.org/
Use a separate mdot Site
Slide 22
Slide 22 text
Content Strategy
Use a separate mdot Site
Slide 23
Slide 23 text
“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
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
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
Blurry Screens
Slide 26
Slide 26 text
The “Average” Web Page
http://httparchive.org/interesting.php#bytesperpage
Slide 27
Slide 27 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/
Slide 28
Slide 28 text
JavaScript that Doesn’t
Block
Slide 29
Slide 29 text
JavaScript that Doesn’t
Block
http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
Slide 30
Slide 30 text
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/surefire-dom-element-insertion/
Slide 31
Slide 31 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”
Demo:
http://www.phpied.com/files/css-loading/mq.php?mq=all
http://www.phpied.com/css-and-the-critical-path/
Slide 32
Slide 32 text
“Newer” WebKit
http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
Slide 33
Slide 33 text
Everything Else*
Slide 34
Slide 34 text
Downloading CSS
http://scottjehl.github.com/CSS-Download-Tests/
Slide 35
Slide 35 text
Downloading CSS
Firefox 16
Safari 6 Chrome 22
Opera 12
Serial Download Bug was fixed: https://twitter.com/igrigorik/status/266667865644609536
Slide 36
Slide 36 text
Solutions
CSS is sacred. Choose minimal when possible.
Separate elements for each breakpoint
Doesn’t scale if you have a lot of breakpoints.
Good for WebKit, what about everything else?
Slide 37
Slide 37 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
Slide 38
Slide 38 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
Slide 39
Slide 39 text
matchMedia
Polyfill: https://github.com/paulirish/matchMedia.js/
Careful with IE8-, the polyfill requires Media Query support
http://caniuse.com/#feat=matchmedia
Slide 40
Slide 40 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"
});
Slide 41
Slide 41 text
Images Don’t Block
Doesn’t mean they get a free pass.
Slide 42
Slide 42 text
Images Don’t Block
Doesn’t mean they get a free pass.
753KB
Slide 43
Slide 43 text
Taxonomy of Images
CSS Background Images
HTML ![]()
‘Responsive Images’
Slide 44
Slide 44 text
Slide 45
Slide 45 text
Slide 46
Slide 46 text
#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
Slide 47
Slide 47 text
#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
Slide 48
Slide 48 text
Slide 49
Slide 49 text
Slide 50
Slide 50 text
#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
Slide 51
Slide 51 text
#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
Slide 52
Slide 52 text
#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
Slide 53
Slide 53 text
#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
Slide 54
Slide 54 text
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/
Slide 55
Slide 55 text
Downloading ![]()
Responsive Images
Whatever solution you pick, make
sure it doesn’t make duplicate
requests.
Slide 56
Slide 56 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.
Slide 57
Slide 57 text
Picturefill
“A Responsive Images approach
that you can use today”
https://github.com/scottjehl/
picturefill
Slide 58
Slide 58 text
Picturefill
![]()
http://scottjehl.github.com/picturefill/
Slide 59
Slide 59 text
Picturefill
data-‐media="(min-‐width:
400px)"
Uses
matchMedia.
No
duplicate
requests!
Slide 60
Slide 60 text
Picturefill (HDPI)
...
http://scottjehl.github.com/picturefill/
Slide 61
Slide 61 text
Compressive Images
Pump up the size, pump up the JPEG
compression
Scale down in the browser
http://filamentgroup.com/lab/
rwd_img_compression/
Slide 62
Slide 62 text
Picturefill Simplifes to
(HDPI)
...
Careful with Memory Consumption!
Slide 63
Slide 63 text
Buzzkills
Slide 64
Slide 64 text
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');
Slide 65
Slide 65 text
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/
Slide 66
Slide 66 text
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/filamentgroup/SocialCount
Slide 67
Slide 67 text
Showcase Showdown
Slide 68
Slide 68 text
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
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
Disney
MacBook-‐Amateur:~
zachleat$
yslow
http://disney.com/
size:
4451.4K
(4451454
bytes)
overall
score:
B
(82)
url:
http://disney.com/
#
of
requests:
79
Slide 73
Slide 73 text
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.
Slide 74
Slide 74 text
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 ”
Slide 75
Slide 75 text
“The fastest web site is the
one with nothing on it.”
Slide 76
Slide 76 text
@zachleat
http://www.zachleat.com