MHunt Design Freelance Web Solutions

1. Improve your performance with YSlow

http://developer.yahoo.com/yslow/

Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more.
With Yslow you can figure out what is holding up the page from loading up fast. I typically check under components to see if there are any 404s for files called.

2. Compress Images with Smushit

http://developer.yahoo.com/yslow/smushit/

Compress images even further than saving for web in photoshop with Smushit.

3. Place Javascript at the bottom of your html document

Javascript calls at the bottom allow the page to load without having to wait until the javascript is loaded.

4. Compress CSS and JS Files

http://www.cssoptimiser.com/

http://www.cleancss.com/

http://javascriptcompressor.com/

5. Use CSS Sprites

The concept of css sprites is to combine multiple images into one and using background-position in your css to display only certain images.

See How to use CSS Sprites: http://css-tricks.com/css-sprites/

Video: Exactly How to use CSS Sprites: http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Dave Shea explains CSS Sprites: http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/

Related posts:

1. Web Design Resources: January 19th through January 23rd
2. Forcing Internet Explorer to obey css using Javascript, CSS hacks and specific style sheets
3. Web Design Resources: February 1st through February 3rd

This entry was posted on Thursday, August 20th, 2009 at 10:52 pm and is filed under CSS, Web Development, jQuery, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.