Presented at the New York Web Performance Meetup in NYC on April 23, 2013

1. Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012
Responsive
Responsive Design
Building sites that are flexible and fast
NY Web Perf Meetup | April 23, 2013

2. — 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

4. — 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

5. More than layout

6. — 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

7. — 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

8. — 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

9. 74 requests, 1511kb
114 requests, 1200kb
99 requests, 1298kb
105 requests, 5942kb

11. 48.97s,
55632.80kb

21. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

22. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

23. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

24. Revenue

25. Revenue
Traffic
Conversions
Satisfaction
Page views

26. 71%as quickly or faster
http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile

27. Performance is a
fundamental component of
the user experience.

28. Blame the implementation,
not the technique.

30. March 2012: 829kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/

31. March 2012: 829kb
March 2013: 1031kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/

33. Performance needs to matter because it matters to users
A culture of performance

34. — 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.

35. Set a performance budget

36. Must be usable in <= 10s
65kB - 100kB

37. 1. Optimize

38. 1. Optimize
2. Remove

39. 1. Optimize
2. Remove
3. Don’t Add

40. Become a performance masochist
Embrace the pain

41. Get real, early

42. — Brad Frost
You can’t mock-up performance in
Photoshop.

44. Or: Why I cry myself to sleep at night
Responsive Images

45. display:none is useless

46. <div id="test1">
<img src="images/test1.png" alt="" />
</div>
@media all and (max-width: 600px) {
#test1 { display:none; }
}

47. Except Opera Mobile and Opera Mini
Everybody loads it anyway

48. http://blog.netvlies.nl/design-interactie/retina-revolution/

49. <picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>

50. <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="medium.jpg"
data-media="(min-width: 400px)"></div>
<div data-src="large.jpg"
data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg"
data-media="(min-width: 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>

51. <img src="fallback.jpg" alt="" srcset="small.jpg 640w
1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

52. Actually, not so sucky
Background images

53. <div id="test3">
<div></div>
</div>
#test3 div {
background-image:url('images/test3.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test3 {
display:none;
}
}

54. <div id="test5"></div>
@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;
}
}

55. Load only what you need, when you need it
Conditional loading

56. 1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii

57. 1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements

58. 1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
3. Leftovers

59. Cutting the mustard

60. if (‘querySelector’ in document
! && ‘localStorage’ in window
! && ‘addEventListener’ in window) {
}

61. http://bit.ly/RSrWVI

62. http://bit.ly/RSrWVI

63. http://bit.ly/RSrWVI

64. globe.enhanced = (
! respond.mediaQueriesSupported
! || globe.browser.ie6
! || globe.browser.ie7
! || globe.browser.ie8
)

67. <h2>
<a data-target="reviews"
href="reviews.html">Reviews</a>
</h2>

68. anchorInclude : function ( elem ) {
var url = elem.getAttribute('href');
var target =
document.getElementById(elem.getAttribute
('data-target'));
reqwest(url, function (resp) {
target.innerHTML = resp;
});
}

69. <a href="..." data-replace="articles/latest/
fragment">Latest Articles</a>
<a href="..." data-before="articles/latest/
fragment">Latest Articles</a>
<a href="..." data-after="articles/latest/
fragment">Latest Articles</a>
<a href="..." data-append="articles/latest/
fragment">Latest Articles</a>

70. $("[data-append],[data-replace],[data-after],
[data-before]").ajaxInclude();

71. No AJAX, no problem

72. <div data-lazy-content="more_puppies" aria-
live="polite">
<!--
<p>You clicked for more puppies! Here you
go:</p>
<img src="puppy.jpg" alt="Lazy loaded
puppy image" />
-->
</div>

73. 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;
! ! }
! }
}

74. Lazy-load images*
maybe*

76. <div class="delayed-image-load"
data-src="http://ichef.bbci.co.uk/news/200/
media/images/64664000/jpg/
_64664041_016703869.jpg"
data-width="521"
data-height="293"></div>

77. <div class="delayed-image-load"
data-src="http://ichef.bbci.co.uk/news/200/
media/images/64664000/jpg/
_64664041_016703869.jpg"
data-width="521"
data-height="293"></div>

78. <div class="delayed-image-load"
data-src="http://ichef.bbci.co.uk/news/200/
media/images/64664000/jpg/
_64664041_016703869.jpg"
data-width="521"
data-height="293"></div>

80. <img class="delayed"
src="http://assets.aneventapart.com/_/img/
lazy-holder.gif"
data-original="http://
assets.aneventapart.com/images/made/images/
uploads/action-shots/
aea_zeldman_300x_96_96_c1.jpg" width="96"
height="96" />

81. <img class="delayed"
src="http://assets.aneventapart.com/_/img/
lazy-holder.gif"
data-original="http://
assets.aneventapart.com/images/made/images/
uploads/action-shots/
aea_zeldman_300x_96_96_c1.jpg" width="96"
height="96" />

82. <img class="delayed"
src="http://assets.aneventapart.com/_/img/
lazy-holder.gif"
data-original="http://
assets.aneventapart.com/images/made/images/
uploads/action-shots/
aea_zeldman_300x_96_96_c1.jpg" width="96"
height="96" />

83. Maybe?

84. http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS

85. What about CSS?

86. Embedded
a {
! text-decoration: none;
}
@media screen and (min-width: 1300px) {
! a {
! ! text-decoration: underline;
! }
}

87. External
<link href=”style.css” media=”only screen and
(min-width: 1300px)” />

88. 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)

89. http://scottjehl.github.com/CSS-Download-Tests/

91. 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!

92. Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
Firefox 20
Opera 12.15
Android 4.2.1 Opera Mobile
Nooooo!

93. Go vanilla

94. https://twitter.com/ppk/status/249100988693241856

95. jQuery = 200-300ms
based on 1.8.0
http://jsperf.com/zepto-jq-eval

96. Up to 8s!

97. Custom jQuery builds

98. Everything has
a trade-off

100. What value does this
provide?

101. Time to move beyond
just visual aesthetics

102. This may not be easy...

103. ...but man is it fun!

104. thank you!
@tkadlec timkadlec.com
TIM KADLEC

105. implementingresponsivedesign.com