Mike's Web Performance Cheatsheet

• YSlow rules
  1. Fewer HTTP Requests
  2. Use a CDN (closer to client, shared caching)
  3. Expires/Cache-Control Header
  4. Gzip
  5. Stylesheets at Top
  6. Scripts at Bottom
  7. CSS Expressions (slow IE6 hack)
  8. External JS/CSS (performant due to caching)
  9. Fewer DNS Lookups
  10. Minify Javascript/CSS
  11. Avoid Redirects
  12. Duplicate Scripts (e.g. plugins requesting multiple versions of jQuery)
  13. ETags (fingerprint for a resource used for conditional loading)
  14. Cacheable AJAX

  note: many of those are contradictory

  • 1 vs 8
  • 2 vs 9
  • 3 vs 13 (do not use 3 and 13)
  
  
• More Rules
  • Image Spriting
  • Concat JS/CSS
  • mod_deflate (Apache)
  • Gzip - http://www.gidnetwork.com/tools/gzip-test.php
  • Expires/Cache-Control
  • more rules: http://developer.yahoo.com/performance/rules.html
  • Reduce Cookie Size - huge problem on the web!
  • Cookie-Free Domain: assets server: make sure you do not set cookies from this domain
  • Optimize Sprites (e.g. horizontally oriented sprites more efficient than vertical)
  • <img src=""> empty image tags, often generated automatically
  
  
• resource loading
  • images: best practice: <link rel="prefetch" href="something.png">
  • old school image preloading:
    <script>
var img = new Image();>
img.src = "something.jpg";>
</script>
    
  • DNS pre-fetching: let the browser do this, eh?
  • lazy loading scripts
    
  • dynamic loading can be useful as DOM readystate reached much earlier
  • document.write disclaimer: all rendering stops until this is completed (might create a script)
  • remember: object oriented code can be very slow in interpreted environments
  
  
• UI thread
  • Javascript has single-thread of execution for a given execution context.
  • Web Workers - some distinct JS file running in it's own thread, can only communicate asynchronously
  • garbage collection - objects that go out of scope or have their reference reset still exist on several layers. JS objects are implemented by browser as C++ objects and still occupy memory space
  • jsPerf.com - run head to head tests of JS snippets (benchmark.js lib)
  
  
• links
  • webperformancetoday.com
  • JSperf.com
  • webpagetest.org
  • W3C Web Performance Working Group

back to top