Progressive Downloads and Rendering

10,873 views

Published on

Fronteers 2010 conference in Amsterdam

Published in: Technology
0 Comments
29 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,873
On SlideShare
0
From Embeds
0
Number of Embeds
510
Actions
Shares
0
Downloads
132
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

Progressive Downloads and Rendering

  1. 1. Progressive downloads and rendering Stoyan Stefanov, Yahoo! Fronteers, Amsterdam, 2010 http://slideshare.net/stoyan/
  2. 2. About me YSlow 2.0
  3. 3. Why progressive?
  4. 4. Importance of performance •  Psychology, physiology •  Effects of waiting •  “Time is money” •  Make people happy
  5. 5. Perception
  6. 6. Perception
  7. 7. Perception
  8. 8. Perception
  9. 9. Durations actual expected perceived rem’d time
  10. 10. It feels slower when… •  Unpleasant •  Unknown •  Boring •  Too much to keep track
  11. 11. First time experience •  Unfamiliar = slow •  Optimize empty cache or there will be no full cache
  12. 12. So… go progressive!
  13. 13. But before we begin…
  14. 14. The basics •  Reducing the # HTTP •  Gzip •  Minification •  Image smushing •  Expires •  CDN
  15. 15. The basics •  Yahoo!’s best practices •  Google’s •  perfplanet.com
  16. 16. Progressive
  17. 17. Progressive enhancement
  18. 18. Progressive downloads
  19. 19. Progressive rendering
  20. 20. Agenda •  Blocking JavaScript •  Flushing •  CSS and rendering •  Blocking <!--[if IE 6]> •  Preloading, MHTML…
  21. 21. Blocking JavaScript
  22. 22. JavaScript blocks html js png png
  23. 23. 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> 
  24. 24. This waterfall looks ridiculous html js js js js png png
  25. 25. JavaScript at the bottom html png png js
  26. 26. Non-blocking JavaScript •  defer and async •  Defer: IE innovation, ok to delay, but keep order •  Async: HTML5, whatever <script async src="my.js" onload="doIt()"></script>  <script defer src="my.js" onload="doIt()"></script> 
  27. 27. defer and async timeline async defer DOMContentLoaded load
  28. 28. Non-blocking JavaScript •  Asynchronous loading html js png png var js = document.createElement('script');  js.src = 'myscript.js';  var h = document.getElementsByTagName('head')[0];  h.appendChild(js); 
  29. 29. Flush
  30. 30. flush() early html png js  css html js png ✔ css
  31. 31. flush() <html> <head> <script src="my.js" type="text/javascript"></script> <link href="my.css" type="text/css" rel="stylesheet" /> </head> <?php flush() ?> <body> ....
  32. 32. 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 
  33. 33. Chunked encoding •  Progressive rendering - Semantic app chunks vs. - Server-level chunks
  34. 34. Progressive rendering Chunk #1 Chunk #2 Chunk #3
  35. 35. <!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 -->
  36. 36. Progressive + source order 1 3 2 4
  37. 37. HTTP chunking: not only HTML
  38. 38. HTTP chunking: not only HTML •  Google Instant •  /*""*/ - delimited JSON pieces •  Chunk #1 suggestions •  Chunk #2 results http://tinyurl.com/chunkview
  39. 39. CSS and rendering
  40. 40. Worst enemy? CSS
  41. 41. CSS blocks rendering •  The worst component type •  Place way at the top •  Inline all @media print, etc http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/
  42. 42. CSS
  43. 43. CSS
  44. 44. CSS block downloads? But they do block: •  When followed by an inline script •  When in conditional comments
  45. 45. Inline CSS •  Google search •  Bing.com: inline + postload
  46. 46. Same domain •  If you split across domains •  and if you don’t use CDN •  Saves a DNS lookup
  47. 47. CC block
  48. 48. Normal page
  49. 49. With conditionally commented CSS file
  50. 50. What…?! Case #1   <link type="text/css" rel="stylesheet"          href="1.css">    <!‐‐[if IE 6 ]>      <link type="text/css" rel="stylesheet"            href="ie.css">    <![endif]‐‐> 
  51. 51. What…?! Case #2 <!‐‐[if IE 6]>      <body class="ie6">   <![endif]‐‐>  <!‐‐[if !IE]><!‐‐>      <body>  <!‐‐<![endif]‐‐> 
  52. 52. Solution for case #1 <!DOCTYPE html>  <!‐‐[if IE 6]><![endif]‐‐>  <html>      ... 
  53. 53. Solution for case #2 <!‐‐[if IE 6]>      <html class="ie6">   <![endif]‐‐>  <!‐‐[if !IE]><!‐‐>      <html>  <!‐‐<![endif]‐‐> 
  54. 54. Preloads
  55. 55. Preloads •  Anticipate next page •  Problems: - does next page anticipate you? - parsing and execution time •  <link prefetch="http://..">
  56. 56. Preload sans execute var preload; if (/*@cc_on!@*/false) { // IE preload = function (file) { new Image().src = file; }; } else { preload = function (file) { var obj = document.createElement('object'), body = document.body; obj.width = 0; obj.height = 0; obj.data = file; body.appendChild(obj); }; }
  57. 57. Blocking favicon
  58. 58. Data URIs
  59. 59. Fewer HTTP requests •  Inline images: in CSS sprites with data: URI scheme http://csssprites.com http://spriteme.org
  60. 60. Fewer HTTP requests •  data: URI scheme $ php ‐r "echo base64_encode(file_get_contents('my.png'));”  iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4 DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
  61. 61. Fewer HTTP requests •  data: URI scheme background‐image: url("data:image/png;base64,iVBORw0KG..."); 
  62. 62. Fewer HTTP requests •  data: URI scheme <img src="data:image/png;base64,iVBOR..." /> 
  63. 63. Both •  flushes •  data: URIs
  64. 64. Fewer HTTP requests •  data: URI scheme •  works in IE!...
  65. 65. Fewer HTTP requests •  data: URI scheme •  works in IE8!
  66. 66. Fewer HTTP requests •  data: URI scheme •  MHTML for IE < 8
  67. 67. 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/
  68. 68. MHTML - one part Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSU....U5ErkJggg==
  69. 69. 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--
  70. 70. MHTML.css – all together /* Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg== --MYSEPARATOR Content-Location: another Content-Transfer-Encoding: base64 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); }
  71. 71. MHTML: inline too <!doctype html> <html> <head> <title>Look 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 Content-Transfer-Encoding:base64 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> http://phpied.com
 <h1>MHTML + Data:URIs inline in <code>style</code></h1> <p class="image1">hello<br>hello</p> <p class="image2">bonjour<br>bonjour</p> </body> </html> /inline-mhtml-data-uris/
  72. 72. MHTML + data URI •  X-browser single request web apps
  73. 73. Single request •  WT☠? •  Separation of concerns •  Content-presentation- behavior •  yes, it’s a tradeoff
  74. 74. MHTML + data URI •  drawback: repeats the same encoded image •  solutions: - browser-specific CSS - keep close = better gzip - or… an ingenious hack
  75. 75. 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/
  76. 76. Animations as distractions…
  77. 77. Distractimations
  78. 78. Parting words
  79. 79. What not to say… •  “Everyone is on high-speed these days” •  “It’s all in the cache”
  80. 80. Do care about •  Progressive, non-blocking, asynchronous downloads •  Progressive rendering
  81. 81. Thank you! Stoyan Stefanov @stoyanstefanov http://www.phpied.com

×