Site Speed Analysis With YSlow

This is a nifty little tool to add to your web development toolkit! Yahoo has developed a nifty website speed analysis Firebug extension. Yep. Not Firefox…FireBug. (Which I guess makes it a Firefox extension with a dependancy…but whatever). The extension is YSlow which Yahoo! describes as:

YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you:

Install Firebug first!

  • Performance report card
  • HTTP/HTML summary
  • List of components in the page
  • Tools including JSLint

Once installed, the plugin adds its features onto Firebug itself, giving a few extra things to click on and view. (Note the added menu options at the top of the following image):

perfview

If you are curious about what to do with the data that YSlow provides, Yahoo has some nice docs as usual. Overall, this is a sexy little tool!

20 CSS Tips and Tricks

Pete Freitag as generated a list of 20 CSS Tips and Tricks. Definately some useful stuff in there!

  1. Rounded Corners
  2. Rounded Corners without images
  3. Creating a Netflix style star ratings
  4. Tableless forms
  5. Styling Lists with CSS
  6. 2 Column Layout Technique
  7. 3 Column Layout with CSS
  8. 3 Column Fixed width centered layout
  9. Printing with CSS
  10. Adding a CSS stylesheet to an RSS feed
  11. Footer Stick
  12. CSS Element Hover Effect
  13. Styling Horizontal Rules
  14. Clearing Floats
  15. CSS Popups
  16. Box Punch
  17. CSS Badge
  18. Orange RSS Buttons with pure CSS
  19. 10 CSS Tricks you may not know
  20. 10 More CSS Tricks you may not know

One of the comments on Pete’s site says the following:

Technique #12 does NOT work for most browsers, since uses CSS features not implemented in most popular browsers.