Slide 1
Slide 1 text
Performance
WITH Responsive Web Design
@zachleat
Slide 2
Slide 2 text
Performance
WITH Responsive Web Design
@zachleat
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
@zachleat
zachleat.com
Slide 5
Slide 5 text
@zachleat
zachleat.com
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Goals
Primer
RWD !== Media Queries
Assets
Common Buzzkills and Tips
for faster loading RWD
RWD Showcase Showdown.
Slide 8
Slide 8 text
Primer
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
RESPONSIVE WEB DESIGN 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 11
Slide 11 text
LET’S ADD AN IPHONE BREAKPOINT
Slide 12
Slide 12 text
LET’S ADD AN iPAD BREAKPOINT
Slide 13
Slide 13 text
ADAPTIVE WEB DESIGN
Slide 14
Slide 14 text
TWERKY WEB DESIGN
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
http://opensignal.com/reports/fragmentation-2013/#frag_screens
Android Viewport Sizes
Slide 18
Slide 18 text
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 19
Slide 19 text
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 20
Slide 20 text
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
The Web has
Responsive Roots
Slide 23
Slide 23 text
Alternatives to RWD
Do nothing (ignore mobile)
Use a separate m-dot site
Slide 24
Slide 24 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 25
Slide 25 text
Ignore Mobile?
Alternatives to RWD
http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-200901-201412
Slide 26
Slide 26 text
Use a Separate mdot Site
Redirects are slow.
Maintenance of UA-Parsing
Server Side
Content Strategy (Desktop Mode link)
Alternatives to RWD
Slide 27
Slide 27 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 28
Slide 28 text
Maintain UA-Parsing Server Side Code
WURFL updates
about once a month
Use a separate mdot Site
http://wurfl.sourceforge.net/
Slide 29
Slide 29 text
“Get to a point with your web
strategy where you don't crap your
pants every time Apple has a
keynote.”
Slide 30
Slide 30 text
http://en.m.wikipedia.org/
Content Strategy
Use a separate mdot Site
Slide 31
Slide 31 text
Content Strategy
http://en.wikipedia.org/
Use a separate mdot Site
Slide 32
Slide 32 text
Content Strategy
Use a separate mdot Site
Slide 33
Slide 33 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 34
Slide 34 text
No content
Slide 35
Slide 35 text
CSS
Slide 36
Slide 36 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 37
Slide 37 text
The “Average” Web Page
http://httparchive.org/interesting.php#bytesperpage
Slide 38
Slide 38 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 39
Slide 39 text
JavaScript that Doesn’t Block
Slide 40
Slide 40 text
JavaScript that Doesn’t Block
http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
Slide 41
Slide 41 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 42
Slide 42 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 43
Slide 43 text
Blink
http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
Slide 44
Slide 44 text
Everything Else*
Slide 45
Slide 45 text
Downloading CSS
http://scottjehl.github.com/CSS-Download-Tests/
Slide 46
Slide 46 text
Downloading CSS
Firefox 35
Opera 26
Chrome 39
Safari 8
Slide 47
Slide 47 text
Solutions
CSS is sacred. Choose minimal when possible.
Separate elements for each breakpoint
Doesn’t scale.
Good for WebKit, what about everything else?
Separate out and inline your Critical CSS.
Slide 48
Slide 48 text
THE FIRST 14KB
Slide 49
Slide 49 text
Critical CSS
https://github.com/filamentgroup/criticalCSS
https://github.com/filamentgroup/grunt-criticalcss
Slide 50
Slide 50 text
grunt.initConfig({
criticalcss:
{
custom:
{
options:
{
url:
"http://localhost:4000",
width:
1200,
height:
900,
outputfile:
"dist/critical.css",
filename:
"/complete-‐sheet.css"
}
}
},
});
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
…
/*
inline
critical.css
here
*/
//
loadCSS
utility
omitted
for
brevity
loadCSS(
"complete-‐sheet.css"
);
…
Slide 53
Slide 53 text
LOADCSS
https://github.com/filamentgroup/loadCSS
Slide 54
Slide 54 text
How we make RWD sites
load fast as heck
http://www.filamentgroup.com/lab/performance-rwd.html
Slide 55
Slide 55 text
Images
Slide 56
Slide 56 text
Images Don’t Block
Doesn’t mean they get a free pass.
Slide 57
Slide 57 text
Images Don’t Block
Doesn’t mean they get a free pass.
1,248 KB
Slide 58
Slide 58 text
Taxonomy of Images
CSS Background Images
HTML ![]()
Responsive Images
Slide 59
Slide 59 text
Slide 60
Slide 60 text
Slide 61
Slide 61 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 62
Slide 62 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 63
Slide 63 text
Slide 64
Slide 64 text
Slide 65
Slide 65 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 66
Slide 66 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 67
Slide 67 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 68
Slide 68 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 69
Slide 69 text
Downloading Images (CSS)
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;
}
Demo: http://cloudfour.com/examples/image-set/
Slide 70
Slide 70 text
Downloading Images (CSS)
image-‐set()
Slide 71
Slide 71 text
Downloading ![]()
Responsive Images
Duplicate requests.
Slide 72
Slide 72 text
Downloading ![]()
Vector First (SVG)
Responsive images are only for
lowly Bitmaps (PNG, JPEG, GIF)
Slide 73
Slide 73 text
SRCSET
Slide 74
Slide 74 text
Slide 75
Slide 75 text
Slide 76
Slide 76 text
Slide 77
Slide 77 text
Slide 78
Slide 78 text
is for Art Direction
Slide 79
Slide 79 text
Picturefill
“A Responsive Images approach that
you can use today”
http://scottjehl.github.io/picturefill/
Slide 80
Slide 80 text
Picturefill
![]()
http://scottjehl.github.io/picturefill/#examples
Slide 81
Slide 81 text
Picturefill (HDPI)
![]()
http://scottjehl.github.com/picturefill/
Slide 82
Slide 82 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 83
Slide 83 text
Compressive Images
Native Size 800x600
Slide 84
Slide 84 text
Compressive Images
Clientside
Resize to 400x300
Slide 85
Slide 85 text
COMPRESSIVe IMAGES
Often a smaller file size than a
scaled down (400x300) image
Looks better on HDPI screens
Slide 86
Slide 86 text
Fonts
Slide 87
Slide 87 text
LOCAL FONT
{
@FONT-FACE
{
Slide 88
Slide 88 text
LOCAL FONT
{
@FONT-FACE
{
Slide 89
Slide 89 text
Flash of Invisible Text
Slide 90
Slide 90 text
FOIT
Slide 91
Slide 91 text
http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0
Slide 92
Slide 92 text
http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0
Slide 93
Slide 93 text
http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0
Slide 94
Slide 94 text
http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0
Slide 95
Slide 95 text
http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0
Slide 96
Slide 96 text
@font-‐face
{
font-‐family:
Open
Sans;
src:
url("data:application/x-‐font-‐
woff;charset=utf-‐8;base64,...")
format("woff");
font-‐weight:
400;
font-‐style:
normal;
}
@font-‐face
{
font-‐family:
Open
Sans;
src:
url("data:application/x-‐font-‐
woff;charset=utf-‐8;base64,...")
format("woff");
font-‐weight:
700;
/*
Bold
*/
font-‐style:
normal;
}
Slide 97
Slide 97 text
loadCSS(
"url/to/fonts-‐woff.css"
);
Slide 98
Slide 98 text
CSS Font Loading
http://dev.w3.org/csswg/css-font-loading/
Slide 99
Slide 99 text
var
doc
=
document,
docEl
=
doc.documentElement;
doc.fonts.load("1em
Raleway")
.then(function()
{
//
The
font
has
loaded.
docEl.className
+=
"
raleway-‐loaded";
});
Slide 100
Slide 100 text
body
{
font-‐family:
sans-‐serif;
}
.raleway-‐loaded
body
{
font-‐family:
Raleway,
sans-‐serif;
}
Slide 101
Slide 101 text
FONTFACEONLOAD
github.com/zachleat/fontfaceonload
(GZIP)
1.5KB JS
USES THE CSS FONT LOADING API WHEN AVAILABLE.
Slide 102
Slide 102 text
Buzzkills
Slide 103
Slide 103 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 104
Slide 104 text
Social Networking Widgets
http://yslow.org/phantomjs/
Slide 105
Slide 105 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 106
Slide 106 text
Showcase Showdown
http://www.webpagetest.org/
Slide 107
Slide 107 text
Boston Globe
http://www.webpagetest.org/result/150115_KD_12MB/
Slide 108
Slide 108 text
BOSTON GLOBE
http://www.webpagetest.org/result/150115_KD_12MB/
Slide 109
Slide 109 text
Smashing Magazine
http://www.webpagetest.org/result/150115_3C_12VZ/
Slide 110
Slide 110 text
Smashing Magazine
Slide 111
Slide 111 text
Starbucks
http://www.webpagetest.org/result/150115_5X_12WA/
Slide 112
Slide 112 text
Time
http://www.webpagetest.org/result/150115_1Z_12WC/
Slide 113
Slide 113 text
Disney
http://www.webpagetest.org/result/150115_CW_12WJ/
Slide 114
Slide 114 text
FILAMENT GROUP
http://www.webpagetest.org/result/150115_EV_130H/
Slide 115
Slide 115 text
FILAMENT GROUP
Slide 116
Slide 116 text
See more: https://twitter.com/rwd
Slide 117
Slide 117 text
Tools solve problems
Problem Solving requires Code
Slide 118
Slide 118 text
Don’t Blame the Tools
Slide 119
Slide 119 text
RWD Performance
Slide 120
Slide 120 text
“The fastest web site is the
one with nothing on it.”
Slide 121
Slide 121 text
RESPONSIBLE
RESPONSIVE DESIGN
Slide 122
Slide 122 text
@zachleat
http://www.zachleat.com
Slide 123
Slide 123 text
@zachleat
http://www.zachleat.com