Slide 1
Slide 1 text
Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012
Responsive
Responsive Design
Building sites that are flexible and fast
Velocity NY | October 14, 2013
Slide 2
Slide 2 text
— Ethan Marcotte
Now more than ever, we’re designing work meant to be
viewed along a gradient of different experiences.
Responsive web design offers us a way forward, finally
allowing us to “design for the ebb and flow of things.
http://alistapart.com/article/responsive-web-design
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
— John Allsopp
The control which designers know in the print medium, and
often desire in the web medium, is simply a function of the
limitation of the printed page. We should embrace the fact
that the web doesn’t have the same constraints, and design
for this flexibility.
http://alistapart.com/article/dao
Slide 5
Slide 5 text
More than layout
Slide 6
Slide 6 text
— Ethan Marcotte
Now more than ever, we’re designing work meant to be
viewed along a gradient of different experiences.
Responsive web design offers us a way forward, finally
allowing us to “design for the ebb and flow of things.
gradient of different experiences
http://alistapart.com/article/responsive-web-design
Slide 7
Slide 7 text
— Ethan Marcotte
Now more than ever, we’re designing work meant to be
viewed along a gradient of different experiences.
Responsive web design offers us a way forward, finally
allowing us to “design for the ebb and flow of things.
gradient of different experiences
http://alistapart.com/article/responsive-web-design
Slide 8
Slide 8 text
— Stephanie Rieger
Shoot me now…responsive design has seemingly become
confused with an opportunity to reduce performance rather
than improve it.
https://twitter.com/stephanierieger/status/245240465572642816
Slide 9
Slide 9 text
74 requests, 1511kb
114 requests, 1200kb
99 requests, 1298kb
105 requests, 5942kb
Slide 10
Slide 10 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 11
Slide 11 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 12
Slide 12 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 13
Slide 13 text
Revenue
Slide 14
Slide 14 text
Revenue
Traffic
Conversions
Satisfaction
Page views
Slide 15
Slide 15 text
71%
as quickly or faster
http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
Slide 16
Slide 16 text
Performance is a fundamental
component of the user experience.
Slide 17
Slide 17 text
RWD is bad for performance!!!
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Blame the implementation, not the
technique.
http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
March 2012: 829kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
Slide 22
Slide 22 text
March 2012: 829kb
March 2013: 1031kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
Slide 23
Slide 23 text
Performance needs to matter because it matters to users
A culture of performance
Slide 24
Slide 24 text
— A friend
I doubt anyone really wants to release a site that doesn't
perform well, it's just a product of not being afforded the
luxury of time and top-down pressure.
Slide 25
Slide 25 text
Set a performance budget
Slide 26
Slide 26 text
Must be usable in <= 10s
65kB - 100kB
Slide 27
Slide 27 text
1. Optimize
Slide 28
Slide 28 text
1. Optimize
2. Remove
Slide 29
Slide 29 text
1. Optimize
2. Remove
3. Don’t Add
Slide 30
Slide 30 text
Become a performance masochist
Embrace the pain
Slide 31
Slide 31 text
Get real, early
Slide 32
Slide 32 text
— Brad Frost
You can’t mock-up performance in Photoshop.
Slide 33
Slide 33 text
— Brad Frost
You can’t mock-up performance in Photoshop.
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Or: Why I cry myself to sleep at night
Responsive Images
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
61%
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
66%
Slide 40
Slide 40 text
Trim the fat
Compress any and all images
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
23 images = 633.0 KB
Before Compression
Slide 43
Slide 43 text
23 images = 597.4 KB
After Compression
Slide 44
Slide 44 text
35.6 KB
After Compression
Slide 45
Slide 45 text
11 CSS background images = 525.9 KB
Before Compression
Slide 46
Slide 46 text
11 CSS background images = 317.1 KB
After Compression
Slide 47
Slide 47 text
208.8KB
After Compression
Slide 48
Slide 48 text
244.4 KB
After Compression
Slide 49
Slide 49 text
Show Not, Waste Not
Don’t download things you don’t need
Slide 50
Slide 50 text
display:none is useless
Slide 51
Slide 51 text
Slide 52
Slide 52 text
Everybody loads it anyway
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Slide 56
Slide 56 text
Slide 57
Slide 57 text
Slide 58
Slide 58 text
Slide 59
Slide 59 text
The preloader
Slide 60
Slide 60 text
Decorative vs. content
Slide 61
Slide 61 text
Appropriate images
Make sure things are the right size and resolution
Slide 62
Slide 62 text
72%
Slide 63
Slide 63 text
255 values for red
255 values for green
255 values for blue
255 values for alpha
Slide 64
Slide 64 text
600px
600px
Slide 65
Slide 65 text
550px
550px
Slide 66
Slide 66 text
(600 x 600) - (550 x 550)
57,500 pixels
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Accessible text
Slide 70
Slide 70 text
Slide 71
Slide 71 text
Slide 72
Slide 72 text
Slide 73
Slide 73 text
LQIP
http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/
Slide 74
Slide 74 text
Slide 75
Slide 75 text
Compressive
Slide 76
Slide 76 text
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 77
Slide 77 text
SVG
Slide 78
Slide 78 text
Slide 79
Slide 79 text
.main-header {
background: url(logo.svg) no-repeat top left;
background-size: contain;
}
.no-svg .main-header {
background-image: url(logo.png);
}
Slide 80
Slide 80 text
1. Analyze
Slide 81
Slide 81 text
1. Analyze
2. Big images first
Slide 82
Slide 82 text
(600 x 600) - (550 x 550)
57,500 pixels
Slide 83
Slide 83 text
(200 x 200) - (150 x 150)
17,500 pixels
Slide 84
Slide 84 text
57,500 / 17,500 = 3.2x
Slide 85
Slide 85 text
1. Analyze
2. Big images first
3. Know the trade-offs
Slide 86
Slide 86 text
Actually, not so sucky
Background images
Slide 87
Slide 87 text
Slide 88
Slide 88 text
@media all and (min-width: 601px) {
#test5 {
background-image:url('images/test5-desktop.png');
width:200px;
height:75px;
}
}
@media all and (max-width: 600px) {
#test5 {
background-image:url('images/test5-mobile.png');
width:200px;
height:75px;
}
}
Slide 89
Slide 89 text
Load only what you need, when you need it
Conditional loading
Slide 90
Slide 90 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
Slide 91
Slide 91 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
Slide 92
Slide 92 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
3. Leftovers
Slide 93
Slide 93 text
Cutting the mustard
Slide 94
Slide 94 text
if ('querySelector' in document
! && 'localStorage' in window
! && 'addEventListener' in window) {
}
Slide 95
Slide 95 text
http://bit.ly/RSrWVI
Slide 96
Slide 96 text
http://bit.ly/RSrWVI
Slide 97
Slide 97 text
http://bit.ly/RSrWVI
Slide 98
Slide 98 text
globe.enhanced = (
! respond.mediaQueriesSupported
! || globe.browser.ie6
! || globe.browser.ie7
! || globe.browser.ie8
)
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 103
Slide 103 text
anchorInclude : function ( elem ) {
var url = elem.getAttribute('href');
var target =
document.getElementById(
elem.getAttribute('data-target')
);
reqwest(url, function (resp) {
target.innerHTML = resp;
});
}
Slide 105
Slide 105 text
$("[data-append],[data-replace],[data-after],
[data-before]").ajaxInclude();
Slide 106
Slide 106 text
No AJAX, no problem
Slide 107
Slide 107 text
Slide 108
Slide 108 text
var toShow = document.querySelectorAll('[data-lazy-content=' +
item.getAttribute('[data-lazy-reveal]') + ']';
for (var j = toShow.length - 1; j >= 0; j--) {
! var children = toShow[j].childNodes;
! for (var k = children.length - 1; k >= 0; k--) {
! ! var child = children[k];
! ! if (child.nodeType === 8) {
! ! ! //it's a comment
! ! ! toShow[j].innerHTML = child.nodeValue;
! ! ! break;
! ! }
! }
}
Slide 109
Slide 109 text
What about CSS?
Slide 110
Slide 110 text
Embedded
a {
! text-decoration: none;
}
@media screen and (min-width: 1300px) {
! a {
! ! text-decoration: underline;
! }
}
Slide 111
Slide 111 text
External
Slide 112
Slide 112 text
Embedded External
One HTTP request Many HTTP requests
Slide 113
Slide 113 text
Embedded External
One HTTP request Many HTTP requests
Large file could be hard to maintain Organization can be easier
Slide 114
Slide 114 text
Embedded External
One HTTP request Many HTTP requests
Large file could be hard to maintain Organization can be easier
Extra weight, regardless of if needed Smaller CSS for device not supporting media queries
Slide 115
Slide 115 text
Embedded External
One HTTP request Many HTTP requests
Large file could be hard to maintain Organization can be easier
Extra weight, regardless of if needed Smaller CSS for device not supporting media queries
All styles downloaded All styles downloaded (if media queries supported)
Slide 116
Slide 116 text
http://scottjehl.github.com/CSS-Download-Tests/
Slide 117
Slide 117 text
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
Chrome 26
Safari 6.0.2
iOS Safari 6.1
Android 4.2.1
Android 4.2.1 Chrome 18
Android 4.2.1 Chrome 18
Android 4.2.1 Opera Mini
Yay!
Slide 120
Slide 120 text
Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
Firefox 20
Opera 12.15
Android 4.2.1 Opera Mobile
Nooooo!
Slide 121
Slide 121 text
Embedded External
One HTTP request Many HTTP requests
Large file could be hard to maintain Organization can be easier
Extra weight, regardless of if needed Smaller CSS for device not supporting media queries
All styles downloaded All styles downloaded (if media queries supported)
Everything is in the critical path Browsers can optimize for the critical path
Slide 122
Slide 122 text
Go vanilla
Slide 123
Slide 123 text
https://twitter.com/ppk/status/249100988693241856
Slide 124
Slide 124 text
https://twitter.com/ppk/status/249100988693241856
Slide 125
Slide 125 text
jQuery = 200-300ms
based on 1.8.0
http://jsperf.com/zepto-jq-eval
Slide 126
Slide 126 text
Up to 8s!
Slide 127
Slide 127 text
Custom jQuery builds
Slide 128
Slide 128 text
Everything has
a trade-off
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
What value does this provide?
Slide 131
Slide 131 text
Don’t worry about JS library size?
Just include one less image?
Slide 132
Slide 132 text
Worry about JS library size and
include one less image.
Slide 133
Slide 133 text
Smart defaults
Slide 134
Slide 134 text
RESS
Slide 135
Slide 135 text
If you only knew the power of the Dark Side!
RESS
Slide 136
Slide 136 text
This @#$% ain’t easy
Slide 137
Slide 137 text
UA detection
is evil!
Slide 138
Slide 138 text
Browsers are like
fishermen
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
Blame the implementation,
not the technique.
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
82% of Alexa top 100 sites use
some form of server-side
detection
http://mobiforge.com/designing/blog/server-side-device-detection-used-82-alexa-top-100-sites
Slide 145
Slide 145 text
http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
Slide 146
Slide 146 text
http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
Slide 147
Slide 147 text
// check network performance
require_once 'DeviceAtlasNPC.php';
session_start();
// instantiate NPC
$deviceAtlasNPC = new DeviceAtlasNPC();
// test network performance
$quality = $deviceAtlasNPC->getQuality();
http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
Slide 148
Slide 148 text
$path = $_SERVER['SCRIPT_NAME'];
switch($quality) {
case DeviceAtlasNPC::HIGH_QUALITY:
if ($_SERVER['HTTP_HOST'] == 'lo.site.com') {
header("Location: http://site.com".$path );
}
break;
case DeviceAtlasNPC::MEDIUM_QUALITY:
if ($_SERVER['HTTP_HOST'] == 'lo.site.com') {
header("Location: http://site.com".$path );
}
break;
case DeviceAtlasNPC::LOW_QUALITY:
if ($_SERVER['HTTP_HOST'] == 'site.com') {
header("Location: http://lo.site.com".$path );
}
break;
default:
}
http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
Slide 149
Slide 149 text
getCapability('has_cellular_radio') === 'true') {
! if ($device->getCapability('xhtml_make_phone_call_string') !== 'none') {
! ! $wireless = true;
! ! $method = $device->getCapability('xhtml_make_phone_call_string');
! } else {
! ! $wireless = false;
! }
} else {
! $wireless = false;
}
?>
Slide 150
Slide 150 text
var features = {};
if (Utils.readCookie('features')) {
! features = Utils.readCookie('features');
! features = JSON.parse(features);
} else {
! features['width'] = Utils.tests.getWidth();
! Utils.createCookie('features', JSON.stringify(features));
}
Slide 151
Slide 151 text
width) {
! $width = $feature->width;
} else {
! $width = $device->getCapability('resolution_width');
}
?>
Slide 152
Slide 152 text
Client Hints
https://github.com/igrigorik/http-client-hints
Slide 153
Slide 153 text
CH-DPR: 2.00
Slide 154
Slide 154 text
Time to move beyond
just visual aesthetics
Slide 155
Slide 155 text
Talk about it
Slide 156
Slide 156 text
This may not be easy...
Slide 157
Slide 157 text
...but man is it fun!
Slide 158
Slide 158 text
thank you!
@tkadlec timkadlec.com
TIM KADLEC
Slide 159
Slide 159 text
implementingresponsivedesign.com