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)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (14)

Similar a Progressive downloads and rendering (Stoyan Stefanov)

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

Más de Ontico

Más de Ontico (20)

Último

Último (20)

Progressive downloads and rendering (Stoyan Stefanov)

Notas del editor