Don’t Forget to Clean Your Code!

I recently was asked to update a Web page with a rather long list of names, which were provided in a Word document.  I use a combination of Dreamweaver and Expression Web, because they both have good tools for stripping out problematic HTML from Word, but today they weren’t much help.

This particular document had a table (of sorts) built into it, which listed names and cities, but after a good ol’

copy and paste, I found that things didn’t quite line up.  Upon closer review, I found that the “table” was actually made up of tabs and spaces.  While this worked in Word, it made a horrible mess for the Web.  Just doing a copy and paste job created spaces (technically non-breaking spaces — “nbsp”) that seemed like empty space, but actually take up quite a lot.  In fact, these spaces made the page 322kb!  Most of the larger pages on the site were around 20-25kb, so I took another look at things.

In this case, I decided not to go with a table for the little bit of text that could fit in, instead going with the city name in parentheses after the person’s name.  After removing all the nbsp’s from the code, I was able to shrink the page to 32kb – a 90% reduction in page size!  That means the page will load in just over 1 second, instead of over 12 from before.

So, to recap:

1. Copy and paste doesn’t work as expected with the web, so be prepared to clean up your code a bit.
2. Check for spaces that don’t belong, particularly the “ ” – they take up more space than just hitting the spacebar does.
3. Use a tool like Firebug for Firefox, or the built-in tools in several other browsers (IE8, Safari 4, Chrome) to test your page for load times and see how you can improve them.

Windows Live Tags: Code,Word,Dreamweaver,Expression,tools,HTML,spaces,text,reduction,size,Copy,tool,Firebug,Firefox,Safari,Chrome,nbsp

WordPress Tags: Code,Word,Dreamweaver,Expression,tools,HTML,spaces,text,reduction,size,Copy,tool,Firebug,Firefox,Safari,Chrome,nbsp