Presentation is loading. Please wait.

Presentation is loading. Please wait.

Progressive downloads and rendering Stoyan Stefanov, Yahoo! HighLoad++, Moscow, 2010

Similar presentations


Presentation on theme: "Progressive downloads and rendering Stoyan Stefanov, Yahoo! HighLoad++, Moscow, 2010"— Presentation transcript:

1 Progressive downloads and rendering Stoyan Stefanov, Yahoo! HighLoad++, Moscow, 2010

2 About me YSlow 2.0

3

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

5 Perception

6

7

8

9

10

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

15

16

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

18 The basics Yahoo!’s best practices + YSlow Google’s too + Page Speed

19

20

21

22

23

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

25

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 - - …

34

35 Worst enemy? CSS

36 CSS blocks rendering The worst component type Place way at the print, etc in the same external CSS

37 CSS

38

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

42

43 Normal page

44 With conditionally commented CSS file conditional-comments-block-downloads/

45 What…?! Case #1

46 What…?! Case #2

47 Solution for case #1...

48 Solution for case #2

49

50

51

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

53 flush()

54 Chunked encoding HTTP/ 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

59 HTTP chunking: not only HTML

60 Google Instant /*""*/ - delimited JSON pieces Chunk #1 suggestions Chunk #2 results

61

62 Fewer HTTP requests Inline images: in CSS sprites with data: URI scheme

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

66

67

68 Both flushes data: URIs

69

70

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

74

75

76

77

78

79

80

81 MHTML MIME HTML Works in IE 6,7 Indeed it actually absolutely does work in IE7/Vista too /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 /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:

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 more page...

100 Single stream Hello Kitty more page...

101

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

103

104

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)

106

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); }; /gmail-for-mobile-html5-series-reducing.html

108

109 Lazy HTML... ... window.onload = function () { var el = document.getElementById('lazy'), inner = el.innerHTML, code = inner.substring(4, inner.length - 3); el.innerHTML = code; }; (coming-soon)

110 Lazy HTML test 500K (200K gzipped) HTML doc “Sherlock Holmes” comment out 95% still one whole chapter left

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

113

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

115 Preload sans execute var preload; if { // 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); };

117

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

120 IE8 Visual Search Preload... any search suggestion ...

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

124

125 Distractimations

126

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 Slides:


Download ppt "Progressive downloads and rendering Stoyan Stefanov, Yahoo! HighLoad++, Moscow, 2010"

Similar presentations


Ads by Google