File Under: Blogging for Money

First off let me say that if you’re an experienced webmaster with many years of site building under your belt, well, you may want to head back now before things get ugly… not to dis you of course, it’s just that this post is aimed at average joe bloggers like myself – you know, the type who know just enough to be dangerous.

OK, now that the pros have left the room…

I have to admit something to you: I’m a tweaker.

No, not the kind you find breaking into people’s cars to steal small change for their next fix… I’m a code tweaker. I have a bit more background in computer programming (C/C++) than most folks, but until I got into blogging I had absolutely zero knowledge of HTML, JavaScript, or any of the backend aspects of how websites work.

But being a curious cat (yes, I know that can get you killed!) I absolutely love to tinker with coding, and immediately after starting my very first Blogger blog back in February of last year (2005,) I began digging into its template, teasing out the secrets of HTML, and learning how to do things my own way, purely by trial and error.

Then around August, with a few more important blogs in the making - and with the encouragement of a few online friends – I made the jump to uber-blogging-platform WordPress (can you believe this thing is free?) and began digging my way through PHP, MySQL databases and the like. Soon I had tweaked my 3-column Kubrick template into an entirely new beast, and I loved it.

I’ve tweaked that template over and over again, for a number of my blogs, and for months now it has looked fantastic, with just one small problem – it loaded into a browser about as fast as a gimpy turtle.

Validate Me!

Now I hate to admit it, but over the weekend I discovered just how dangerous my small amount of coding knowledge can be. See, I’ve had a few nagging problems in my head recently: Google SiteMaps says some of my pages are only partially indexed, Technorati dropped me inexplicably from their index, and then there’s that whole slow page-load thingy.

Cruising Technorati’s Webmaster Help section I came across their recommendation that if your blog isn’t getting indexed it might be a good idea to check that you are producing valid code (XHTML in the case of most blogs –all blogs?) Anyways, being at my wit’s end for how to get back into Technorati I decided I may as well try validating my code, so I headed over to the W3C Markup Validation website and punched in my site… and I damn near had a coronary.

Failed validation, 165 errors
This page is not Valid XHTML 1.0 Transitional!

Holy crud – 165 errors! Perhaps this was the answer to my seemingly divergent blogging problems? Well, I didn’t know for sure, but it seemed like a reasonable hypothesis, so being a perfectionist, and endless code tinkerer, I dug right in – and learned a whole helluva’ lot about creating valid XHTML.

I’ll let you in on a little secret: that validator is a small miracle for newbie bloggers.

It’s undoubtedly a bit arcane at first glance, but with a bit of patience you can learn all sorts of amazing things about what does & doesn’t work on your site… for instance, no matter how careful a blogger you are you are likely to have a few unclosed <div>, <ul>, <li>, <span> or other tags in your template. These are fairly easy to fix.

You’ve also probably got images without alt attributes, or without proper closing tags.

My most egregious error? I’d been using old-style HTML <br> tags for breaks, instead of the new and improved XHTML <br />. I had these all over the place.

Now granted, a few validation errors isn’t going to hurt your site very much, but there’s one thing you need to understand about web browsers (not the people, the programs!) Their job is to take in your code, fix any errors they find, and then spit the whole thing out onto the screen in a readable fashion… in short, they’re only as good as the information you give them.

Every extra error adds a little bit of time to the process of rendering your blog page, and at the same time increases the chance that one browser is going to interpret that error differently than another.

Two, or three, or ten errors may not make a noticeable difference in page-load times, but I can tell you from experience that 165 certainly did. It was huge. It took me about six hours to totally debug my two main blogs, but the speed increase has been incredible… they went from sluggish to zoom zoom zoom in the space of a weekend.

Another Upside?!

I was having trouble getting my pages to render correctly in Microsoft’s painfully lame IE (who isn’t!) but after fixing all of these code errors, my blogs now look a heck of a lot better in IE than they did last week.

Of course, there’s also the benefit of keeping readers… lets face it, the average web surfer is a rather impatient beast, and while I don’t know the exact statistics, I do know that if a web user is forced to wait more than about seven or eight seconds for your blog to load-up, well, you’ve just lost your reader.

And if you’re a ProBlogger, or even a wannabe ProBlogger, that means you’ve just lost some real revenue.

Which brings us to the moral of the story–

Don’t put all of your time into developing quality content and gathering incoming links, if you’re not going to take a look at the smaller picture, too – the code. You could be shooting yourself in the foot.

While I’m far from an expert on this topic, from what I’ve read (and experienced) validating your XHTML will more than likely help you achieve speed increases (= more readers = more money,) a higher likelihood of staying indexed in Technorati (and more than likely Google, Yahoo & others,) and your websites will even be better suited for display on handheld devices.

That’s a whole lot of goodness for something that you know you should learn to do anyways – write correct code!

A Few Hints

So like I said, I’m just starting to delve into this stuff, but here are a few hints I can give you:

1. Before you go messing around with your templates make sure you back them up – if you break something while tweaking your design it will be a lot easier to fix things if you have a working (if flawed) copy lying around.
2. After you’ve run a page through the W3C Validator you’ll get to a page listing all of your errors and warnings. Before you do anything else, click the Show Source button and then revalidate your page – this will list your entire source code directly beneath your list of errors, and when an error is listed you will be provided a link to the exact line of code… needless to say this makes your errors a whole lot easier to figure out.
3. If you have access to the actual template files on your server, do a quick Search & Replace for some of your errors. For instance, I was able to clear up a bunch of my errors by automatically replacing <br> with <br />. Talk about saving time!
4. You may find that certain affiliate links are not valid XHTML. I had this problem with both LinkShare, and some of my Amazon links. It’s of course up to you whether they are a big enough problem to remove from your site permanently, but if you want to make it easier to tease out which errors are truly yours, you can always do like I did and remove them temporarily while you go through the fixing process. I found LinkShare links in particular to create multiple errors.

Well, that’s about it. It’s too early to tell whether my newfound valid website (well, mostly valid now that I’ve added my LinkShare links back in) will do better in Technorati, or get more fully-indexed by Google, but the speed-up alone was well worth the time invested.

And hey, now that I’ve got my blogs validated I can start working on optimization… that’s a whole other can of worms!