Progressive downloads
and rendering



Stoyan Stefanov, Yahoo!
Fronteers, Amsterdam, 2010
http://slideshare.net/stoyan/
About me
           YSlow 2.0
Why progressive?
Importance of performance
•  Psychology, physiology
•  Effects of waiting
•  “Time is money”
•  Make people happy
Perception
Perception
Perception
Perception
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
So… go progressive!
But before we begin…
The basics
•  Reducing the # HTTP
•  Gzip
•  Minification
•  Image smushing
•  Expires
•  CDN
The basics
•  Yahoo!’s best practices
•  Google’s
•  perfplanet.com
Progressive
Progressive enhancement
Progressive downloads
Progressive rendering
Agenda
•  Blocking JavaScript
•  Flushing
•  CSS and rendering
•  Blocking <!--[if IE 6]>	
•  Preloading, MHTML…
Blocking JavaScript
JavaScript blocks



   html
          js
               png

               png
JavaScript blocks
•  A no-no!

<script src="jquery.js"></script> 
<script src="jquery.twitter.js"></script> 
<script src="...
This waterfall looks ridiculous



html
       js
             js

                  js

                        js

     ...
JavaScript at the bottom



   html
          png

          png

                js
Non-blocking JavaScript
•  defer and async	
•  Defer: IE innovation, ok to
   delay, but keep order
•  Async: HTML5, whate...
defer and async timeline

               async
                   	


     defer
         	



         DOMContentLoaded
 ...
Non-blocking JavaScript
•    Asynchronous loading
     html
                  js

            png

            png


var j...
Flush
flush() early
 html
                         png

                    js               
                               cs...
flush()
<html>	
<head>	
  <script src="my.js" 	
   	type="text/javascript"></script>	
  <link href="my.css" 	
   	type="te...
Chunked encoding
HTTP/1.1 200 OK 
Content‐Type: text/plain 
Transfer‐Encoding: chunked 

25 
This is the data in the first...
Chunked encoding

•  Progressive rendering
   - Semantic app chunks
   vs.
   - Server-level chunks
Progressive rendering
                        Chunk
                        #1




                        Chunk
         ...
<!doctype html>	
<html>	
<head><title>My App</title></head>	
<body>	
  <div id="header">	
     <img src="logo.png" />	
   ...
Progressive + source order
                             1


3
                             2
4
HTTP chunking: not only HTML
HTTP chunking: not only HTML
•  Google Instant
•  /*""*/ - delimited JSON
   pieces
•  Chunk #1 suggestions
•  Chunk #2 re...
CSS and rendering
Worst enemy?



        CSS
CSS blocks rendering
•  The worst component type
•  Place way at the top
•  Inline all @media print, etc



http://www.php...
CSS
CSS
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
CC block
Normal page
With conditionally commented
CSS file
What…?! Case #1
  <link type="text/css" rel="stylesheet" 
        href="1.css"> 
  <!‐‐[if IE 6 ]> 
    <link type="text/c...
What…?! Case #2
<!‐‐[if IE 6]> 
    <body class="ie6">  
<![endif]‐‐> 
<!‐‐[if !IE]><!‐‐> 
    <body> 
<!‐‐<![endif]‐‐> 
Solution for case #1
<!DOCTYPE html> 
<!‐‐[if IE 6]><![endif]‐‐> 

<html> 
    ... 
Solution for case #2
<!‐‐[if IE 6]> 
    <html class="ie6">  
<![endif]‐‐> 
<!‐‐[if !IE]><!‐‐> 
    <html> 
<!‐‐<![endif]‐...
Preloads
Preloads
•  Anticipate next page
•  Problems:
 - does next page anticipate you?
 - parsing and execution time
•  <link pre...
Preload sans execute
var preload; 	
if (/*@cc_on!@*/false) { // IE 	
    preload = function (file) {	
        new Image()....
Blocking favicon
Data URIs
Fewer HTTP requests
•  Inline images:
   in CSS sprites
   with data: URI scheme


                    http://csssprites.c...
Fewer HTTP requests
•  data: URI scheme

$ php ‐r "echo base64_encode(file_get_contents('my.png'));” 
iVBORw0KGgoAAAANSUhE...
Fewer HTTP requests
•  data: URI scheme

background‐image: url("data:image/png;base64,iVBORw0KG..."); 
Fewer HTTP requests
•  data: URI scheme

<img src="data:image/png;base64,iVBOR..." /> 
Both
•  flushes
•  data: URIs
Fewer HTTP requests
•  data: URI scheme
•  works in IE!...
Fewer HTTP requests
•  data: URI scheme
•  works in IE8!
Fewer HTTP requests
•  data: URI scheme
•  MHTML for IE < 8
MHTML
•  MIME HTML
•  Works in IE 6,7
•  Indeed it actually absolutely
does work in IE7/Vista too


                     h...
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]	      ...
MHTML.css – all together
/*	
Content-Type: multipart/related; boundary="MYSEPARATOR"	

--MYSEPARATOR	
Content-Location: my...
MHTML: inline too
<!doctype html>
<html>
 <head>
     <title>Look Ma' No HTTP requests</title>
     <style type="text/css"...
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 = b...
MHTML + data URI
•  image header + css + data
/9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0


Reality:
...
Animations as distractions…
Distractimations
Parting words
What not to say…
•  “Everyone is on high-speed
these days”
•  “It’s all in the cache”
Do care about
•  Progressive,
     non-blocking,
       asynchronous downloads
•  Progressive rendering
Thank you!


Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Upcoming SlideShare
Loading in …5
×

Progressive Downloads and Rendering

10,617 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,617
On SlideShare
0
From Embeds
0
Number of Embeds
493
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

×