View source for Webdev:Performance

== Tools  ==

=== Code  ===

*[http://code.google.com/p/minify/ Minify] - CSS/JS PHP minifier 
**Very configurable 
**Can restrict to specific files to concat in config 
**Supports memcache, gzip and far-future expires headers 
*Far-future expires headers for Apache 
**Put in .htaccess file or http.conf 
  &lt;FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|ttf)$"&gt;
  Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT" 
  &lt;/FilesMatch&gt;
* Note: you will have to change the url to update any static content. 
* Gzip
** On by default for all Mozilla sites
* [http://spriteme.org/ Spriteme.org] - Awesome bookmarklet that sprites similar sized and positioned background images. Works pretty well. You have to manually download the sprited image and copy/paste the new CSS, but you can preview the changes live.

=== Profiling  ===

* [https://addons.mozilla.org/en-US/firefox/addon/5369 YSlow] - #1 perf. tool for frontend. Graded score for page and each rule. Use this and try to hit the first 5 rules as much as possible. (Except CDN req.)
* [http://code.google.com/speed/page-speed/ PageSpeed] - Performance rules, some overlap with YSlow. Harder to figure out what is a priority. Recommend to use after getting an 'A' in YSlow.
* [http://www.webpagetest.org WebpageTest] - Use defaults to get a 'normal' test. Good for seeing how long a page takes to load for a normal user and around the world.
* [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug] JS Profiler - use this if your JS is locking up browsers. Has ok profiling for JS functions.

= Optimizing Your Site = 

== New Site  ==
=== Easy ===
* Sprite icons and bg images before building site
* Use a build script to merge and minify CSS & JS files for production
* Put JS at bottom
* Put CSS at top
* Add expires headers for static content and add version # in URLs
* Don't use inline JS except for bottom of page (blocks rendering and downloading of other assets)
* Put stats tracking code in footer, not head
* Use -moz-box-shadow, -moz-border-radius and -moz-linear-gradient for drop shadows, rounded corners and gradients (reduces # of images significantly)
* [http://developer.yahoo.com/yslow/smushit/ Smush] images - best done via YSlow

=== Hard ===
* Post-load assets after page load
* Pre-load assets for subsequent pages a user may visit
* Reduce cookie size
* Move static content to a cookieless domain

== Live Site  ==
=== Easy  ===
*Copy/paste CSS &amp; JS libraries into 1 file each 
*Move JS to bottom of page 
*Run images through [http://developer.yahoo.com/yslow/smushit/ smushit] 
*Far-future expires static files 
*Gzip
* Use [http://spriteme.org/ SpriteMe] to sprite images easily.
=== Hard ===
* Post-load assets after page load (extra css & js files)
* Reduce cookie size
* Move static content to a cookieless domain
* Minimize redirects
*Sprite related images (icons, bg images)