1. Progressive downloads and rendering Stoyan Stefanov, Yahoo! HighLoad++, Moscow, 2010 http://slideshare.net/stoyan/

2. About me YSlow 2.0

4. Importance of performance Psychology, physiology Effects of waiting “Time is money” Make people happy

5. Perception

11. Time is relative Sometimes crawls Sometimes flies “it depends”

12. Durations actual expected perceived rem’d time

13. It feels slower when… Unpleasant Unknown Boring Too much to keep track

14. First time experience Unfamiliar = slow Optimize empty cache or there will be no full cache

17. The basics Reducing the # HTTP Gzip Minification Image smushing Expires CDN

18. The basics Yahoo!’s best practices + YSlow http://developer.yahoo.com/performance/ Google’s too + Page Speed http://code.google.com/speed/

24. Agenda 1. Prevent download blocks: scripts, styles, CC, favicon 2. Ways to render sooner: flush, data URIs, lazy loading, lazy evaluation, preloading, animations

26. JavaScript blocks html js png

27. JavaScript blocks A no-no!

28. This waterfall looks ridiculous html js png js

29. JavaScript at the bottom html js png

30. Non-blocking JavaScript defer and async Defer: IE innovation, ok to delay, but keep order Async: HTML5, whatever

31. defer and async timeline DOMContentLoaded load async defer

32. Non-blocking JavaScript Asynchronous loading var h, js = document.createElement('script'); js.src = 'myscript.js'; h = document.getElementsByTagName('head')[0]; h.appendChild(js); html js png

33. Non-blocking JavaScript Others: - iframe - XHR - - …

35. Worst enemy? CSS

36. CSS blocks rendering The worst component type Place way at the top @media print, etc in the same external CSS http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/

37. CSS

39. CSS block downloads? But they do block: When followed by an inline script When in conditional comments

40. Inline CSS Google search Bing.com: inline + postload

41. Same domain If you split across domains and if you don’t use CDN Saves a DNS lookup e.g. Google and Bing’s CDN

43. Normal page

44. With conditionally commented CSS file http://www.phpied.com/ conditional-comments-block-downloads/

45. What…?! Case #1 <link type="text/css" rel="stylesheet" href="1.css"> <link type="text/css" rel="stylesheet" href="ie.css">

46. What…?! Case #2

47. Solution for case #1...

48. Solution for case #2

52. flush() early html png js css html png js css ✔ 

53. flush() <script src="my.js" type="text/javascript"> <link href="my.css" type="text/css" rel="stylesheet" />....

54. Chunked encoding HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked 25 This is the data in the first chunk 1C and this is the second one 0

55. Chunked encoding Progressive rendering - Semantic app chunks vs. - Server-level chunks

56. Progressive rendering Chunk #1 Chunk #2 Chunk #3

57. My App...... The full body of the page...

58. Progressive + source order 1 2 3 4

59. HTTP chunking: not only HTML

60. Google Instant /*""*/ - delimited JSON pieces Chunk #1 suggestions Chunk #2 results http://tinyurl.com/chunkview

62. Fewer HTTP requests Inline images: in CSS sprites with data: URI scheme http://csssprites.com http://spriteme.org

63. Fewer HTTP requests data: URI scheme $ php -r "echo base64_encode(file_get_contents('my.png'));” iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4 DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC

64. Fewer HTTP requests data: URI scheme background-image: url("data:image/png;base64,iVBORw0KG...");

65. Fewer HTTP requests data: URI scheme

68. Both flushes data: URIs

71. Fewer HTTP requests data: URI scheme works in IE!...

72. Fewer HTTP requests data: URI scheme works in IE8!

73. Fewer HTTP requests data: URI scheme MHTML for IE < 8

81. MHTML MIME HTML Works in IE 6,7 Indeed it actually absolutely does work in IE7/Vista too http://phpied.com /the-proper-mhtml-syntax/

82. MHTML - one part Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSU....U5ErkJggg==

83. MHTML - multi parts Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR [here comes part one] --MYSEPARATOR [here's part two] --MYSEPARATOR-- The double- dash of doom

84. MHTML.css – all together /* Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg== --MYSEPARATOR Content-Location: another Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg== --MYSEPARATOR-- */.myclass { background-image:url(mhtml:http://example.org/styles.css!myimage); }.myotherclass { background-image:url(mhtml:http://example.org/styles.css!another); }

85. MHTML: inline too Look Ma' No HTTP requests /* Content-Type: multipart/related; boundary="_" --_ Content-Location:locoloco Content-Transfer-Encoding:base64 iVBOR...CC --_ Content-Location:polloloco Content-Transfer-Encoding:base64 iVBOR....gg== --_-- */.image1 { background-image: url("data:image/png;base64,iVBOR...CC"); /* normal */ *background-image: url(mhtml:http://...html!locoloco); /* IE < 8 */ }.image2 { background-image: url("data:image/png;base64,iVBOR...gg=="); /* normal */ *background-image: url(mhtml:http://...html!polloloco); /* IE < 8 */ } body { font: bold 24px Arial; } MHTML + Data:URIs inline in style hello hello bonjour bonjour http://phpied.com /inline-mhtml-data-uris/

86. Look Ma' No HTTP requests...

87. /* Content-Type: multipart/related; boundary="_" --_ Content-Location:locoloco Content-Transfer-Encoding:base64 iVBOR...CC --_ Content-Location:polloloco Content-Transfer-Encoding:base64 iVBOR....gg== --_-- */

88. .image1 { background-image: url("data:image/png;base64,iVBOR...CC"); /* normal */ *background-image: url(mhtml:http://...html!locoloco); /* IE < 8 */ }.image2 { background-image: url("data:image/png;base64,iVBOR...gg=="); /* normal */ *background-image: url(mhtml:http://...html!polloloco); /* IE < 8 */ } body { font: bold 24px Arial; }

89. ... MHTML + Data:URIs inline in style hello hello bonjour bonjour

90. MHTML + data URI X-browser single request web apps

91. Single request WT ☠ ? Separation of concerns Content-presentation- behavior yes, it’s a tradeoff

92. MHTML + data URI drawback: repeats the same encoded image solutions: - browser-specific CSS - keep close = better gzip - or… an ingenious hack

93. Single stream MHTML/data URI image header + css + data /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0 Reality: IE: Others: http://habrahabr.ru/blogs/webdev/90761/

94. /* Content-Type: multipart/related; boundary="granitza" --granitza Content-Type: text/css; */ #myid { /* --granitza Content-Location: myimage Content-Transfer-Encoding: base64 Content-Type: image/jpeg;*/ /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AAQSkZJRgA...); /* --granitza Content-Type: text/css; */ background-image: url(mhtml:http://localhost/my.css!myimage) !ie; } /* --granitza-- */

95. /* Content-Type: multipart/related; boundary="granitza" --granitza Content-Type: text/css; */ #myid { /* --granitza Content-Location: myimage Content-Transfer-Encoding: base64 Content-Type: image/jpeg;*/ /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AAQSkZJRgA...); /* --granitza Content-Type: text/css; */ background-image: url(mhtml:http://localhost/my.css!myimage) !ie; } /* --granitza-- */ ???

96. /* Content-Type: multipart/related; boundary="granitza" --granitza Content-Type: text/css; */ #myid { /* --granitza Content-Location: myimage Content-Transfer-Encoding: base64 Content-Type: image/jpeg;*/ /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AAQSkZJRgA...); /* --granitza Content-Type: text/css; */ background-image: url(mhtml:http://localhost/my.css!myimage) !ie; } /* --granitza-- */

97. /* Content-Type: multipart/related; boundary="granitza" --granitza Content-Type: text/css; */ #myid { /* --granitza Content-Location: myimage Content-Transfer-Encoding: base64 Content-Type: image/jpeg;*/ /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AAQSkZJRgA...); /* --granitza Content-Type: text/css; */ background-image: url(mhtml:http://localhost/my.css!myimage) !ie; } /* --granitza-- */ ??? 1 2 3

98. Single stream MHTML/data URI And for too!

99. Single stream Hello Kitty <! --granitza Content-Location: myimage Content-Transfer-Encoding: base64 Content-Type: image/gif 2 invalid MHTML headers lines followed by data--> <img width="16" height="16" src="data:image/gif;base64, R0lGODl... FxMKVvDijNQaodOl+N5Pk+pmIX7brGweCg4SCEhEAOw=="> more page...

100. Single stream Hello Kitty <! --granitza Content-Location: myimage Content-Transfer-Encoding: base64 Content-Type: image/gif 2 invalid MHTML headers lines followed by data--> <img width="16" height="16" src="data:image/gif;base64, R0lGODl... FxMKVvDijNQaodOl+N5Pk+pmIX7brGweCg4SCEhEAOw=="> more page...

102. Lazy loading aka post-loading After-onload Some images Below the fold (on scroll) Hidden content e.g. tabs

105. Amazon’s lazy bestsellers Page’s purpose is ranking Details can come later via onload XHR JS off = no details but that’s fine (see bullet #1)

107. GMail mobile’s lazy JS... /* console.log("I can wait"); */... console.log("I'm needed"); window.onload = function () { var comment = document.getElementById('lazy').innerHTML, code = comment.substring(3, comment.length - 3); eval(code); }; http://googlecode.blogspot.com/2009/09 /gmail-for-mobile-html5-series-reducing.html

109. Lazy HTML... <!-- lots of html goes here... -->... window.onload = function () { var el = document.getElementById('lazy'), inner = el.innerHTML, code = inner.substring(4, inner.length - 3); el.innerHTML = code; }; http://phpied.comhttp://phpied.com... (coming-soon)

110. Lazy HTML test 500K (200K gzipped) HTML doc “Sherlock Holmes” comment out 95% still one whole chapter left http://www.phpied.com/files/lazyhtml/start.html

111. Lazy HTML test results

112. Lazy HTML - misc Who loads a book? Use case: blog comments SEO? Content is hidden What about display: none? The test page was simple-to- render, no complex layout

114. Preloads Anticipate next page Problems: - does next page anticipate you? - parsing and execution time

115. Preload sans execute var preload; if (/*@cc_on!@*/false) { // IE preload = function (file) { new Image().src = file; }; } else { preload = function (file) { var obj = document.createElement('object'), body = document.body; obj.width = 0; obj.height = 0; obj.data = file; body.appendChild(obj); }; }

116. Preload, then execute var loader = function (file, callback) { var obj = document.createElement('object'), body = document.body; obj.width = 0; obj.height = 0; obj.data = file; obj.onload = function () { var h, js = document.createElement('script'); js.src = file; js.onload = callback; h = document.getElementsByTagName('head')[0]; h.appendChild(js); }; body.appendChild(obj); };

118. Chrome search In-browser search box Gives suggestions as you type Visual suggestions in IE8+

119. IE8 Visual Search Suggestions... Currently: Partly Cloudy, 67F High: 71F Low: 63F http://weather.yahoo.com/forecast/USCA1024_f.html...

120. IE8 Visual Search Preload... any search suggestion <Image source="http://path/to/sprite.png" width="0" height="0"/>...

121. IE8 Visual Search Preload

122. didn’t work for CSS and JS

123. IE8 Visual Search preload images, e.g. sprite DNS lookups via beacons

125. Distractimations

127. What not to say… “Everyone is on high-speed these days” “It’s all in the cache”

128. Do care about Progressive, non-blocking, asynchronous downloads Progressive rendering

129. Thank you! Stoyan Stefanov @stoyanstefanov http://www.phpied.com Slides: http://slideshare.net/stoyan/http://slideshare.net/stoyan/