“Don’t make me wait”
or
Building High-Performance
Web Apps
Stoyan Stefanov, Yahoo!
Brownbag at eBay
August 11, 2009
About me
•  Yahoo! Search
•  Yahoo! Exceptional
   Performance
•  YSlow 2.0 architect
•  http://smush.it
•  Books, article...
Importance of performance
•  Is it dev? QA? Afterthought?
•  Developers love it
•  But is it good for business?
Importance of performance
•  Self-regulating system
•  Slow down = lose users
•  We all hate slow pages
Importance of performance
                     1sec =
                     -2.8%
                     revenue
Importance of performance
                  Gets worse
                  with time

                  After-effect
Importance of performance
•  Yahoo!: 400 ms slower = 5-9%
drop in full-page traffic
Importance of performance
                  Slower
                  pages get
                  less traffic
Importance of performance
                  From 4-6
                  seconds to
                  1.5 seconds
“The premature optimization…
•  … is the root of all evil”
Knuth
•  “Make it right before you
make it fast”
Crockford
Measure, measure, measure
•  measure
•  profile
•  monitor
On trade-offs
“…everything has its drawbacks,
as the man said when his
mother-in-law died, and they
came upon him for the ...
The Life of Page 2.0
             HTML                page
   request             onload    settles     request
          ...
The waterfall
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Less HTTP requests
•  Combine components
Less HTTP requests
•  Before:

<script src="jquery.js"></script> 
<script src="jquery.twitter.js"></script> 
<script src="...
Less HTTP requests
•  After:

<script  
    src="all.js"  
     type="text/javascript"> 
</script> 
Less HTTP requests
•  Saved 3 HTTP requests 
Less HTTP requests
•  repeat for CSS:

<link  
      href="all.css"  
      rel="stylesheet"  
      type="text/css” 

/>
Less HTTP requests
•  CSS sprites for background
images



background‐position: ‐22px ‐0px; 
width: 12px; 
height: 10px; 
Less HTTP requests
 CSS sprites
•  Before: 15 requests, 6.8 K
•  After: 1 request, 1.4 K 
Less HTTP requests
•  CSS sprites – a pain,
 but there are tools



http://csssprites.com 
http://spritegen.website‐perfor...
Less HTTP requests
•  Inline images with data:
scheme
Less HTTP requests
•  data: URI scheme

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

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

<img src="data:image/png;base64,iVBOR..." /> 
Less HTTP requests
•  data: URI scheme
•  works in IE!...
Less HTTP requests
•  data: URI scheme
•  works in IE8!
Less HTTP requests
•  data: URI scheme
•  MHTML for IE < 8


http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-an...
Less HTTP requests - drawback
•  atomic components
•  invalidated by small changes


•  need to schedule changes
Less stuff? Cache
•  Cache is less universal than
we think
•  You can help


http://yuiblog.com/blog/2007/01/04/performanc...
“never expire” policy
•  Static components with far-
future Expires header
•  JS, CSS, img

ExpiresActive On 
ExpiresByTyp...
Inline vs. external
•  a.k.a. less http vs. more
cache
•  how about both?
Inline vs. external
•  First visit:


1. Inline
2. Lazy-load the external file
3. Write a cookie
Inline vs. external
•  Later visits:


1. Read cookie
2. Refer to the external file
Less stuff – duh!
•  No 404s
•  No duplicates
•  No near-duplicates
Duplicates
•  2903384828078080_1.jpg
•  2204648665418080_1.jpg
•  3801476378448080_1.jpg
•  3801476377438080_1.jpg
Near duplicates
•  30x30 vs. 49x49



•  Rounded corners, shadows
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff
3.  Out of the way
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Gzip
Gzip
•  What to gzip?

            HTML, XHTML, XML,
           W00TChaMaCallitML,
            CSS, JS, JSON, HTC,
       ...
Gzip
•  How to gzip?

AddOutputFilterByType DEFLATE text/html text/… 
Header append Vary Accept‐Encoding 




http://www.s...
Minify
•  Before
/** 
 * The dom module provides helper methods for  
 *    manipulating Dom elements. 
 * @module dom 
 *...
Minify
•  After
(function(){var 
B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en
v._id_counter...
Minify
•  YUI Compressor
•  Minifies JS and CSS
•  Tolerates * and _ hacks
•  More than minification
Minify
•  Minify inline code too
Gzip or minification?
•  62,885 bytes - original jQuery (back in
Aug 2007)
•  31,822 - minified with the YUI
Compressor
• ...
Minify
•  minify HTML?
•  dangerous
•  write minified HTML

echo '<div class="my">', 
       '<p>', 
          $db‐>get('n...
Minify
•  Strip quotes? No closing tags?
•  Some sites do



    <body bgcolor=#ffffff text=#000000 link=#0000cc 
 vlink=#...
Minify
•  Relative URLs
Relative URLs on my blog
>>> document.links.length
204
>>> … loop …
    indexOf(‘http://www.phpied.com’)
130
>>> ‘http://w...
Relative URLs on my blog
•  Compare:
•  2.66K - absolute links
•  1.4K - sprite of 15 elements
Images
•  http://smush.it
Images                                     Loss-
1.    No GIFs, PNG8                         less
2.    Crush PNGs
3.    r...
Images – progressive JPEG
•  for images ~10K+
Images
•  eBay homepage could save
   20% image sizes
•  Search –> 10%+
•  Item -> 30% (50K+)
Images – duh!
1.  Don’t scale in HTML
2.  Generated images should
  be crushed PNGs too
Images
•  It’s only human to forget
•  All you need is a process so
  you don’t have to
  remember
204
•    The world’s smallest component?
•    204 No Content

<?php 
header("HTTP/1.0 204 No Content"); 
// .... do your j...
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff ✔
3.  Out of the way
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Free-falling waterfalls
•  Less DNS lookups – fetch
   components from not more
   than 2-4 domains
•  Less redirects
•  B...
Not free-falling
JavaScript rocks!
•  But also blocks

   html
          js
               png

               png
Non-blocking JavaScript
•    Include via DOM
     html
                  js

            png

            png


var js = d...
Non-blocking JavaScript
•  And what about my inline
   scripts?
•  Setup a collection (registry)
   of inline scripts
Step 1
•  Inline in the <head>:

var myapp = { 
  stuff: [], 
}; 
Step 2
•    Add to the registry

Instead of:
  <script>alert('boo!');</script> 
Do:
  <script> 
    myapp.stuff.push(funct...
Step 3
•  Execute all

var l = myapp.stuff.length;  
for(var i = 0, i < l; i++) { 
  myapp.stuff[i](); 
} 
Blocking CSS?



But they do block:
•  In FF2
•  When followed by
   an inline script
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff ✔
3.  Out of the way ✔
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Cookies

•  less cookies
•  no cookies
•  www vs. non-www


3000 bytes of cookies cost 78ms
flush() early
 html
                         png

                    js               
                               cs...
flush()
<html> 
<head> 
  <script src="my.js"  
   type="text/javascript"></script> 
  <link href="my.css"  
   type="text...
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
         ...
Progressive rendering

•  Server-level flush:
   bing.com – every 1 or 2K
   google (ungzip) – every 4K
Progressive + source order
                             1


3
                             2
4
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff ✔
3.  Out of the way ✔
4.  Start early ✔
✓
Waterfall
Life after onload
Life after onload
1.  Lazy-load
2.  Pre-load
3.  XHR
4.  JavaScript optimizations
5.  Rendering
Lazy-load

•  bells & whistles
•  badges & widgets
Preload

•  to help next page’s
waterfall
•  img, CSS, JS, DNS lookups
XHR (Ajax)

•  small – gzip, JSON
•  less – Expires 
•  GET over POST
GET vs. POST for XHR
var url = 'test.php'; 
var request =  new XMLHttpRequest(); 
request.open("POST", url, false); 
// … ...
GET vs. POST for XHR
JavaScript optimizations
•  Number of DOM elements
•  DOM access
•  Event delegation
Touching the DOM
function foo() { 
  for (var count = 0; count < 1000; count++) { 
    document.body.innerHTML += 1; 
  } ...
Touching the DOM
function foo() { 
  var inner = ''; 
  for (var count = 0; count < 1000; count++) { 
    inner += 1; 
  }...
Rendering
•    CSS on top
•    No separate print CSS
•    CSS refactoring
•    No AlphaImageLoader
•    Expensive elements...
CSS early on
•    No separate print CSS file

/* screen styles */ 
#nav {...} 
.banner {...} 
/* print styles */ 
@media p...
CSS refactoring
•  CSS tends to grow
•  Find unused selectors –
   DustMeSelectors extension
•  Cleanup things like:
   #h...
No AlphaImageLoader
#some‐element { 
      background: url(image.png); 
      _background: none; 
      _filter:progid:DXI...
Expensive elements
•  Avoid or limit
<applet> 
<object> (IE)
<iframe> 
Life after onload
1.  Lazy-load ✔
2.  Pre-load ✔
3.  XHR ✔
4.  JavaScript optimizations ✔
5.  Rendering ✔
✓
Life after onload
YSlow 2.0
YSlow




•  Firebug extension
•  Why (is my page) slow?
http://developer.yahoo.com/yslow/
Yahoo! performance rules
1.  Make Fewer HTTP Requests              19.  Reduce the Number of DOM Elements
2.  Use a Conten...
YSlow 1.0. rules
1.  Make Fewer HTTP Requests              19.  Reduce the Number of DOM Elements
2.  Use a Content Delive...
YSlow 2.0. rules
1.  Make Fewer HTTP Requests              19.  Reduce the Number of DOM Elements
2.  Use a Content Delive...
YSlow 1.0. rule weights
1.  Make Fewer HTTP Requests                   8
2.  Use a Content Delivery Network             6
...
YSlow 2.0. rule weights
1.     Make Fewer HTTP Requests                   8
2.     Use a Content Delivery Network         ...
YSlow score
foreach rule
  total += rule score * rule weight
end foreach
score = total / sum of rule weights
YSlow letter score
•  (A)   90 – 100
•  (B)   80 – 89
•  (C)   70 – 79
•  (D)   60 – 69
•  (E)   50 – 59
•  (F)   under 50
Custom rule
1.  Add an Expires Header
2.  Configure Etags
   Rule             Weight        Rule score   *
   Expires head...
Rule scores
•  Start from 100
•  Penalty for every offence
Rule penalties
1.  Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Control...
Rule penalties
1.     Make Fewer HTTP Requests


2.  Use a Content Delivery Network
3.     Add an Expires or a Cache-Contr...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network


3.  Add Expires Headers
4.     Gzip...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
Rule penalties
1.     Make Fewer HTTP Requests
2.     Use a Content Delivery Network
3.     Add an Expires or a Cache-Cont...
✓
YSlow 2.0
Words of Wisdom
Performance matters
•  It affects the user happiness
•  It affects the bottom line
Front-end
•  That’s where most of the time
is spent
It’s a marathon
•  Not a sprint
•  Measure, monitor, link to
business metrics
•  Bugs are expensive as the
time passes, pe...
What’s a low-hanging fruit?
•  Takes one engineer
•  Takes 15 minutes


Steve Krug
For non-low-hanging fruits?
1.  Pick 2 or 3
2.  Fix, measure one by one
3.  Come back and iterate
Thank you!


Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com
Upcoming SlideShare
Loading in...5
×

Don't make me wait! or Building High-Performance Web Applications

20,575

Published on

Slides from a brownbag tech talk at eBay. A holistic approach to web performance and intimate details on YSlow's points and grading algorithm.

Published in: Technology, Business

Don't make me wait! or Building High-Performance Web Applications

  1. 1. “Don’t make me wait” or Building High-Performance Web Apps Stoyan Stefanov, Yahoo! Brownbag at eBay August 11, 2009
  2. 2. About me •  Yahoo! Search •  Yahoo! Exceptional Performance •  YSlow 2.0 architect •  http://smush.it •  Books, articles •  http://phpied.com
  3. 3. Importance of performance •  Is it dev? QA? Afterthought? •  Developers love it •  But is it good for business?
  4. 4. Importance of performance •  Self-regulating system •  Slow down = lose users •  We all hate slow pages
  5. 5. Importance of performance 1sec = -2.8% revenue
  6. 6. Importance of performance Gets worse with time After-effect
  7. 7. Importance of performance •  Yahoo!: 400 ms slower = 5-9% drop in full-page traffic
  8. 8. Importance of performance Slower pages get less traffic
  9. 9. Importance of performance From 4-6 seconds to 1.5 seconds
  10. 10. “The premature optimization… •  … is the root of all evil” Knuth •  “Make it right before you make it fast” Crockford
  11. 11. Measure, measure, measure •  measure •  profile •  monitor
  12. 12. On trade-offs “…everything has its drawbacks, as the man said when his mother-in-law died, and they came upon him for the funeral expenses” Jerome K. Jerome Three man in a boat
  13. 13. The Life of Page 2.0 HTML page request onload settles request sent marriage? R.I.P. conception birth graduation User perceived “onload” happens somewhere here
  14. 14. The waterfall
  15. 15. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  16. 16. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  17. 17. Less HTTP requests •  Combine components
  18. 18. Less HTTP requests •  Before: <script src="jquery.js"></script>  <script src="jquery.twitter.js"></script>  <script src="jquery.cookie.js"></script>  <script src="myapp.js"></script> 
  19. 19. Less HTTP requests •  After: <script    src="all.js"    type="text/javascript">  </script> 
  20. 20. Less HTTP requests •  Saved 3 HTTP requests 
  21. 21. Less HTTP requests •  repeat for CSS: <link    href="all.css"    rel="stylesheet"    type="text/css”  />
  22. 22. Less HTTP requests •  CSS sprites for background images background‐position: ‐22px ‐0px;  width: 12px;  height: 10px; 
  23. 23. Less HTTP requests CSS sprites •  Before: 15 requests, 6.8 K •  After: 1 request, 1.4 K 
  24. 24. Less HTTP requests •  CSS sprites – a pain, but there are tools http://csssprites.com  http://spritegen.website‐performance.org/  
  25. 25. Less HTTP requests •  Inline images with data: scheme
  26. 26. Less HTTP requests •  data: URI scheme $ php ‐r "echo base64_encode(file_get_contents('my.png'));”  iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4 DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
  27. 27. Less HTTP requests •  data: URI scheme background‐image: url("data:image/png;base64,iVBORw0KG..."); 
  28. 28. Less HTTP requests •  data: URI scheme <img src="data:image/png;base64,iVBOR..." /> 
  29. 29. Less HTTP requests •  data: URI scheme •  works in IE!...
  30. 30. Less HTTP requests •  data: URI scheme •  works in IE8!
  31. 31. Less HTTP requests •  data: URI scheme •  MHTML for IE < 8 http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ http://www.hedgerwow.com/360/dhtml/base64-image/demo.php
  32. 32. Less HTTP requests - drawback •  atomic components •  invalidated by small changes •  need to schedule changes
  33. 33. Less stuff? Cache •  Cache is less universal than we think •  You can help http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  34. 34. “never expire” policy •  Static components with far- future Expires header •  JS, CSS, img ExpiresActive On  ExpiresByType image/png "access plus 10 years" 
  35. 35. Inline vs. external •  a.k.a. less http vs. more cache •  how about both?
  36. 36. Inline vs. external •  First visit: 1. Inline 2. Lazy-load the external file 3. Write a cookie
  37. 37. Inline vs. external •  Later visits: 1. Read cookie 2. Refer to the external file
  38. 38. Less stuff – duh! •  No 404s •  No duplicates •  No near-duplicates
  39. 39. Duplicates •  2903384828078080_1.jpg •  2204648665418080_1.jpg •  3801476378448080_1.jpg •  3801476377438080_1.jpg
  40. 40. Near duplicates •  30x30 vs. 49x49 •  Rounded corners, shadows
  41. 41. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff 3.  Out of the way 4.  Start early
  42. 42. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  43. 43. Gzip
  44. 44. Gzip •  What to gzip? HTML, XHTML, XML, W00TChaMaCallitML, CSS, JS, JSON, HTC, plain text… all but binary • (btw, check those older SWFs too)
  45. 45. Gzip •  How to gzip? AddOutputFilterByType DEFLATE text/html text/…  Header append Vary Accept‐Encoding  http://www.sitepoint.com/article/web‐site‐optimization‐steps  
  46. 46. Minify •  Before /**   * The dom module provides helper methods for    *    manipulating Dom elements.   * @module dom   *   */  (function() {      var Y = YAHOO.util,     // internal shorthand          getStyle,           // for load time browser branching          setStyle,           // ditto          propertyCache = {}, // for faster hyphen converts          reClassNameCache = {},          // cache regexes for className          document = window.document;     // cache for faster lookups      YAHOO.env._id_counter = YAHOO.env._id_counter || 0; 
  47. 47. Minify •  After (function(){var  B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en v._id_counter||0; 
  48. 48. Minify •  YUI Compressor •  Minifies JS and CSS •  Tolerates * and _ hacks •  More than minification
  49. 49. Minify •  Minify inline code too
  50. 50. Gzip or minification? •  62,885 bytes - original jQuery (back in Aug 2007) •  31,822 - minified with the YUI Compressor •  19,758 - original gzipped •  10,818 - minified and gzipped FTW http://www.julienlecomte.net/blog/2007/08/13/
  51. 51. Minify •  minify HTML? •  dangerous •  write minified HTML echo '<div class="my">',         '<p>',            $db‐>get('name'),         '</p>',       '<div>'; 
  52. 52. Minify •  Strip quotes? No closing tags? •  Some sites do <body bgcolor=#ffffff text=#000000 link=#0000cc  vlink=#551a8b alink=#ff0000 onload="...." topmargin=3  marginheight=3><textarea id=csi style=display:none> 
  53. 53. Minify •  Relative URLs
  54. 54. Relative URLs on my blog >>> document.links.length 204 >>> … loop … indexOf(‘http://www.phpied.com’) 130 >>> ‘http://www.phpied.com’.length 21 >>> 21*130/1024 2.666015625
  55. 55. Relative URLs on my blog •  Compare: •  2.66K - absolute links •  1.4K - sprite of 15 elements
  56. 56. Images •  http://smush.it
  57. 57. Images Loss- 1.  No GIFs, PNG8 less 2.  Crush PNGs 3.  run JPEGs through jpegtran 4.  Gifsicle for animations http://yuiblog.com/blog/2008/11/14/imageopt-3/
  58. 58. Images – progressive JPEG •  for images ~10K+
  59. 59. Images •  eBay homepage could save 20% image sizes •  Search –> 10%+ •  Item -> 30% (50K+)
  60. 60. Images – duh! 1.  Don’t scale in HTML 2.  Generated images should be crushed PNGs too
  61. 61. Images •  It’s only human to forget •  All you need is a process so you don’t have to remember
  62. 62. 204 •  The world’s smallest component? •  204 No Content <?php  header("HTTP/1.0 204 No Content");  // .... do your job, e.g. logging  ?>  http://www.phpied.com/204-no-content/
  63. 63. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way 4.  Start early
  64. 64. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  65. 65. Free-falling waterfalls •  Less DNS lookups – fetch components from not more than 2-4 domains •  Less redirects •  Blocking JavaScript/CSS
  66. 66. Not free-falling
  67. 67. JavaScript rocks! •  But also blocks html js png png
  68. 68. Non-blocking JavaScript •  Include via DOM html js png png var js = document.createElement('script');  js.src = 'myscript.js';  var h = document.getElementsByTagName('head')[0];  h.appendChild(js); 
  69. 69. Non-blocking JavaScript •  And what about my inline scripts? •  Setup a collection (registry) of inline scripts
  70. 70. Step 1 •  Inline in the <head>: var myapp = {    stuff: [],  }; 
  71. 71. Step 2 •  Add to the registry Instead of:   <script>alert('boo!');</script>  Do:   <script>      myapp.stuff.push(function(){     alert('boo!');      });    </script> 
  72. 72. Step 3 •  Execute all var l = myapp.stuff.length;   for(var i = 0, i < l; i++) {    myapp.stuff[i]();  } 
  73. 73. Blocking CSS? But they do block: •  In FF2 •  When followed by an inline script
  74. 74. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early
  75. 75. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  76. 76. Cookies •  less cookies •  no cookies •  www vs. non-www 3000 bytes of cookies cost 78ms
  77. 77. flush() early html png js  css html js png ✔ css
  78. 78. flush() <html>  <head>    <script src="my.js"    type="text/javascript"></script>    <link href="my.css"    type="text/css" rel="stylesheet" />  </head>  <?php flush() ?>  <body>    .... 
  79. 79. 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 
  80. 80. Chunked encoding •  Progressive rendering - Semantic app chunks vs. - Server-level chunks
  81. 81. Progressive rendering Chunk #1 Chunk #2 Chunk #3
  82. 82. Progressive rendering •  Server-level flush: bing.com – every 1 or 2K google (ungzip) – every 4K
  83. 83. Progressive + source order 1 3 2 4
  84. 84. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early ✔
  85. 85. ✓ Waterfall
  86. 86. Life after onload
  87. 87. Life after onload 1.  Lazy-load 2.  Pre-load 3.  XHR 4.  JavaScript optimizations 5.  Rendering
  88. 88. Lazy-load •  bells & whistles •  badges & widgets
  89. 89. Preload •  to help next page’s waterfall •  img, CSS, JS, DNS lookups
  90. 90. XHR (Ajax) •  small – gzip, JSON •  less – Expires  •  GET over POST
  91. 91. GET vs. POST for XHR var url = 'test.php';  var request =  new XMLHttpRequest();  request.open("POST", url, false);  // …  request.send('test=1'); 
  92. 92. GET vs. POST for XHR
  93. 93. JavaScript optimizations •  Number of DOM elements •  DOM access •  Event delegation
  94. 94. Touching the DOM function foo() {    for (var count = 0; count < 1000; count++) {      document.body.innerHTML += 1;    }  } 
  95. 95. Touching the DOM function foo() {    var inner = '';    for (var count = 0; count < 1000; count++) {      inner += 1;    }    document.body.innerHTML += inner;  1000 }  times faster
  96. 96. Rendering •  CSS on top •  No separate print CSS •  CSS refactoring •  No AlphaImageLoader •  Expensive elements •  No CSS expressions •  Image dimensions
  97. 97. CSS early on •  No separate print CSS file /* screen styles */  #nav {...}  .banner {...}  /* print styles */  @media print {      #nav {display: none}      .banner {display: none;}  } 
  98. 98. CSS refactoring •  CSS tends to grow •  Find unused selectors – DustMeSelectors extension •  Cleanup things like:   #header #menu {...}    div#menu {...}    ul li {...} 
  99. 99. No AlphaImageLoader #some‐element {   background: url(image.png);   _background: none;   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader      (src='image.png', sizingMethod='crop');  }  http://yuiblog.com/blog/2008/12/08/imageopt-5/
  100. 100. Expensive elements •  Avoid or limit <applet>  <object> (IE) <iframe> 
  101. 101. Life after onload 1.  Lazy-load ✔ 2.  Pre-load ✔ 3.  XHR ✔ 4.  JavaScript optimizations ✔ 5.  Rendering ✔
  102. 102. ✓ Life after onload
  103. 103. YSlow 2.0
  104. 104. YSlow •  Firebug extension •  Why (is my page) slow? http://developer.yahoo.com/yslow/
  105. 105. Yahoo! performance rules 1.  Make Fewer HTTP Requests 19.  Reduce the Number of DOM Elements 2.  Use a Content Delivery Network 20.  Split Components Across Domains 3.  Add an Expires or a Cache-Control 21.  Minimize the Number of iframes Header 22.  No 404s 4.  Gzip Components 23.  Reduce Cookie Size 5.  Put Stylesheets at the Top 24.  Use Cookie-free Domains for 6.  Put Scripts at the Bottom Components 7.  Avoid CSS Expressions 25.  Minimize DOM Access 8.  Make JavaScript and CSS External 26.  Develop Smart Event Handlers 9.  Reduce DNS Lookups 27.  Choose <link> over @import 10.  Minify JavaScript and CSS 28.  Avoid Filters 11.  Avoid Redirects 29.  Optimize Images 12.  Remove Duplicate JS and CSS 30.  Optimize CSS Sprites 13.  Configure ETags 31.  Don't Scale Images in HTML 14.  Make Ajax Cacheable 32.  Make favicon.ico Small and 15.  Flush the Buffer Early Cacheable 16.  Use GET for AJAX Requests 33.  Keep Components under 25K 17.  Post-load Components 34.  Pack Components into a Multipart Document 18.  Preload Components
  106. 106. YSlow 1.0. rules 1.  Make Fewer HTTP Requests 19.  Reduce the Number of DOM Elements 2.  Use a Content Delivery Network 20.  Split Components Across Domains 3.  Add an Expires or a Cache-Control 21.  Minimize the Number of iframes Header 22.  No 404s 4.  Gzip Components 23.  Reduce Cookie Size 5.  Put Stylesheets at the Top 24.  Use Cookie-free Domains for 6.  Put Scripts at the Bottom Components 7.  Avoid CSS Expressions 25.  Minimize DOM Access 8.  Make JavaScript and CSS External 26.  Develop Smart Event Handlers 9.  Reduce DNS Lookups 27.  Choose <link> over @import 10.  Minify JavaScript and CSS 28.  Avoid Filters 11.  Avoid Redirects 29.  Optimize Images 12.  Remove Duplicate JS and CSS 30.  Optimize CSS Sprites 13.  Configure ETags 31.  Don't Scale Images in HTML 14.  Make Ajax Cacheable 32.  Make favicon.ico Small and 15.  Flush the Buffer Early Cacheable 16.  Use GET for AJAX Requests 33.  Keep Components under 25K 17.  Post-load Components 34.  Pack Components into a Multipart Document 18.  Preload Components
  107. 107. YSlow 2.0. rules 1.  Make Fewer HTTP Requests 19.  Reduce the Number of DOM Elements 2.  Use a Content Delivery Network 20.  Split Components Across Domains 3.  Add an Expires or a Cache-Control 21.  Minimize the Number of iframes Header 22.  No 404s 4.  Gzip Components 23.  Reduce Cookie Size 5.  Put Stylesheets at the Top 24.  Use Cookie-free Domains for 6.  Put Scripts at the Bottom Components 7.  Avoid CSS Expressions 25.  Minimize DOM Access 8.  Make JavaScript and CSS External 26.  Develop Smart Event Handlers 9.  Reduce DNS Lookups 27.  Choose <link> over @import 10.  Minify JavaScript and CSS 28.  Avoid Filters 11.  Avoid Redirects 29.  Optimize Images 12.  Remove Duplicate JS and CSS 30.  Optimize CSS Sprites 13.  Configure ETags 31.  Don't Scale Images in HTML 14.  Make Ajax Cacheable 32.  Make favicon.ico Small and 15.  Flush the Buffer Early Cacheable 16.  Use GET for AJAX Requests 33.  Keep Components under 25K 17.  Post-load Components 34.  Pack Components into a Multipart Document 18.  Preload Components
  108. 108. YSlow 1.0. rule weights 1.  Make Fewer HTTP Requests 8 2.  Use a Content Delivery Network 6 3.  Add an Expires or a Cache-Control Header 10 4.  Gzip Components 8 5.  Put Stylesheets at the Top 4 6.  Put Scripts at the Bottom 4 7.  Avoid CSS Expressions 3 8.  Make JavaScript and CSS External 4 9.  Reduce DNS Lookups 3 10.  Minify JavaScript 4 11.  Avoid Redirects 4 12.  Remove Duplicate JS 4 13.  Configure Etags 2
  109. 109. YSlow 2.0. rule weights 1.  Make Fewer HTTP Requests 8 2.  Use a Content Delivery Network 6 3.  Add an Expires or a Cache-Control Header 10 4.  Gzip Components 8 5.  Put Stylesheets at the Top 4 6.  Put Scripts at the Bottom 4 7.  Avoid CSS Expressions 3 8.  Make JavaScript and CSS External 4 9.  Reduce DNS Lookups 3 10.  Minify JavaScript and CSS 4 11.  Avoid Redirects 4 12.  Remove Duplicate JS and CSS 4 13.  Configure Etags 2 14.  Make Ajax Cacheable 4 16.  Use GET for AJAX Requests 3 19.  Reduce the Number of DOM Elements 3 22.  No 404s 4 23.  Reduce Cookie Size 3 24.  Use Cookie-free Domains for Components 3 28.  Avoid Filters 4 31.  Don't Scale Images in HTML 3 32.  Make favicon.ico Small and Cacheable 2
  110. 110. YSlow score foreach rule total += rule score * rule weight end foreach score = total / sum of rule weights
  111. 111. YSlow letter score •  (A) 90 – 100 •  (B) 80 – 89 •  (C) 70 – 79 •  (D) 60 – 69 •  (E) 50 – 59 •  (F) under 50
  112. 112. Custom rule 1.  Add an Expires Header 2.  Configure Etags Rule Weight Rule score * Expires header 10 100 (A) 1000 ETags 2 50 (E) 100 Total 12 1100 Score = 1100 / 12 = 91.66 (A) Note: max weight is 10, min rule score is 0
  113. 113. Rule scores •  Start from 100 •  Penalty for every offence
  114. 114. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External # ok -points 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS JS 3 -4/off 11.  Avoid Redirects CSS 2 -4/off 12.  Remove Duplicate JS and CSS 13.  Configure Etags img 6 -3/off 14.  Make Ajax Cacheable 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  115. 115. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects -10 points 12.  Remove Duplicate JS and CSS 13.  Configure Etags per 14.  Make Ajax Cacheable offending 16.  Use GET for AJAX Requests component 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  116. 116. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add Expires Headers 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS If expiration 11.  Avoid Redirects is less than 12.  Remove Duplicate JS and CSS 13.  Configure Etags 2 days 14.  Make Ajax Cacheable subtract -11 16.  Use GET for AJAX Requests points per 19.  Reduce the Number of DOM Elements component 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  117. 117. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS -11 points 11.  Avoid Redirects per 12.  Remove Duplicate JS and CSS 13.  Configure Etags offending 14.  Make Ajax Cacheable component 16.  Use GET for AJAX Requests bigger than 19.  Reduce the Number of DOM Elements 500 bytes 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  118. 118. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects -10 points 12.  Remove Duplicate JS and CSS 13.  Configure Etags per 14.  Make Ajax Cacheable offending 16.  Use GET for AJAX Requests component 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  119. 119. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects -5 points 12.  Remove Duplicate JS and CSS 13.  Configure Etags per 14.  Make Ajax Cacheable offending 16.  Use GET for AJAX Requests component 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  120. 120. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS -2 points 13.  Configure Etags per Make Ajax Cacheable 14.  16.  Use GET for AJAX Requests expression 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  121. 121. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JS and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure Etags 14.  Make Ajax Cacheable Score is 16.  Use GET for AJAX Requests always n/a 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  122. 122. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 4 domains 12.  Remove Duplicate JS and CSS ok 13.  Configure Etags -5 points Make Ajax Cacheable 14.  16.  Use GET for AJAX Requests per domain 19.  Reduce the Number of DOM Elements otherwise 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  123. 123. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify -10 points 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS per 13.  Configure Etags offender, Make Ajax Cacheable 14.  16.  Use GET for AJAX Requests including 19.  Reduce the Number of DOM Elements inline 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  124. 124. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure Etags -10 points 14.  Make Ajax Cacheable per redirect 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  125. 125. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  No Duplicates -5 points per 13.  Configure Etags 14.  Make Ajax Cacheable duplicate 16.  Use GET for AJAX Requests JS or CSS 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  126. 126. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS -11 points 13.  Configure ETags per 14.  Make Ajax Cacheable offending 16.  Use GET for AJAX Requests component 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  127. 127. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom -5 points 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External per XHR 9.  Reduce DNS Lookups without at 10.  Minify JavaScript and CSS least 1 hour 11.  Avoid Redirects expiration 12.  Remove Duplicate JS and CSS 13.  Configure Etags 14.  Make Ajax Cacheable 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  128. 128. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top -5 points 6.  Put Scripts at the Bottom per 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External non-GET 9.  Reduce DNS Lookups XHR 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure Etags 14.  Make Ajax Cacheable 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  129. 129. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top -10 points 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions for every 8.  Make JavaScript and CSS External 250 9.  Reduce DNS Lookups elements 10.  Minify JavaScript and CSS over 900 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure Etags 14.  Make Ajax Cacheable 16.  Use GET for AJAX Requests 19.  Reduce # of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  130. 130. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure Etags -5 points 14.  Make Ajax Cacheable per 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements offending component 22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  131. 131. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects -10 points 12.  Remove Duplicate JS and CSS per 13.  Configure Etags 14.  Make Ajax Cacheable component 16.  Use GET for AJAX Requests requested 19.  Reduce the Number of DOM Elements with over No 404s 22.  1000 bytes 23.  Reduce Cookie Size of cookies 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  132. 132. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions -5 points 8.  Make JavaScript and CSS External per Reduce DNS Lookups 9.  10.  Minify JavaScript and CSS component 11.  Avoid Redirects requested 12.  Remove Duplicate JS and CSS with a 13.  Configure Etags cookie 14.  Make Ajax Cacheable 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements 22.  No 404s 23.  Reduce Cookie Size 24.  Cookie-free Domains 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  133. 133. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS -5 points 13.  Configure Etags 14.  Make Ajax Cacheable per offense 16.  Use GET for AJAX Requests or 19.  Reduce the Number of DOM Elements -2 if using No 404s 22.  23.  Reduce Cookie Size _filter hack 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  134. 134. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure Etags -5 points 14.  Make Ajax Cacheable per scaled 16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements down 22.  No 404s image 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable
  135. 135. Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS 11.  Avoid Redirects 12.  Remove Duplicate JS and CSS -5 points if 13.  Configure Etags 14.  Make Ajax Cacheable size is over 16.  Use GET for AJAX Requests 2000 bytes 19.  Reduce the Number of DOM Elements and -5 if no No 404s 22.  23.  Reduce Cookie Size expiration 24.  Use Cookie-free Domains for Components 28.  Avoid Filters 31.  Don't Scale Images in HTML 32.  Small cacheable favicon
  136. 136. ✓ YSlow 2.0
  137. 137. Words of Wisdom
  138. 138. Performance matters •  It affects the user happiness •  It affects the bottom line
  139. 139. Front-end •  That’s where most of the time is spent
  140. 140. It’s a marathon •  Not a sprint •  Measure, monitor, link to business metrics •  Bugs are expensive as the time passes, performance bugs even more so
  141. 141. What’s a low-hanging fruit? •  Takes one engineer •  Takes 15 minutes Steve Krug
  142. 142. For non-low-hanging fruits? 1.  Pick 2 or 3 2.  Fix, measure one by one 3.  Come back and iterate
  143. 143. Thank you! Stoyan Stefanov @stoyanstefanov http://www.phpied.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×