HighLoad++ presentation including:
- single stream data URIs and MHTML
- in CSS and <img> tags
- lazy evaluation, lazy JS and lazy HTML experiment
- browser chrome search preload
- Amazon's post-loaded content
- Google instant's chunks
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/
57. <!doctype html>
<html>
<head><title>My App</title></head>
<body>
<div id="header">
<img src="logo.png" />
...
</div> <!-- end of chunk #1 -->
... The full body of the page ...
<!-- end of chunk #2 -->
<script src="all_20100925.js"></script>
</body>
</html> <!-- end of chunk #3 -->
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]
--MYSEPARATOR
[here's part two]
--MYSEPARATOR--
The
double-
dash of
doom
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)
109. Lazy HTML
<!doctype html>
<html><body>
...
<div id="lazy"><!--
<p>lots 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