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