You forgot to include kitchensink.com

Sometimes strange things catch my attention. As a web professional, sometimes web sites acting strangely catch my attention.  Over the last couple of days, two different sites did things that not only caught my attention, but completely blew my mind. And not in the good way.

One of the sites (which will remain nameless) is a tech blog I normally read via RSS, but I found myself actually reading from the site recently.  As I did, I noticed the status bar flickering, and the load progress bar not quite all the way to the end.  The page was obviously still loading, but it appeared that the page was complete.  As I scrolled down the page, I noticed that the blogroll used the favicon of each blog listed in a very long list.  Because I do not visit many of the sites on that blogroll (apparently), my browser had to go to each site and download the favicon for each blog. The good news about that is now that I’ve fully downloaded the page, I have all those favicons cached, and subsequent loads of that page should be snappy, but I have to wonder if there isn’t a better way to do that.

It could be possible to put all the favicons into a sprite image, and download the single image file and let the browser’s CSS do it’s magic.  However, there are (at least) two things wrong with doing that.  First, if the blog’s owner decides to change the favicon, the incorrect icon will appear in the blogroll until the sprite image is updated. Second, copying somebody else’s graphic handiwork onto your server is ethically shady. Ethically, the blog’s designer did the right thing and reference the favicon from each of the remote sites. Unfortunately, the ethical thing to do was not the speediest thing to do. In this case, the blog’s designer would have to ask the question “does including the favicon from each of these remote blogs add any value worth the hit in performance?”  In my mind, the answer would probably be no.too-many-includes

The first attention-grabbing site was a personal blog site.  The second, however, is a high-traffic tech news site (which will also remain unnamed). This site is big into embedding JavaScript or Flash from other sites on their page.  The reason I know this is because I use a Firefox extension called No Script that blocks all JavaScript and Flash content unless I have explicitly allow a given hostname.  The image to the right is the No Script status bar. Note the number of sites. That’s a lot. (An aside: The sites with the blue S icon are those that I have not allowed to load, and the sites with the red circle and slash through them are being allowed.) Many of the includes are for site tracking or commenting, but in my mind, there are way too many includes here.  All of these things take time to load.  This, too, would be another one of those situations where the site’s designer has to ask if the value added by all these includes is worth the extra time it takes to load the site.

This same site doesn’t come close to having well-formed HTML, either.  Below is the output of HTML Validator, showing not just a large number of errors, but several frames as well.  I had thought frames died in 1999. Apparently not.

too-many-errors

Tags: , , ,