This document discusses techniques for progressively downloading and rendering web pages to improve performance and user experience. It covers topics like preventing blocking JavaScript and CSS downloads, using techniques like deferred and async scripts, inline CSS, and flushing to start rendering sooner. It also discusses using data URIs to reduce HTTP requests by inlining images and other assets. Formats like MHTML and chunked encoding are presented as ways to progressively deliver content across browsers. The goal is to start outputting content as fast as possible while downloading remaining assets in the background.
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/
53. flush()
html
head
script src=my.js
type=text/javascript/script
link href=my.css
type=text/css rel=stylesheet /
/head
?php flush() ?
body
....
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
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] The
double-
--MYSEPARATOR dash of
doom
[here's part two]
--MYSEPARATOR--
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)
107. 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
108.
109. 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)
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
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