Progressive downloads and rendering (Stoyan Stefanov)

Progressive downloads
and rendering

Stoyan Stefanov, Yahoo!
HighLoad++, Moscow, 2010
http://slideshare.net/stoyan/

Importance of performance

• Psychology, physiology
• Effects of waiting
• “Time is money”
• Make people happy

Time is relative
• Sometimes crawls
• Sometimes flies
• “it depends”

Durations
actual
expected
perceived
rem’d

time

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

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

The basics

• Reducing the # HTTP
• Gzip
• Minification
• Image smushing
• Expires
• CDN

The basics

• Yahoo!’s best practices +
YSlow
http://developer.yahoo.com/performance/

• Google’s too +
Page Speed
http://code.google.com/speed/

Agenda

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

JavaScript blocks

html
js
png

png

JavaScript blocks

• A no-no!

<script src="jquery.js"></script>
<script src="jquery.twitter.js"></script>
<script src="jquery.cookie.js"></script>
<script src="myapp.js"></script>

This waterfall looks ridiculous

html
js
js

js

js

png

png

JavaScript at the bottom

html
png

png

js

Non-blocking JavaScript
• deferand async
• Defer: IE innovation, ok to
delay, but keep order
• Async: HTML5, whatever
<script asyncsrc="my.js" onload="doIt()"></script>
<script defer src="my.js" onload="doIt()"></script>

defer and async timeline

async

defer

DOMContentLoaded load

• Asynchronous loading
html
js

png

png

varh, js= document.createElement('script');
js.src = 'myscript.js';
h= document.getElementsByTagName('head')[0];
h.appendChild(js);

• Others:
- iframe
- XHR
- <object>
-…

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/

CSS block
downloads?

But they do block:
• When followed
by an inline script
• When in conditional
comments

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

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

With conditionally commented
CSS file

http://www.phpied.com/
conditional-comments-block-downloads/

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

What…?! Case #2


<body>

Solution for case #1
<!DOCTYPE html>


<html>
...

Solution for case #2


<html>

flush() early
html


png

js

css

html

js
png

css

flush()
html
head
script src=my.js
type=text/javascript/script
link href=my.css
type=text/css rel=stylesheet /
/head

?php flush() ?
body
....

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

Chunked encoding

• Progressive rendering
- Semantic app chunks
vs.
- Server-level chunks

Progressive rendering
Chunk
#1

Chunk
#2

Chunk
#3

!doctype html
html
headtitleMy App/title/head
body
div id=header
imgsrc=logo.png /
...
/div!-- end of chunk #1 --

... The full body of the page ...
!-- end of chunk #2 --

script src=all_20100925.js/script
/body

Progressive + source order
1

3
2
4

HTTP chunking: not only HTML

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

http://tinyurl.com/chunkview

Fewer HTTP requests

• Inline images:
in CSS sprites
with data: URI scheme

http://csssprites.com
http://spriteme.org

Fewer HTTP requests

• data: URI scheme

$ php -r echo base64_encode(file_get_contents('my.png'));”
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4
DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC

Fewer HTTP requests


background-image: url(data:image/png;base64,iVBORw0KG...);

Fewer HTTP requests


imgsrc=data:image/png;base64,iVBOR... /

Both

• flushes
• data: URIs

Fewer HTTP requests

• works in IE!...

Fewer HTTP requests

• works in IE8!

Fewer HTTP requests

• MHTML for IE 8

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/

MHTML - one part
Content-Location: myimage
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSU....U5ErkJggg==

MHTML - multi parts
Content-Type: multipart/related; boundary=MYSEPARATOR

--MYSEPARATOR

[here comes part one] The
double-
--MYSEPARATOR dash of
doom
[here's part two]

--MYSEPARATOR--

MHTML.css – all together
/*
Content-Type: multipart/related; boundary=MYSEPARATOR

--MYSEPARATOR

iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg==
--MYSEPARATOR
Content-Location: another

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);
}

MHTML: inline too
!doctype html
html
head
titleLook Ma' No HTTP requests/title
style type=text/css
/*
Content-Type: multipart/related; boundary=_

--_
Content-Location:locoloco
Content-Transfer-Encoding:base64

iVBOR...CC
--_
Content-Location:polloloco

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;
}
/style
/head
body
h1MHTML + Data:URIs inline in codestyle/code/h1
p class=image1hellobrhello/p http://phpied.com
p class=image2bonjourbrbonjour/p
/body
/html
/inline-mhtml-data-uris/

!doctype html
html
head
titleLook Ma' No HTTP requests/title

style type=text/css
...

/*
Content-Type: multipart/related; boundary=_

--_
Content-Location:locoloco

iVBOR...CC
--_
Content-Location:polloloco

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;
}

...
/style

/head
body
h1MHTML + Data:URIs inline in codestyle/code/h1
p class=image1hellobrhello/p
p class=image2bonjourbrbonjour/p
/body
/html

MHTML + data URI
• X-browser
single request
web apps

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

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

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/

/*
Content-Type: multipart/related; boundary=granitza

--granitza
Content-Type: text/css;

*/
#myid {
/*
--granitza
Content-Type: image/jpeg;*/

/9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AAQSkZJRgA...);
/*
--granitza

*/
background-image: url(mhtml:http://localhost/my.css!myimage) !ie;
}
/*
--granitza--
*/

/*

--granitza

*/
???
#myid {
/*
--granitza

/*
--granitza

*/
}
/*
--granitza--
*/

/*

--granitza

*/ 1 ???
#myid {
/*
--granitza

2

/*
--granitza

*/
3
}
/*
--granitza--
*/

Single stream MHTML/data URI

• And for img too!

Single stream img
h2Hello Kitty/h2
!
--granitza
Content-Type: image/gif
2 invalid MHTML headers lines followed by data--![if gt IE 7]
img width=16 height=16 src=data:image/gif;base64,

R0lGODl ... FxMKVvDijNQaodOl+N5Pk+pmIX7brGweCg4SCEhEAOw==![endif]

!--[if lt IE 8]
imgsrc=mhtml:http://.../bolknote.html!myimage width=16 height=16
![endif]--

p more page... /p

Lazy loading aka post-loading

• After-onload
• Some images
• Below the fold (on scroll)
• Hidden content e.g. tabs

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)

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

Lazy HTML
!doctype html
htmlbody
...
divid=lazy!--
plots of html goes here.../p
--/div
...
script
window.onload= function () {
var el = document.getElementById('lazy'),
inner = el.innerHTML,
code = inner.substring(4, inner.length- 3);
el.innerHTML = code;
};
/script
/body/html
http://phpied.com... (coming-soon)

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

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

Preloads

• Anticipate next page
• Problems:
- does next page anticipate you?
- parsing and execution time
•link prefetch=http://..

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

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

Chrome search

• In-browser search box
• Gives suggestions as you type
• Visual suggestions in IE8+

IE8 Visual
Search Suggestions

...
Item
TextCurrently: Partly Cloudy, 67F/Text
DescriptionHigh: 71F Low: 63F/Description
Urlhttp://weather.yahoo.com/forecast/USCA1024_f.html/Url
Image source=http://l.yimg.com/a/i/us/we/31/30.gif alt=Partly
Cloudy width=31 height=31/
/Item
...

IE8 Visual Search Preload

...
Item
Textany search suggestion/Text
Image
source=http://path/to/sprite.png
width=0
height=0/
/Item
...

IE8 Visual Search Preload

• didn’t work for CSS and JS

IE8 Visual Search

• preload images, e.g. sprite
• DNS lookups via beacons

Do care about

• Progressive,
non-blocking,
asynchronous downloads
• Progressive rendering

Thank you!

Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com
Slides: http://slideshare.net/stoyan/

Progressive downloads and rendering (Stoyan Stefanov)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Progressive downloads and rendering (Stoyan Stefanov)

Similar to Progressive downloads and rendering (Stoyan Stefanov) (20)

More from Ontico

More from Ontico (20)

Recently uploaded

Recently uploaded (20)

Progressive downloads and rendering (Stoyan Stefanov)

Editor's Notes