Skip to content

CategoryCSS

High Performance Websites

This was a great read. Certainly learned a lot of useful lessons on front-end optimizations. Written by Steve Souders (previously lead Optimization efforts at Yahoo!), who also developed YSlow! – a Firefox add-on (actually an add-on to the Firefox add-on called Firebug) that gives your web pages a grade from A through F and tells you how to make it better.

If you have a build script, you may be able to automate a lot of these things, like combining JS and CSS files, and optimize PNG files (check out http://www.phpied.com/give-png-a-chance/ to see how to optimize from the command line). If you’re going to optimize JavaScript, I would recommend YUI Compressor (http://developer.yahoo.com/yui/compressor/) since it’s not as greedy as Google’s Closure Compiler for JavaScript. The Closure compiler (http://code.google.com/closure/compiler/) is relatively new and you may get even smaller files, but if your JavaScript is complex, it may have bugs because it’s a greedy compiler.

Anywhoot, here’s what I got from it:

  1. Reduce as many HTTP requests as possible.
  2. Minify JavaScript (don’t obfuscate, because it’s more trouble than it’s worth for the benefits you get)
  3. Minify CSS and optimize it (reduce duplication).
  4. Future-expire resources for caching (PNG, JPG, GIF, JavaScript and CSS).
  5. Minify HTML (get away from tables)
  6. Put CSS at the top, put JavaScript at the bottom.
  7. For design components (background images, button images, nav images), use CSS sprites.
  8. Use PNG for design components (they compress better than GIF, have partial transparency, and can have greater color palettes).
  9. Gzip non-binary data like HTML.
  10. Combine CSS and JavaScript into single files to reduce HTTP requests.

A summary of his optimization rules are found here, but of course, it’s not as detailed as the book: http://stevesouders.com/hpws/rules.php .

Stoyan Stefanov, another prominent developer who’s written tons on JavaScript and optimization, published 24 articles this month on optimization. I find these articles invaluable. It’s recent and he does actual optimization tests and tells you what tools he uses. Here’s the site: http://www.phpied.com/performance-advent-calendar-2009/

Custom Fonts with CSS3

One great thing about CSS3 is its typography facilities. With that comes the ability to use system fonts other than the safe-web fonts such as Arial/Helvetica, Times New Roman/Times, or Courier New/Courier. Actually, it’s been a feature since CSS2, but at that time, but not all browsers have been supporting the same type of font file. ( Man, why can’t browsers agree on *SOMETHING*.) You can read more about the font files that are supported (EOT, OTF, TTF), but for the most part, as always IE is the buzz-kill. Currently, most recent-versioned browsers support the TTF format except IE8.

Anywhoot, here’s a demo that loads a TTF Upside-down font and applies the font to a text area. It lets you type upside-down. Code is very simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Text</title>
<style type="text/css">
@font-face 
{
  font-family: "upsidedown_font"; 
  src: url("http://www.shinylight.com/wp-content/uploads/2010/01/Stagdive.ttf");
}

textarea 
{
  font-family: "upsidedown_font", Arial; 
  font-size:48px;
}
</style>

</head>

<body>
<h3>Type stuff. It'll be upside down.</h3>
<p>Only supported in modern-versioned browsers. Not supported in IE8. </p>
<textarea cols="60" rows="10"></textarea>
</body>