SlideShare a Scribd company logo
“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, articles
•  http://phpied.com
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 funeral
expenses”

Jerome K. Jerome
Three man in a boat
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
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="jquery.cookie.js"></script> 
<script src="myapp.js"></script> 
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‐performance.org/  
Less HTTP requests
•  Inline images with data:
scheme
Less HTTP requests
•  data: URI scheme

$ php ‐r "echo base64_encode(file_get_contents('my.png'));” 
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4
DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
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-and-under/
http://www.hedgerwow.com/360/dhtml/base64-image/demo.php
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/performance-research-part-2/
“never expire” policy
•  Static components with far-
future Expires header
•  JS, CSS, img

ExpiresActive On 
ExpiresByType image/png "access plus 10 years" 
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,
         plain text… all but binary


• (btw, check those older SWFs too)
Gzip
•  How to gzip?

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




http://www.sitepoint.com/article/web‐site‐optimization‐steps  
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; 
Minify
•  After
(function(){var 
B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en
v._id_counter||0; 
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
•  19,758 - original gzipped
•  10,818 - minified and gzipped                FTW


http://www.julienlecomte.net/blog/2007/08/13/
Minify
•  minify HTML?
•  dangerous
•  write minified HTML

echo '<div class="my">', 
       '<p>', 
          $db‐>get('name'), 
       '</p>', 
     '<div>'; 
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> 
Minify
•  Relative URLs
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
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.    run JPEGs through jpegtran
4.    Gifsicle for animations

http://yuiblog.com/blog/2008/11/14/imageopt-3/
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 job, e.g. logging 
?> 

http://www.phpied.com/204-no-content/
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
•  Blocking JavaScript/CSS
Not free-falling
JavaScript rocks!
•  But also blocks

   html
          js
               png

               png
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); 
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(function(){ 
      alert('boo!'); 
    }); 
  </script> 
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               
                               css



 html



   js
        png
                                     ✔
              css
flush()
<html> 
<head> 
  <script src="my.js"  
   type="text/javascript"></script> 
  <link href="my.css"  
   type="text/css" rel="stylesheet" /> 
</head> 
<?php flush() ?> 
<body> 
  .... 
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 
Chunked encoding

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




                        Chunk
                        #2




                        Chunk
                        #3
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); 
// … 
request.send('test=1'); 
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; 
  } 
  document.body.innerHTML += inner; 
                                        1000
} 
                                        times
                                        faster
Rendering
•    CSS on top
•    No separate print CSS
•    CSS refactoring
•    No AlphaImageLoader
•    Expensive elements
•    No CSS expressions
•    Image dimensions
CSS early on
•    No separate print CSS file

/* screen styles */ 
#nav {...} 
.banner {...} 
/* print styles */ 
@media print { 
    #nav {display: none} 
    .banner {display: none;} 
} 
CSS refactoring
•  CSS tends to grow
•  Find unused selectors –
   DustMeSelectors extension
•  Cleanup things like:
   #header #menu {...} 
   div#menu {...} 
   ul li {...} 
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/
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 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
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
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
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
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
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 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
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 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
✓
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, performance
bugs even more so
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

More Related Content

What's hot

Linux Internals - Kernel/Core
Linux Internals - Kernel/CoreLinux Internals - Kernel/Core
Linux Internals - Kernel/Core
Shay Cohen
 
Linux Performance Analysis: New Tools and Old Secrets
Linux Performance Analysis: New Tools and Old SecretsLinux Performance Analysis: New Tools and Old Secrets
Linux Performance Analysis: New Tools and Old Secrets
Brendan Gregg
 
Velocity 2015 linux perf tools
Velocity 2015 linux perf toolsVelocity 2015 linux perf tools
Velocity 2015 linux perf tools
Brendan Gregg
 
Improving Apache Spark's Reliability with DataSourceV2
Improving Apache Spark's Reliability with DataSourceV2Improving Apache Spark's Reliability with DataSourceV2
Improving Apache Spark's Reliability with DataSourceV2
Databricks
 
Meet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike Steenbergen
Meet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike SteenbergenMeet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike Steenbergen
Meet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike Steenbergen
distributed matters
 
A 30-minute Introduction to NETCONF and YANG
A 30-minute Introduction to NETCONF and YANGA 30-minute Introduction to NETCONF and YANG
A 30-minute Introduction to NETCONF and YANG
Tail-f Systems
 
Presto @ Uber Hadoop summit2017
Presto @ Uber Hadoop summit2017Presto @ Uber Hadoop summit2017
Presto @ Uber Hadoop summit2017
Zhenxiao Luo
 
OVS Hardware Offload with TC Flower
OVS Hardware Offload with TC FlowerOVS Hardware Offload with TC Flower
OVS Hardware Offload with TC Flower
Netronome
 
NGINX High-performance Caching
NGINX High-performance CachingNGINX High-performance Caching
NGINX High-performance Caching
NGINX, Inc.
 
MySQL Performance for DevOps
MySQL Performance for DevOpsMySQL Performance for DevOps
MySQL Performance for DevOps
Sveta Smirnova
 
Reliable Performance at Scale with Apache Spark on Kubernetes
Reliable Performance at Scale with Apache Spark on KubernetesReliable Performance at Scale with Apache Spark on Kubernetes
Reliable Performance at Scale with Apache Spark on Kubernetes
Databricks
 
Kernel load-balancing for Docker containers using IPVS
Kernel load-balancing for Docker containers using IPVSKernel load-balancing for Docker containers using IPVS
Kernel load-balancing for Docker containers using IPVS
Docker, Inc.
 
Linux Networking Explained
Linux Networking ExplainedLinux Networking Explained
Linux Networking Explained
Thomas Graf
 
OpenvSwitch Deep Dive
OpenvSwitch Deep DiveOpenvSwitch Deep Dive
OpenvSwitch Deep Dive
rajdeep
 
Linux kernel debugging
Linux kernel debuggingLinux kernel debugging
Linux kernel debugging
libfetion
 
A Percona Support Engineer Walkthrough on pt-stalk
A Percona Support Engineer Walkthrough on pt-stalkA Percona Support Engineer Walkthrough on pt-stalk
A Percona Support Engineer Walkthrough on pt-stalk
Marcelo Altmann
 
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
NTT DATA Technology & Innovation
 
How deep is your buffer – Demystifying buffers and application performance
How deep is your buffer – Demystifying buffers and application performanceHow deep is your buffer – Demystifying buffers and application performance
How deep is your buffer – Demystifying buffers and application performance
Cumulus Networks
 
Linux Profiling at Netflix
Linux Profiling at NetflixLinux Profiling at Netflix
Linux Profiling at Netflix
Brendan Gregg
 

What's hot (20)

Linux Internals - Kernel/Core
Linux Internals - Kernel/CoreLinux Internals - Kernel/Core
Linux Internals - Kernel/Core
 
Linux Performance Analysis: New Tools and Old Secrets
Linux Performance Analysis: New Tools and Old SecretsLinux Performance Analysis: New Tools and Old Secrets
Linux Performance Analysis: New Tools and Old Secrets
 
Velocity 2015 linux perf tools
Velocity 2015 linux perf toolsVelocity 2015 linux perf tools
Velocity 2015 linux perf tools
 
Improving Apache Spark's Reliability with DataSourceV2
Improving Apache Spark's Reliability with DataSourceV2Improving Apache Spark's Reliability with DataSourceV2
Improving Apache Spark's Reliability with DataSourceV2
 
Meet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike Steenbergen
Meet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike SteenbergenMeet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike Steenbergen
Meet Spilo, Zalando’s HIGH-AVAILABLE POSTGRESQL CLUSTER - Feike Steenbergen
 
A 30-minute Introduction to NETCONF and YANG
A 30-minute Introduction to NETCONF and YANGA 30-minute Introduction to NETCONF and YANG
A 30-minute Introduction to NETCONF and YANG
 
Presto @ Uber Hadoop summit2017
Presto @ Uber Hadoop summit2017Presto @ Uber Hadoop summit2017
Presto @ Uber Hadoop summit2017
 
OVS Hardware Offload with TC Flower
OVS Hardware Offload with TC FlowerOVS Hardware Offload with TC Flower
OVS Hardware Offload with TC Flower
 
NGINX High-performance Caching
NGINX High-performance CachingNGINX High-performance Caching
NGINX High-performance Caching
 
MySQL Performance for DevOps
MySQL Performance for DevOpsMySQL Performance for DevOps
MySQL Performance for DevOps
 
Reliable Performance at Scale with Apache Spark on Kubernetes
Reliable Performance at Scale with Apache Spark on KubernetesReliable Performance at Scale with Apache Spark on Kubernetes
Reliable Performance at Scale with Apache Spark on Kubernetes
 
Kernel load-balancing for Docker containers using IPVS
Kernel load-balancing for Docker containers using IPVSKernel load-balancing for Docker containers using IPVS
Kernel load-balancing for Docker containers using IPVS
 
Linux Networking Explained
Linux Networking ExplainedLinux Networking Explained
Linux Networking Explained
 
OpenvSwitch Deep Dive
OpenvSwitch Deep DiveOpenvSwitch Deep Dive
OpenvSwitch Deep Dive
 
Linux kernel debugging
Linux kernel debuggingLinux kernel debugging
Linux kernel debugging
 
A Percona Support Engineer Walkthrough on pt-stalk
A Percona Support Engineer Walkthrough on pt-stalkA Percona Support Engineer Walkthrough on pt-stalk
A Percona Support Engineer Walkthrough on pt-stalk
 
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
Apache Bigtopによるオープンなビッグデータ処理基盤の構築(オープンデベロッパーズカンファレンス 2021 Online 発表資料)
 
HDFS vs. MapR Filesystem
HDFS vs. MapR FilesystemHDFS vs. MapR Filesystem
HDFS vs. MapR Filesystem
 
How deep is your buffer – Demystifying buffers and application performance
How deep is your buffer – Demystifying buffers and application performanceHow deep is your buffer – Demystifying buffers and application performance
How deep is your buffer – Demystifying buffers and application performance
 
Linux Profiling at Netflix
Linux Profiling at NetflixLinux Profiling at Netflix
Linux Profiling at Netflix
 

Viewers also liked

Data Encoding
Data EncodingData Encoding
Data Encoding
Luka M G
 
All about INCOTERMS latest revision
All about INCOTERMS latest revision All about INCOTERMS latest revision
All about INCOTERMS latest revision
Mihai Guta
 
Physical assessment
Physical assessmentPhysical assessment
Physical assessment
Nelson Munthali
 
Big Hairy Audacious Goals
Big Hairy Audacious GoalsBig Hairy Audacious Goals
Big Hairy Audacious Goals
removed_4d1206b5c6020534b4513b7e279cfccf
 
Pccn Review Part 1
Pccn Review Part 1Pccn Review Part 1
Pccn Review Part 1
Sherry Knowles
 
New product marketing (perfume)
New product marketing (perfume)New product marketing (perfume)
New product marketing (perfume)
Shajar Ali
 
Organisational Sustainability
Organisational SustainabilityOrganisational Sustainability
Organisational Sustainability
David Alman
 
Cell block and liquid based cytology
Cell block and liquid based cytologyCell block and liquid based cytology
Cell block and liquid based cytology
Dr Neha Mahajan
 
The Literature Review Process
The Literature Review ProcessThe Literature Review Process
The Literature Review Process
annielibrarian
 
GMAT Math Flashcards
GMAT Math FlashcardsGMAT Math Flashcards
GMAT Math Flashcards
GMAT Prep Now
 
Basics of c++ Programming Language
Basics of c++ Programming LanguageBasics of c++ Programming Language
Basics of c++ Programming Language
Ahmad Idrees
 
Product Marketing Framework for Product or Service Launch
Product Marketing Framework for Product or Service LaunchProduct Marketing Framework for Product or Service Launch
Product Marketing Framework for Product or Service Launch
Janet Jaiswal
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
congenital anomalies of renal system
congenital anomalies of renal systemcongenital anomalies of renal system
congenital anomalies of renal system
Ria Saira
 
State of Drupal keynote, DrupalCon Austin
State of Drupal keynote, DrupalCon AustinState of Drupal keynote, DrupalCon Austin
State of Drupal keynote, DrupalCon Austin
Dries Buytaert
 
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
K.Mohamed Faizal
 
Personal SWOT for Teachers
Personal SWOT for TeachersPersonal SWOT for Teachers
Personal SWOT for Teachers
m nagaRAJU
 
Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017
Techsauce Media
 
Mri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin ZulfiqarMri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin Zulfiqar
Dr. Muhammad Bin Zulfiqar
 
BUSINESS QUIZ -Round 1
 BUSINESS QUIZ -Round 1 BUSINESS QUIZ -Round 1
BUSINESS QUIZ -Round 1
pradeep acharya
 

Viewers also liked (20)

Data Encoding
Data EncodingData Encoding
Data Encoding
 
All about INCOTERMS latest revision
All about INCOTERMS latest revision All about INCOTERMS latest revision
All about INCOTERMS latest revision
 
Physical assessment
Physical assessmentPhysical assessment
Physical assessment
 
Big Hairy Audacious Goals
Big Hairy Audacious GoalsBig Hairy Audacious Goals
Big Hairy Audacious Goals
 
Pccn Review Part 1
Pccn Review Part 1Pccn Review Part 1
Pccn Review Part 1
 
New product marketing (perfume)
New product marketing (perfume)New product marketing (perfume)
New product marketing (perfume)
 
Organisational Sustainability
Organisational SustainabilityOrganisational Sustainability
Organisational Sustainability
 
Cell block and liquid based cytology
Cell block and liquid based cytologyCell block and liquid based cytology
Cell block and liquid based cytology
 
The Literature Review Process
The Literature Review ProcessThe Literature Review Process
The Literature Review Process
 
GMAT Math Flashcards
GMAT Math FlashcardsGMAT Math Flashcards
GMAT Math Flashcards
 
Basics of c++ Programming Language
Basics of c++ Programming LanguageBasics of c++ Programming Language
Basics of c++ Programming Language
 
Product Marketing Framework for Product or Service Launch
Product Marketing Framework for Product or Service LaunchProduct Marketing Framework for Product or Service Launch
Product Marketing Framework for Product or Service Launch
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
congenital anomalies of renal system
congenital anomalies of renal systemcongenital anomalies of renal system
congenital anomalies of renal system
 
State of Drupal keynote, DrupalCon Austin
State of Drupal keynote, DrupalCon AustinState of Drupal keynote, DrupalCon Austin
State of Drupal keynote, DrupalCon Austin
 
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
 
Personal SWOT for Teachers
Personal SWOT for TeachersPersonal SWOT for Teachers
Personal SWOT for Teachers
 
Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017
 
Mri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin ZulfiqarMri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin Zulfiqar
 
BUSINESS QUIZ -Round 1
 BUSINESS QUIZ -Round 1 BUSINESS QUIZ -Round 1
BUSINESS QUIZ -Round 1
 

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

Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
Stoyan Stefanov
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
Ontico
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
John McCaffrey
 
Rails Performance Tricks and Treats
Rails Performance Tricks and TreatsRails Performance Tricks and Treats
Rails Performance Tricks and Treats
Marshall Yount
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
strommen
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
Stoyan Stefanov
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
Avenga Germany GmbH
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013
hernanibf
 
Speed Matters
Speed MattersSpeed Matters
Speed Matters
Mark Stanton
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
Maximiliano Firtman
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
Stoyan Stefanov
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
fakeaccount225095
 
My site is slow
My site is slowMy site is slow
My site is slow
hernanibf
 
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend OptimizationEscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend Optimization
Jonathan Klein
 
Windycityrails page performance
Windycityrails page performanceWindycityrails page performance
Windycityrails page performance
John McCaffrey
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
Chris Love
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
Stoyan Stefanov
 
Page Performance
Page PerformancePage Performance
Page Performance
atorreno
 

Similar to Don't make me wait! or Building High-Performance Web Applications (20)

Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Rails Performance Tricks and Treats
Rails Performance Tricks and TreatsRails Performance Tricks and Treats
Rails Performance Tricks and Treats
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013
 
Speed Matters
Speed MattersSpeed Matters
Speed Matters
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
My site is slow
My site is slowMy site is slow
My site is slow
 
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend OptimizationEscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend Optimization
 
Windycityrails page performance
Windycityrails page performanceWindycityrails page performance
Windycityrails page performance
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Page Performance
Page PerformancePage Performance
Page Performance
 

More from Stoyan Stefanov

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
Stoyan Stefanov
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
Stoyan Stefanov
 
Liking performance
Liking performanceLiking performance
Liking performance
Stoyan Stefanov
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
Stoyan Stefanov
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
Stoyan Stefanov
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
Stoyan Stefanov
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
Stoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
Stoyan Stefanov
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
Stoyan Stefanov
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
Stoyan Stefanov
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
Stoyan Stefanov
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
Stoyan Stefanov
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
Stoyan Stefanov
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
Stoyan Stefanov
 
The business of performance
The business of performanceThe business of performance
The business of performance
Stoyan Stefanov
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
Stoyan Stefanov
 
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicIgnite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Stoyan Stefanov
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
Stoyan Stefanov
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
Stoyan Stefanov
 

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
Liking performance
Liking performanceLiking performance
Liking performance
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 
The business of performance
The business of performanceThe business of performance
The business of performance
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
 
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicIgnite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
 

Recently uploaded

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 

Recently uploaded (20)

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 

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

  • 1. “Don’t make me wait” or Building High-Performance Web Apps Stoyan Stefanov, Yahoo! Brownbag at eBay August 11, 2009
  • 2. About me •  Yahoo! Search •  Yahoo! Exceptional Performance •  YSlow 2.0 architect •  http://smush.it •  Books, articles •  http://phpied.com
  • 3. Importance of performance •  Is it dev? QA? Afterthought? •  Developers love it •  But is it good for business?
  • 4. Importance of performance •  Self-regulating system •  Slow down = lose users •  We all hate slow pages
  • 5. Importance of performance 1sec = -2.8% revenue
  • 6. Importance of performance Gets worse with time After-effect
  • 7. Importance of performance •  Yahoo!: 400 ms slower = 5-9% drop in full-page traffic
  • 8. Importance of performance Slower pages get less traffic
  • 9. Importance of performance From 4-6 seconds to 1.5 seconds
  • 10. “The premature optimization… •  … is the root of all evil” Knuth •  “Make it right before you make it fast” Crockford
  • 11. Measure, measure, measure •  measure •  profile •  monitor
  • 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. 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
  • 15. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  • 16. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  • 17. Less HTTP requests •  Combine components
  • 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. Less HTTP requests •  After: <script    src="all.js"    type="text/javascript">  </script> 
  • 20. Less HTTP requests •  Saved 3 HTTP requests 
  • 21. Less HTTP requests •  repeat for CSS: <link    href="all.css"    rel="stylesheet"    type="text/css”  />
  • 22. Less HTTP requests •  CSS sprites for background images background‐position: ‐22px ‐0px;  width: 12px;  height: 10px; 
  • 23. Less HTTP requests CSS sprites •  Before: 15 requests, 6.8 K •  After: 1 request, 1.4 K 
  • 24. Less HTTP requests •  CSS sprites – a pain, but there are tools http://csssprites.com  http://spritegen.website‐performance.org/  
  • 25. Less HTTP requests •  Inline images with data: scheme
  • 26. Less HTTP requests •  data: URI scheme $ php ‐r "echo base64_encode(file_get_contents('my.png'));”  iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4 DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
  • 27. Less HTTP requests •  data: URI scheme background‐image: url("data:image/png;base64,iVBORw0KG..."); 
  • 28. Less HTTP requests •  data: URI scheme <img src="data:image/png;base64,iVBOR..." /> 
  • 29. Less HTTP requests •  data: URI scheme •  works in IE!...
  • 30. Less HTTP requests •  data: URI scheme •  works in IE8!
  • 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. Less HTTP requests - drawback •  atomic components •  invalidated by small changes •  need to schedule changes
  • 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. “never expire” policy •  Static components with far- future Expires header •  JS, CSS, img ExpiresActive On  ExpiresByType image/png "access plus 10 years" 
  • 35. Inline vs. external •  a.k.a. less http vs. more cache •  how about both?
  • 36. Inline vs. external •  First visit: 1. Inline 2. Lazy-load the external file 3. Write a cookie
  • 37. Inline vs. external •  Later visits: 1. Read cookie 2. Refer to the external file
  • 38. Less stuff – duh! •  No 404s •  No duplicates •  No near-duplicates
  • 39. Duplicates •  2903384828078080_1.jpg •  2204648665418080_1.jpg •  3801476378448080_1.jpg •  3801476377438080_1.jpg
  • 40. Near duplicates •  30x30 vs. 49x49 •  Rounded corners, shadows
  • 41. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff 3.  Out of the way 4.  Start early
  • 42. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  • 43. Gzip
  • 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. Gzip •  How to gzip? AddOutputFilterByType DEFLATE text/html text/…  Header append Vary Accept‐Encoding  http://www.sitepoint.com/article/web‐site‐optimization‐steps  
  • 48. Minify •  YUI Compressor •  Minifies JS and CSS •  Tolerates * and _ hacks •  More than minification
  • 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. Minify •  minify HTML? •  dangerous •  write minified HTML echo '<div class="my">',         '<p>',            $db‐>get('name'),         '</p>',       '<div>'; 
  • 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> 
  • 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. Relative URLs on my blog •  Compare: •  2.66K - absolute links •  1.4K - sprite of 15 elements
  • 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. Images – progressive JPEG •  for images ~10K+
  • 59. Images •  eBay homepage could save 20% image sizes •  Search –> 10%+ •  Item -> 30% (50K+)
  • 60. Images – duh! 1.  Don’t scale in HTML 2.  Generated images should be crushed PNGs too
  • 61. Images •  It’s only human to forget •  All you need is a process so you don’t have to remember
  • 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. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way 4.  Start early
  • 64. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  • 65. Free-falling waterfalls •  Less DNS lookups – fetch components from not more than 2-4 domains •  Less redirects •  Blocking JavaScript/CSS
  • 67. JavaScript rocks! •  But also blocks html js png png
  • 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. Non-blocking JavaScript •  And what about my inline scripts? •  Setup a collection (registry) of inline scripts
  • 70. Step 1 •  Inline in the <head>: var myapp = {    stuff: [],  }; 
  • 71. Step 2 •  Add to the registry Instead of:   <script>alert('boo!');</script>  Do:   <script>      myapp.stuff.push(function(){     alert('boo!');      });    </script> 
  • 72. Step 3 •  Execute all var l = myapp.stuff.length;   for(var i = 0, i < l; i++) {    myapp.stuff[i]();  } 
  • 73. Blocking CSS? But they do block: •  In FF2 •  When followed by an inline script
  • 74. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early
  • 75. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  • 76. Cookies •  less cookies •  no cookies •  www vs. non-www 3000 bytes of cookies cost 78ms
  • 77. flush() early html png js  css html js png ✔ css
  • 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>    .... 
  • 80. Chunked encoding •  Progressive rendering - Semantic app chunks vs. - Server-level chunks
  • 81. Progressive rendering Chunk #1 Chunk #2 Chunk #3
  • 82. Progressive rendering •  Server-level flush: bing.com – every 1 or 2K google (ungzip) – every 4K
  • 83. Progressive + source order 1 3 2 4
  • 84. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early ✔
  • 87. Life after onload 1.  Lazy-load 2.  Pre-load 3.  XHR 4.  JavaScript optimizations 5.  Rendering
  • 88. Lazy-load •  bells & whistles •  badges & widgets
  • 89. Preload •  to help next page’s waterfall •  img, CSS, JS, DNS lookups
  • 90. XHR (Ajax) •  small – gzip, JSON •  less – Expires  •  GET over POST
  • 91. GET vs. POST for XHR var url = 'test.php';  var request =  new XMLHttpRequest();  request.open("POST", url, false);  // …  request.send('test=1'); 
  • 92. GET vs. POST for XHR
  • 93. JavaScript optimizations •  Number of DOM elements •  DOM access •  Event delegation
  • 96. Rendering •  CSS on top •  No separate print CSS •  CSS refactoring •  No AlphaImageLoader •  Expensive elements •  No CSS expressions •  Image dimensions
  • 97. CSS early on •  No separate print CSS file /* screen styles */  #nav {...}  .banner {...}  /* print styles */  @media print {      #nav {display: none}      .banner {display: none;}  } 
  • 98. CSS refactoring •  CSS tends to grow •  Find unused selectors – DustMeSelectors extension •  Cleanup things like:   #header #menu {...}    div#menu {...}    ul li {...} 
  • 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. Expensive elements •  Avoid or limit <applet>  <object> (IE) <iframe> 
  • 101. Life after onload 1.  Lazy-load ✔ 2.  Pre-load ✔ 3.  XHR ✔ 4.  JavaScript optimizations ✔ 5.  Rendering ✔
  • 104. YSlow •  Firebug extension •  Why (is my page) slow? http://developer.yahoo.com/yslow/
  • 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. 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. 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. 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. 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. YSlow score foreach rule total += rule score * rule weight end foreach score = total / sum of rule weights
  • 111. YSlow letter score •  (A) 90 – 100 •  (B) 80 – 89 •  (C) 70 – 79 •  (D) 60 – 69 •  (E) 50 – 59 •  (F) under 50
  • 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. Rule scores •  Start from 100 •  Penalty for every offence
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 138. Performance matters •  It affects the user happiness •  It affects the bottom line
  • 139. Front-end •  That’s where most of the time is spent
  • 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. What’s a low-hanging fruit? •  Takes one engineer •  Takes 15 minutes Steve Krug
  • 142. For non-low-hanging fruits? 1.  Pick 2 or 3 2.  Fix, measure one by one 3.  Come back and iterate