Don’t Forget to Clean Your Code!

Posted on June 17, 2009. Filed under: Main, Microsoft, Tech Tips, Web Development | Tags: , , , , , |

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

Advertisements

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • June 2009
    S M T W T F S
    « Feb    
     123456
    78910111213
    14151617181920
    21222324252627
    282930  
  • Meta

  • Categories

  • delicious tags

  • Blog Stats

    • 10,514 visits

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: