Vol. 2, No. 13
TODAY'S LESSON: Traffic Jam

Imagine: A potential visitor to your site sits down at her computer. She pushes the On button and waits 45 seconds or so for the thing to boot up. Next, she clicks her modem into action and waits a minute or two for the screeching to die down. Then she selects her browser of choice and waits another 15 seconds for that to launch. And THEN she heads on over to your site and ... waits another 20 seconds for your homepage to load. Only by that point, she's banging her head on her keyboard with impatience, so she leaves after only 10 seconds and heads for greener pastures, never to return to your plodding site again.

Yes, it's time to clean house. Lean sites mean faster downloads, and faster downloads mean happy visitors. But how do you separate the bloat from the bare necessities?

So glad you asked!

>>> Tidy Your HTML <<<

When it comes to the code you use to build your site, each character ads to the overall download time of the page. This means that if you can find a way to do something using one less letter, you shave off a millisecond.

So while it may seem ridiculous, the difference between naming an image "spacer.gif" versus "s.gif" can really add up, especially if you use the image over and over. Say that spacer appears 35 times on a page. All told, the long version eats up 400 or so bytes but the short version adds up to only 150 bytes. That's a savings of almost 75 percent!

And there are many other ways to trim the fat from your HTML: Opt for relative links instead of absolute links, keep your comment tags short and sweet, use special characters only when necessary. Want to know how it's all done? This Webmonkey article reveals all: Lean and Mean HTML!

>>> Clear the Table <<<

There are many ways to build a table. They can be huge and sprawling with lots of leaves and awkward corners, or they can be simple, sturdy, three-legged affairs -- both more or less do the same job. One of the easiest ways to trim the fat from your HTML is to be smart about the way you build your tables. If this is your first time at the table, perhaps you should start at the beginning:

The Basic, Basic Table

Once you're armed with basic table manners, it won't be long before you're siccing those new-found skills on increasingly elaborate constructions. But be careful -- the code it takes to create a fancy table can really bulk up a page. Just because something can be done in a table doesn't mean it should be -- the key is to select the right table for each occasion: Sometimes nesting the tables is appropriate, sometimes a table chockfull of "colspan" and "cellpadding" attributes is the way to go. And sometimes you don't need a table at all.

Want to learn when to put what on the table? Let these two Webmonkey tutorials lead the way:

Lean and Mean Tables Site Optimization Tutorial -- Lesson Three

>>> Clean up Your Image <<<

Pictures are worth a thousand words, especially on the Web where pages of text can download in the time it takes for a single image to load. Your images may be sub-zero cool, but if they're too plump, few people will stick around long enough to see them.

Some ways to shrinky-dink the size of your images include: choosing a GIF over a JPEG, taking advantage of the browser's caching capabilities, and creating small images that can scale into larger ones. The many lessons found in Webmonkey's Site Optimization Tutorial cover all that, and more:

"GIFs vs. JPEGs"

"Cache Is Your Friend"

"Scaling Images"

1. Space Out

I bet you didn't realize that every single hard return and space you use to indent your HTML increases the overall file size of your page. Well it does! So avoid all nonessential spaces and carriage returns in your code. To see an example of code that's a little to space-happy, along with an ideal, pared-down code version of the same code, visit this lesson of the Lean and Mean HTML tutorial: "Kill the Invisibles"

2. Suppress Those Nesting Instincts

I know that sometimes it seems like your problems can only be solved by placing a table within a table, but if you plan ahead, you'll probably find that your layout difficulties can also be solved with one, cleverly constructed table. Don't have a clue what I'm gabbing about? The illustrations found in this lesson of the Lean and Mean Tables tutorial should make me clear: "Tidy Table Carpentry 101"

3. Chicken + Burger + Fries + Cake = A Whole Lotta Tears

When you finish eating your Indian takeout -- the samosas, the chicken tikka, the nan, the rice, the dipping sauce trio -- and then a friend stops by with hamburgers and fries, don't convince yourself that you're "still a little peckish" and keep eating. And especially don't follow up that second dinner with a two pieces of cake. Why is that, you ask? Because you may never walk again.

Handcrafted Archive